¿Cómo mostrar el área de intersección de dos polígonos en los mapas de Google?

Estoy trabajando en un proyecto donde necesito mostrar el área de intersección de dos polígonos dibujados en los mapas de Google. He pasado por la documentación de la API de mapas. Menciona los polígonos que se cruzan, pero no tiene ejemplos ni métodos explicados. ¿Puede alguien ayudarme?

2 Solutions collect form web for “¿Cómo mostrar el área de intersección de dos polígonos en los mapas de Google?”

El ejemplo muestra cómo determinar y dibujar el área de intersección de dos polígonos

Requisito previo:

Se utiliza la biblioteca jsts para calcular la intersección de polígonos

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

Puedes encontrar la intersección de dos polígonos con JSTS

Puede encontrar un ejemplo del método de intersección aquí, http://bjornharrtell.github.io/jsts/examples/overlay.html

  • Establecer la altitud / altura de un marcador de google maps
  • Ejemplo de cluster de marcador de Google maps
  • cómo rotar la orientación del map con google maps api v3
  • Google Maps v3 directionsRenderer.setMap (null) no funciona para borrar direcciones anteriores
  • Google Map API v3 sombrea todo, excepto para el polígono
  • ¿Cómo estilo Google Maps como un map de dos tonos de colors?
  • Los maps de Google en Fancybox: visualización incorrecta en la reapertura
  • cómo utilizar Google Map Api en JSP?
  • ¿Cuántas requestes se pueden hacer a la API de Google Maps sin ser prohibidas?
  • Agregar múltiples marcadores a Google Map
  • Cómo cambiar los marcadores en el cambio de zoom en google map api
  • Javascript tiene muchos buenos JS marco (como Node.js AngularJS Vue.js React.js) es el mejor lenguaje de script.