Question

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

我已经使用（mapbox / leaflet）来做所有这些。

所以请帮我完成这件事。

    <!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>

谢谢，亚山

Answer 1

我在理解您的代码时遇到了一些困难 - 例如，如果您使用Leaflet，为什么会使用new google.maps.LatLng？

无论如何，听起来你想使用一个库在多边形测试中执行点。 Mapbox中有一个名为leaflet-pip的库，很可能会满足您的需求。您可以在此处找到示例：https://www.mapbox.com/mapbox.js/example/v1.0.0/point-in-polygon/

使用mapbox / leaflet查找位于多边形/边缘内的特定位置

1 个答案: