How to show the intersecting area of two polygons on Google maps?

问题:

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?

回答1:

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%;         }

JSFiddle

回答2:

You can find the intersection of two polygon's with JSTS

You can find an example of the intersection method here, http://bjornharrtell.github.io/jsts/examples/overlay.html

文章来源: How to show the intersecting area of two polygons on Google maps?