如何在谷歌地图上显示两个多边形的交集区域？

Question

我正在开发一个项目，需要在Google地图上展示两个多边形相交的区域。我已经查阅了地图API文档，它提到了多边形相交，但没有给出任何示例或方法解释。有谁能帮帮我吗？

- anand

---

可能是重复的问题：如何使用JSTS库在Google Maps API中计算交集区域？ - geocodezip

Answer 1

这个例子演示了如何确定和绘制两个多边形的相交区域。

先决条件：

jsts库被用来计算多边形的交集。

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 4,
    center: { lat: 24.886, lng: -70.268 },
    mapTypeId: google.maps.MapTypeId.TERRAIN
  });

  // Define the LatLng coordinates for the polygon's path.
  var bermudaCoords = [
    { lat: 25.774, lng: -80.190 },
    { lat: 18.466, lng: -66.118 },
    { lat: 32.321, lng: -64.757 },
    { lat: 25.774, lng: -80.190 }
  ];

  // Construct the polygon.
  var bermudaTriangle = new google.maps.Polygon({
    paths: bermudaCoords,
    strokeColor: '#FF0000',
    strokeOpacity: 0.8,
    strokeWeight: 2,
    fillColor: '#FF0000',
    fillOpacity: 0.35
  });
  bermudaTriangle.setMap(map);

  // Construct another polygon.
  var anotherCoords = [
    { lat: 25.774, lng: -85.101 },
    { lat: 35.406, lng: -85.101 },
    { lat: 35.406, lng: -54.127 },
    { lat: 25.774, lng: -60.010 }
  ];

  var anotherArea = new google.maps.Polygon({
    paths: anotherCoords,
    strokeColor: '#0000FF',
    strokeOpacity: 0.8,
    strokeWeight: 2,
    fillColor: '#0000FF',
    fillOpacity: 0.35
  });
  anotherArea.setMap(map);



  //calc polygons intersection
  var geometryFactory = new jsts.geom.GeometryFactory();
  var bermudaPolygon = createJstsPolygon(geometryFactory, bermudaTriangle);
  var anotherPolygon = createJstsPolygon(geometryFactory, anotherArea);
  var intersection = bermudaPolygon.intersection(anotherPolygon);
  drawIntersectionArea(map, intersection);
}



function drawIntersectionArea(map, polygon) {
  var coords = polygon.getCoordinates().map(function (coord) {
    return { lat: coord.x, lng: coord.y };
  });

  var intersectionArea = new google.maps.Polygon({
    paths: coords,
    strokeColor: '#00FF00',
    strokeOpacity: 0.8,
    strokeWeight: 4,
    fillColor: '#00FF00',
    fillOpacity: 0.35
  });
  intersectionArea.setMap(map);
}



function createJstsPolygon(geometryFactory, polygon) {
  var path = polygon.getPath();
  var coordinates = path.getArray().map(function name(coord) {
    return new jsts.geom.Coordinate(coord.lat(), coord.lng());
  });
  if(coordinates[0].compareTo(coordinates[coordinates.length-1]) != 0) 
      coordinates.push(coordinates[0]);
  var shell = geometryFactory.createLinearRing(coordinates);
  return geometryFactory.createPolygon(shell);
}


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

#map,
        html,
        body {
            padding: 0;
            margin: 0;
            height: 100%;
        }

<script src="https://maps.googleapis.com/maps/api/js?libraries=drawing&key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<script src="https://cdn.rawgit.com/bjornharrtell/jsts/gh-pages/1.1.2/jsts.min.js"></script>
<div id="map"></div>

JSFiddle

- Vadim Gremyachev

---

如果您想知道相交多边形的数值面积，可以使用以下代码：intersection.getArea(); - John Langford