Javascript 使用JST和GeoJson文件检查多边形的重叠_Javascript_Google Maps_Geojson

Javascript 使用JST和GeoJson文件检查多边形的重叠

javascript google-maps

Javascript 使用JST和GeoJson文件检查多边形的重叠,javascript,google-maps,geojson,Javascript,Google Maps,Geojson,我试图提醒用户在谷歌地图上绘制多边形时使用geoJson预先渲染多边形。无论何时在现有多边形上绘制多边形，用户都应保持警惕。我有一个例子，但它适用于同一层上的多边形（）。在这里托管。请参阅我需要的下图： JS代码如下： var drawingManager; function initialize() { var map = new google.maps.Map(document.getElementById('map'), { zoom: 12, center

我试图提醒用户在谷歌地图上绘制多边形时使用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>


创建边界
#地图，
html，
身体{
填充：0；
保证金：0；
身高：100%；
}

一个选项是将GeoJSON中的多边形解析为“normal”

google.maps.Polygon

对象，然后将它们预加载到

所有覆盖的数组中：
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绘图管理器；
变量选择形状；
var all_覆盖=[]；
var gmarkers=Array（）；
var polygons=Array（）；
功能选择（形状）{
选举（）；
selectedShape=形状；
shape.setEditable（true）；
}
函数{
如果（selectedShape）{
selectedShape.setEditable（false）；
selectedShape=null；
}
}
函数初始化（）{
var map=new google.maps.map（document.getElementById（'map'）{
缩放：10，
中心：新google.maps.LatLng（33.619003，-83.867405），
mapTypeId:google.maps.mapTypeId.ROADMAP，
disableDefaultUI:true，
动物控制：正确
});
//缩放以显示所有特征
var bounds=new google.maps.LatLngBounds（）；
map.data.addListener（'addfeature'，函数（e）{
processPoints（例如，feature.getGeometry（），bounds.extend，bounds）；
映射边界（bounds）；
如果（例如feature.getGeometry（）.getType（）=“多边形”）{
//简化假设，取决于数据
//只需检查第一个线性环
var poly=new google.maps.Polygon({
路径：e.feature.getGeometry（）.getAt（0.getArray（），
填充颜色：“#0099FF”，
不透明度：0.7，
strokeColor:“#AA2143”，
冲程重量：2，
地图：地图
});
所有覆盖层。推（多边形）；
}
});
map.data.loadGeoJson（“https://raw.githubusercontent.com/datameet/Municipal_Spatial_Data/master/Delhi/Delhi_Wards.geojson");
map.data.setMap（空）；
var多选项={
填充颜色：“#0099FF”，
不透明度：0.7，
strokeColor:“#AA2143”，
冲程重量：2，
可编辑：真
};
//创建附着到地图的图形管理器，允许用户绘制多边形
drawingManager=新建google.maps.drawing.drawingManager({
drawingControlOptions：{
绘图模式：[
google.maps.drawing.overlytype.POLYGON
]
},
多基因选择：多基因选择，
地图：地图
});
google.maps.event.addListener（drawingManager，'OverlyComplete'，函数（e）{
煅烧炉段（如覆盖层、所有覆盖层）；
所有覆盖层。推送（e.覆盖层）；
});
}
功能分解炉部分（新覆盖层、允许覆盖层）{
//确保多边形包含足够的顶点
if（newOverlay.getPath（）.getLength（）<3）{
警告（“顶点不足。绘制一个至少包含3个顶点的多边形。”）；
返回；
}
var geometryFactory=new jsts.geom.geometryFactory（）；
var newPolygon=createJstsPolygon（geometryFactory，newOverlay）；
//迭代现有多边形并查找新多边形是否与其中任何多边形相交
var result=allOverlays.filter（函数（currentOverlay））{
var curPolygon=createJstsPolygon（geometryFactory，currentOverlay）；
var intersection=newPolygon.intersection（curPolygon）；
返回交叉点。isEmpty（）==false；
});
//如果新多边形与任何现有多边形相交，请使用绿色绘制它
如果（result.length>0）{
newOverlay.setOptions({
冲程重量：2.0，
填充颜色：“绿色”
});
}
}
函数createJstsPolygon（geometryFactory，叠加）{
var path=overlay.getPath（）；
变量坐标=path.getArray（）.map（函数名（coord）{
返回新的jsts.geom.Coordinate（coord.lat（），coord.lng（））；
});
坐标.push（坐标[0]）；
var shell=geometryFactory.createLinearRing（坐标）；
返回geometryFactory.createPolygon（shell）；
}
google.maps.event.addDomListener（窗口“加载”，初始化）；
函数processPoints（几何体、回调、thisArg）{
if（google.maps.LatLng的几何体实例）{
callback.call（thisArg，geometry）；
}else if（google.maps.Data.Point的几何体实例）{
callback.call（thisArg，geometry.get（））；
}否则{
geometry.getArray（）.forEach（函数（g）{
处理点（g、回调、thisArg）；
});
}
}
#地图，
html，
身体{
填充：0；
保证金：0；
身高：100%；
}