Question

我想在谷歌地图上绘制多边形之间的交叉点。我试过这个网站的源代码：“http://www.geocodezip.com/v3_JSTS_example_intersection.html”。但我只有2个多边形请有人告诉我我该怎么办呢？

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <title>Simple Polygon</title>
    <style>
      html, body, #map-canvas {
        height: 100%;
        margin: 0px;
        padding: 0px
      }
    </style>
    <script src="https://maps.googleapis.com/maps/api/js"></script>
    <script src="scripts/jsts-0.15.0/lib/javascript.util.js"></script>
    <script src="scripts/jsts-0.15.0/lib/jsts.js"></script>
    <script>
// This example creates a simple polygon representing the Bermuda Triangle.
var googleMaps2JTS = function(boundaries) {
  var coordinates = [];
  for (var i = 0; i < boundaries.getLength(); i++) {
    coordinates.push(new jsts.geom.Coordinate(
        boundaries.getAt(i).lat(), boundaries.getAt(i).lng()));
  }
  return coordinates;
};
var jsts2googleMaps = function (geometry) {
  var coordArray = geometry.getCoordinates();
  GMcoords = [];
  for (var i = 0; i < coordArray.length; i++) {
    GMcoords.push(new google.maps.LatLng(coordArray[i].x, coordArray[i].y));
  }
  return GMcoords;
}

function initialize() {
  var mapOptions = {
    zoom: 5,
    center: new google.maps.LatLng(24.886436490787712, -70.2685546875),
    mapTypeId: google.maps.MapTypeId.TERRAIN
  };

  var bermudaTriangle;

  var map = new google.maps.Map(document.getElementById('map-canvas'),
      mapOptions);

  // Define the LatLng coordinates for the polygon's path.
  var triangleCoords = [
    new google.maps.LatLng(25.774252, -80.190262),
    new google.maps.LatLng(18.466465, -66.118292),
    new google.maps.LatLng(32.321384, -64.75737),
    new google.maps.LatLng(25.774252, -80.190262)
  ];
  var triCoords2 = [
    new google.maps.LatLng(25.958044673317843,-69.08203125),
    new google.maps.LatLng(18.312810846425442,-58.974609375),
    new google.maps.LatLng(30.826780904779774,-58.095703125),
    new google.maps.LatLng(25.958044673317843,-69.08203125)
  ];
  // Construct the polygon.
  bermudaTriangle = new google.maps.Polygon({
    paths: triangleCoords,
    strokeColor: '#FF0000',
    strokeOpacity: 0.2,
    strokeWeight: 2,
    fillColor: '#FF0000',
    fillOpacity: 0.1
  });

  bermudaTriangle.setMap(map);
  secondBermuda = new google.maps.Polygon({
    paths: triCoords2,
    strokeColor: '#FF0000',
    strokeOpacity: 0.2,
    strokeWeight: 2,
    fillColor: '#FF0000',
    fillOpacity: 0.1
  });

  secondBermuda.setMap(map);

var geometryFactory = new jsts.geom.GeometryFactory();

var trito = bermudaTriangle.getPath();
var tritoCoor = googleMaps2JTS(trito);
var shell = geometryFactory.createLinearRing(tritoCoor);

var trito2 = secondBermuda.getPath();
var tritoCoor2 = googleMaps2JTS(trito2);
var shell2 = geometryFactory.createLinearRing(tritoCoor2);

var jstsPolygon = geometryFactory.createPolygon(shell);
var jstsPolygon2 = geometryFactory.createPolygon(shell2);

var intersection = jstsPolygon.intersection(jstsPolygon2);

var intersectionGMArray = jsts2googleMaps(intersection);
  intersectionPoly = new google.maps.Polygon({
    map: map,
    paths: intersectionGMArray,
    strokeColor: '#0000FF',
    strokeOpacity: 0.8,
    strokeWeight: 2,
    fillColor: '#0000FF',
    fillOpacity: 0.8
  });
// bermudaTriangle.setMap(null);
// secondBermuda.setMap(null);

}

google.maps.event.addDomListener(window, 'load', initialize);

    </script>
  </head>
  <body>
    <div id="map-canvas"></div>
<script src="http://www.google-analytics.com/urchin.js" type="text/javascript"> 
</script> 
<script type="text/javascript">  
  </body>
</html>

谷歌地图绘制2个多边形的交集

0 个答案: