如何在Google地图上显示两个多边形的相交区域？ [英] How to show the intersecting area of two polygons on Google maps?

问题描述

我正在研究一个项目，我需要显示在Google地图上绘制的两个多边形的相交区域。我已经通过了地图API文档。它确实提到了相交的多边形，但没有解释示例或方法。任何人都可以帮助我吗？

解决方案

该示例演示如何确定并绘制两个多边形的相交区域

先决条件：

jsts library 用于计算多边形交集

 函数initMap（）{var map = new google.maps.Map（document.getElementById（'map'），{zoom：4，center：{lat：24.886，lng：-70.268}，mapTypeId： google.maps.MapTypeId.TERRAIN}）; //定义多边形路径的LatLng坐标。 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} //构造多边形。 var bermudaTriangle = new google.maps.Polygon（{path：bermudaCoords，strokeColor：'＃FF0000'，strokeOpacity：0.8，strokeWeight：2，fillColor：'＃FF0000'，fillOpacity：0.35}）; bermudaTriangle.setMap（地图）; //构造另一个多边形。 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（地图）; // 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 coordinate = path.getArray（）。map（function name（coord）{return new jsts.geom.Coordinate（coord.lat（），coord.lng（））;}）;如果（坐标[0] .compareTo（坐标[coordinates.length-1]）！= 0）coordinates.push（坐标[0]）; var shell = geometryFactory.createLinearRing（coordinates）;返回geometryFactory.createPolygon（shell）;} google.maps.event.addDomListener（window，'load'，initMap）;  

  #map，html，body {padding：0;保证金：0;身高：100％; }  

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

JSFiddle

I am working on a project where I need to show the intersecting area of two polygons drawn on Google maps. I have gone through the maps API documentation. It does mention about intersecting polygons but has no examples or methods explained. Can any one help me out?

解决方案

The example demonstrates how to determine and draw the intersecting area of two polygons

Prerequisite:

jsts library is utilized for calculating polygons intersection

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"></script>
<script src="https://cdn.rawgit.com/bjornharrtell/jsts/gh-pages/1.1.2/jsts.min.js"></script>
<div id="map"></div>

JSFiddle

这篇关于如何在Google地图上显示两个多边形的相交区域？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！