使用带有 GeoJson 文件的 JSTS 检查多边形的重叠答案

【问题标题】：Check overlapping of Polygon using JSTS with a GeoJson File使用带有 GeoJson 文件的 JSTS 检查多边形的重叠
【发布时间】：2021-03-13 03:28:43
【问题描述】：

我试图在使用 geoJson 使用预先渲染的多边形在 Google 地图上绘制多边形时提醒用户。每当在现有多边形上绘制多边形时，用户应该得到警报。我有一个例子，但它适用于同一层上的多边形（Fiddle Example）。 My Code 在这里托管。请参考我需要的下图：

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>

【问题讨论】：

标签： javascript google-maps geojson

【解决方案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);
  }
});

proof of concept fiddle

代码 sn-p：

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>

【讨论】：