¿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

  • Google Map Marker Manager V3
  • Google Maps: cómo evitar que InfoWindow cambie el map
  • Cómo usar google-maps-api-v3 sin agregar una label de script en html
  • Google Street View se acerca al Fov
  • Maps API v3: New InfoWindow, con pixelOffset, con datos de KML.
  • Eliminar oyentes marcador
  • API de JavaScript de Google Maps con una superposition de capas de mosaico de OpenWeatherMap
  • Google Maps JS: ¿Cómo obtengo el marcador de información sobre herramientas pequeño al pasar el ratón Y la window de información normal onclick?
  • ¿Cómo forzar a Google Maps API v3 a descartar el soporte táctil?
  • google.maps.places.Una salida de idioma autocompleta
  • ¿Cómo estilo Google Maps como un map de dos tonos de colors?
  • ¿Es posible usar varias imágenes como Google Maps v3 MarkerImage?
  • Distancia de píxeles en Google Map (API V3) para evitar la superposition de tags / superposiciones
  • Javascript tiene muchos buenos JS marco (como Node.js AngularJS Vue.js React.js) es el mejor lenguaje de script.