使用帶有 GeoJson 文件的 JSTS 檢查多邊形的重疊

Question

我試圖在使用 geoJson 使用預先渲染的多邊形在谷歌地圖上繪制多邊形時提醒用戶。 每當在現有多邊形上繪制多邊形時，用戶應該得到警報。 我有一個例子，但它適用於同一層上的多邊形（小提琴示例）。 我的代碼托管在這里。 請參考我需要的下圖：

JS代碼如下：

    var drawingManager;

function initialize() {
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 12,
    center: new google.maps.LatLng(28.631162, 77.213313),
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    disableDefaultUI: true,
    zoomControl: true
  });
  var polyOptions = {
    fillColor: '#0099FF',
    fillOpacity: 0.7,
    strokeColor: '#AA2143',
    strokeWeight: 2,
    editable: true
  };
  // Creates a drawing manager attached to the map that allows the user to draw Polygons
  map.data.loadGeoJson('near.json')
  drawingManager = new google.maps.drawing.DrawingManager({
    drawingControlOptions: {
      drawingModes: [
        google.maps.drawing.OverlayType.POLYGON
      ]
    },
    polygonOptions: polyOptions,
    map: map
  });

  google.maps.event.addListener(drawingManager, 'overlaycomplete', function (e) {     
  
  alert("Polygon Completed. Here show message if overlapped");

  });

}

HTML 如下

<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Create Boundary</title>
    <style>
     #map,
        html,
        body {
            padding: 0;
            margin: 0;
            height: 100%;
        }
    </style>
  </head>
  <body>
    <div id="map"></div>
    <script src="https://cdn.rawgit.com/bjornharrtell/jsts/gh-pages/1.1.2/jsts.min.js"></script>    
    <script src="https://maps.googleapis.com/maps/api/js?key=API-KEY" async defer></script>
    <script src="scripts/map.js"></script>


</div>
  </body>
</html>

Answer 1

一種選擇是將 GeoJSON 中的多邊形解析為“正常” google.maps.Polygon對象，然后將它們預加載到您的all_overlays數組中：

map.data.addListener('addfeature', function(e) {
  if (e.feature.getGeometry().getType() == "Polygon") {
    // simplifying assumption, depends on data
    // just check first linear ring
    var poly = new google.maps.Polygon({
      path: e.feature.getGeometry().getAt(0).getArray(),
      fillColor: '#0099FF',
      fillOpacity: 0.7,
      strokeColor: '#AA2143',
      strokeWeight: 2,
      map: map
    });
    all_overlays.push(poly);
  }
});

概念證明小提琴

代碼片段：

 var drawingManager; var selectedShape; var all_overlays = []; var gmarkers = Array(); var polygons = Array(); function setSelection(shape) { clearSelection(); selectedShape = shape; shape.setEditable(true); } function clearSelection() { if (selectedShape) { selectedShape.setEditable(false); selectedShape = null; } } function initialize() { var map = new google.maps.Map(document.getElementById('map'), { zoom: 10, center: new google.maps.LatLng(33.619003, -83.867405), mapTypeId: google.maps.MapTypeId.ROADMAP, disableDefaultUI: true, zoomControl: true }); // zoom to show all the features var bounds = new google.maps.LatLngBounds(); map.data.addListener('addfeature', function(e) { processPoints(e.feature.getGeometry(), bounds.extend, bounds); map.fitBounds(bounds); if (e.feature.getGeometry().getType() == "Polygon") { // simplifying assumption, depends on data // just check first linear ring var poly = new google.maps.Polygon({ path: e.feature.getGeometry().getAt(0).getArray(), fillColor: '#0099FF', fillOpacity: 0.7, strokeColor: '#AA2143', strokeWeight: 2, map: map }); all_overlays.push(poly); } }); map.data.loadGeoJson("https://raw.githubusercontent.com/datameet/Municipal_Spatial_Data/master/Delhi/Delhi_Wards.geojson"); map.data.setMap(null); var polyOptions = { fillColor: '#0099FF', fillOpacity: 0.7, strokeColor: '#AA2143', strokeWeight: 2, editable: true }; // Creates a drawing manager attached to the map that allows the user to draw Polygons drawingManager = new google.maps.drawing.DrawingManager({ drawingControlOptions: { drawingModes: [ google.maps.drawing.OverlayType.POLYGON ] }, polygonOptions: polyOptions, map: map }); google.maps.event.addListener(drawingManager, 'overlaycomplete', function(e) { calcIntersection(e.overlay, all_overlays); all_overlays.push(e.overlay); }); } function calcIntersection(newOverlay, allOverlays) { //ensure the polygon contains enought vertices if (newOverlay.getPath().getLength() < 3) { alert("Not enought vertices. Draw a polygon that contains at least 3 vertices."); return; } var geometryFactory = new jsts.geom.GeometryFactory(); var newPolygon = createJstsPolygon(geometryFactory, newOverlay); //iterate existing polygons and find if a new polygon intersects any of them var result = allOverlays.filter(function(currentOverlay) { var curPolygon = createJstsPolygon(geometryFactory, currentOverlay); var intersection = newPolygon.intersection(curPolygon); return intersection.isEmpty() == false; }); //if new polygon intersects any of exiting ones, draw it with green color if (result.length > 0) { newOverlay.setOptions({ strokeWeight: 2.0, fillColor: 'green' }); } } function createJstsPolygon(geometryFactory, overlay) { var path = overlay.getPath(); var coordinates = path.getArray().map(function name(coord) { return new jsts.geom.Coordinate(coord.lat(), coord.lng()); }); coordinates.push(coordinates[0]); var shell = geometryFactory.createLinearRing(coordinates); return geometryFactory.createPolygon(shell); } google.maps.event.addDomListener(window, 'load', initialize); function processPoints(geometry, callback, thisArg) { if (geometry instanceof google.maps.LatLng) { callback.call(thisArg, geometry); } else if (geometry instanceof google.maps.Data.Point) { callback.call(thisArg, geometry.get()); } else { geometry.getArray().forEach(function(g) { processPoints(g, callback, thisArg); }); } }

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

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

使用帶有 GeoJson 文件的 JSTS 檢查多邊形的重疊

問題描述

1 個解決方案

解決方案1
1 已采納 2021-03-13 16:23:21

使用帶有 GeoJson 文件的 JSTS 檢查多邊形的重疊

問題描述

1 個解決方案

解決方案1 1 已采納 2021-03-13 16:23:21

解決方案1
1 已采納 2021-03-13 16:23:21