Javascript 使用mapbox/leaftlet查找多边形/边内部的特定位置_Javascript_Leaflet_Mapbox

Javascript 使用mapbox/leaftlet查找多边形/边内部的特定位置

javascript leaflet mapbox

Javascript 使用mapbox/leaftlet查找多边形/边内部的特定位置,javascript,leaflet,mapbox,Javascript,Leaflet,Mapbox,我已经完成了下面的代码来创建一个图层，然后找到了显示在side div中的坐标。但当我点击按钮时，我需要检查点（6,79）是位于多边形内部还是位于多边形的边缘我用（地图盒/传单）做了所有这些所以请帮我完成这件事 <!DOCTYPE html> <html> <head> <meta charset=utf-8 /> <title>Show drawn polygon area</title> <meta

我已经完成了下面的代码来创建一个图层，然后找到了显示在side div中的坐标。但当我点击按钮时，我需要检查点（6,79）是位于多边形内部还是位于多边形的边缘

我用（地图盒/传单）做了所有这些

所以请帮我完成这件事

    <!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Show drawn polygon area</title>
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
<script src='https://api.tiles.mapbox.com/mapbox.js/v2.1.4/mapbox.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox.js/v2.1.4/mapbox.css' rel='stylesheet' />
<style>
  body { margin:0; padding:0; }
  #map { position:absolute; top:0; bottom:0; width:75%; height: 75%; border: 1px solid black;}
  #details { width:200px ; height: 200px; border: 1px solid black; float:right;}
  #details2 { width:80px ; height: 200px; border: 1px solid black; float:right}
</style>
</head>
<body onload="load();">
<link href='https://api.tiles.mapbox.com/mapbox.js/plugins/leaflet-draw/v0.2.2/leaflet.draw.css' rel='stylesheet' />
<script src='https://api.tiles.mapbox.com/mapbox.js/plugins/leaflet-draw/v0.2.2/leaflet.draw.js'></script>
<script src='https://api.tiles.mapbox.com/mapbox.js/plugins/leaflet-geodesy/v0.1.0/leaflet-geodesy.js'></script>
<script src='https://code.jquery.com/jquery-1.11.0.min.js'></script>
<script src='https://api.tiles.mapbox.com/mapbox.js/plugins/leaflet-pip/v0.0.2/leaflet-pip.js'></script>
<div id='map'></div>
<script>
L.mapbox.accessToken = 'pk.eyJ1IjoiYXNoYW4iLCJhIjoiQzQySHN1QSJ9.K4xoMZqrVsWBgYTp70CYNg';
var map = L.mapbox.map('map', 'examples.map-i86l3621')//examples.map-i86nkdio')
    .setView([6.9344,79.8428], 10); 
var featureGroup = L.featureGroup().addTo(map);
var drawControl = new L.Control.Draw({
  edit: {
    featureGroup: featureGroup
  },
  draw: {
    polygon: true,
    polyline: true,
    rectangle: true,
    circle: true,
    marker: true
  }
}).addTo(map);
map.on('draw:created', showPolygonArea);
map.on('draw:edited', showPolygonAreaEdited);
function showPolygonAreaEdited(e) {
  e.layers.eachLayer(function(layer) {
    showPolygonArea({ layer: layer });
  });
}
function showPolygonArea(e) {
  featureGroup.clearLayers();
  featureGroup.addLayer(e.layer);
  e.layer.bindPopup((LGeo.area(e.layer) / 1000000).toFixed(2) + ' km<sup>2</sup>');
  e.layer.openPopup();
}
var drawnItems = new L.featureGroup();
map.addLayer(drawnItems);
map.on('draw:created', function (e) {
    var type = e.layerType,
        layer = e.layer;
    drawnItems.addLayer(layer);
    var shapes = getShapes(drawnItems);
    document.getElementById('details').innerHTML = shapes ;
});
var getShapes = function(drawnItems) {
    var shapes = [];
    drawnItems.eachLayer(function(layer) {
        if (layer instanceof L.Polyline) {
            shapes.push(layer.getLatLngs())
        }
        if (layer instanceof L.Circle) {
            shapes.push([layer.getLatLng()])
        }
        if (layer instanceof L.Marker) {
            shapes.push([layer.getLatLng()]);
        }
    });
   return shapes;
};
function checkfunction(e) {
    shapes = getShapes(drawnItems);
    var bounds= drawnItems.getBounds();         
    for (var i = 0; i < latlong.length; i++){
        var hello =new google.maps.LatLng(6.9344, 79.8428);
        if(bounds.contains(hello)) {
                alert("Red");
            } else {
              alert("Green");
            }
    }
}
</script>
<div id="details" >
</div>
<div id="details2" >
    <input type="button" value="Check" id="check" onclick="checkfunction();" />
</div>
</body>
</html>


显示绘制的多边形区域
正文{margin:0；padding:0；}
#贴图{位置：绝对；顶部：0；底部：0；宽度：75%；高度：75%；边框：1px纯黑色；}
#详细信息{宽度：200px；高度：200px；边框：1px纯黑色；浮动：右侧；}
#details2{宽度：80px；高度：200px；边框：1px纯黑色；浮动：右侧}
L.mapbox.accessToken='pk.eyJ1IjoiYXNoYW4iLCJhIjoiQzQySHN1QSJ9.K4xoMZqrVsWBgYTp70CYNg'；
var map=L.mapbox.map（'map'，'examples.map-i86l3621'）//examples.map-i86nkdio'）
.setView（[6.9344,79.8428]，10）；
var featureGroup=L.featureGroup（）.addTo（映射）；
var drawControl=新的L.Control.Draw({
编辑：{
功能组：功能组
},
抽签：{
多边形：是的，
多段线：对，
矩形：对，
圆圈：是的，
马克：对
}
}).addTo（地图）；
地图（'draw:created'，showPolygorea）；
地图上（'绘制：已编辑'，已编辑）；
功能显示（e）{
e、 层。每个层（函数（层）{
showPolygorea（{layer:layer}）；
});
}
功能区（e）{
featureGroup.clearLayers（）；
特性组。添加层（e层）；
e、 图层（LGeo.面积（e.图层）/1000000.toFixed（2）+“km2”）；
e、 layer.openPopup（）；
}
var drawnItems=新的L.featureGroup（）；
map.addLayer（drawnItems）；
地图上（'draw:created'，函数（e）{
变量类型=e.layerType，
层=e层；
drawnItems.addLayer（层）；
var shapes=getShapes（drawnItems）；
document.getElementById（'details'）.innerHTML=shapes；
});
var getShapes=函数（drawnItems）{
变量形状=[]；
drawnItems.eachLayer（函数（层）{
if（L.多段线的图层实例）{
shapes.push（layer.getLatLngs（））
}
if（L.Circle的图层实例）{
shapes.push（[layer.getLatLng（）]））
}
if（L.Marker的图层实例）{
shapes.push（[layer.getLatLng（）]）；
}
});
返回形状；
};
功能检查功能（e）{
shapes=getShapes（drawnItems）；
var bounds=drawnItems.getBounds（）；
对于（变量i=0；i


谢谢，
Ashan.
我在理解你的代码时有点困难-例如，如果你在使用传单，为什么它会使用新的google.maps.LatLng

无论如何，听起来好像您想要使用库来执行多边形中的点测试。有一个名为from Mapbox的库，它很可能满足您的需要。你可以在这里找到一个例子：

确保你的问题清楚，这将得到更多的关注和更快的回答。请遵循发帖指南。亲爱的Liedman，Check函数用于尝试我所知道的内容。所以这可能是错误的。我已经尝试了上面的链接。但我无法检查多边形内部的点。如果问题不清楚，我将按如下方式指出我想创建一个多边形将多边形的坐标保存到数据库中。-使用两个文本框（纬度、经度），我需要检查点坐标（例如：6.9344、79.8428）是否位于多边形内部。希望这一点现在清楚了。非常感谢，先生。