我正在尝试对添加到我的地图中的标记进行排序，根据区域（政府），我将它们作为.zip shapefile，我能够 - Using this - 获取多边形并将它们添加到地图中弹出窗口和一切。我一直在做的是测试标记是否在每个多边形内部，以便我可以在以后过滤它们。所有尝试到现在都没有工作。这是完整的代码
<!DOCTYPE html>
<html style="" lang="en"><head>
<style>
#map {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
</style>
<meta charset="utf-8">
<title>LSAAEQ - Accidents Map</title>
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.2/leaflet.css" />
<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" type="text/css">
<script src="http://cdn.leafletjs.com/leaflet-0.7.2/leaflet.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script src="/Scripts/leaflet.markercluster-src.js"></script>
<link rel="stylesheet" href="/Scripts/MarkerCluster.Default.css" />
<script src="/Scripts/shp.js"></script>
<script src="/Scripts/leaflet.shpfile.js"></script>
<script src='https://api.mapbox.com/mapbox.js/plugins/leaflet-pip/v0.0.2/leaflet-pip.js'></script>
</head>
<body>
<p hidden id = "p1"></p>
<div id="map" style="height:400px; width:1000px; padding-top:100px;"></div>
<script>
//creating layers
lkj = 0;
var cities = new L.LayerGroup();
var mbAttr = 'Map data © <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, ' +
'<a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' +
'Imagery © <a href="http://mapbox.com">Mapbox</a>',
mbUrl = 'https://{s}.tiles.mapbox.com/v3/{id}/{z}/{x}/{y}.png';
var grayscale = L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token={accessToken}', {id: 'remote-sensing.n8k508ak', attribution: mbAttr, accessToken: 'pk.eyJ1IjoicmVtb3RlLXNlbnNpbmciLCJhIjoiYWNiYzg0ZWU2Mjk3ZTU5NjE4MmQyZWEzZTY2ZWNlYjIifQ.U7mp4MXdcjaIwW_syAqriQ'})
, streets = L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token={accessToken}', {id: 'remote-sensing.84f6c85a', attribution: mbAttr, accessToken: 'pk.eyJ1IjoicmVtb3RlLXNlbnNpbmciLCJhIjoiYWNiYzg0ZWU2Mjk3ZTU5NjE4MmQyZWEzZTY2ZWNlYjIifQ.U7mp4MXdcjaIwW_syAqriQ'});
//create and add the layers to the map
var map = L.map('map', {
center: [33.9, 35.877],
zoom: 10,
layers: [streets, cities]
});
//the directory to the geojson data
var dataurl = '/reporting/data.geojson';
// get the geoJson data from url
$.getJSON(dataurl, function (data) {
var st = JSON.stringify(data);
shpfile = new L.Shapefile('/resources/LBN_medium.zip',{
onEachFeature:function(feature, layer) { layer.bindPopup("<span> "+feature.properties.NAME_1+"</span><br /><span> "+feature.properties.NAME_2+"</span><br /><span> "+feature.properties.VARNAME_3+"</span>"); }});
shpfile.addTo(map);
alert(shpfile);
// asd = shpfile.getLayer(20); //your feature id here
//alert(asd.feature.properties.NAME_1);
//call the function to create the cluster sending the json data as a string
Creation(st,shpfile);
});
function Creation(geo,shpfile) {
results = leafletPip.pointInLayer([33.9, 35.8], shpfile,true);
k = results.toString();
//alert(shpfile.feature.properties.NAME_1);
alert(typeof(results));
alert("Testing...");
//create the cluster object
var markers = L.layerGroup();//new L.markerClusterGroup();
var markers2 = new L.markerClusterGroup();
//operations to get coordinates
var lat = [];
var lon = [];
var coorM = geo.match(/\d{2}\.\d+\D\d{2}\.\d+/g);
var len = coorM.length;
var coorA = coorM[0].split(",");
lon[0] = coorA[0];
lat[0] = coorA[1];
//create markers
var mymark = new L.marker([lat[0], lon[0]],{time: "2015-11-10 08:42:26+01"});
mymark.bindPopup("<b>Accident</b><br>this is marker number 1 with coordinates :["+lat[0]+","+lon[0]+"]").openPopup();
//add to the marker group
markers.addLayer(mymark);
for (var i = 1; i < len; i++) {
coorA = coorM[i].split(",");
lon[i] = coorA[0];
lat[i] = coorA[1];
mymark = new L.marker([lat[i], lon[i]],{time: "2015-10-1 08:42:26+01"});
mymark.bindPopup("<b>Accident</b><br>this is marker number "+(i+1)+ " with coordinates :["+lat[i]+","+lon[i]+"]").openPopup();
markers.addLayer(mymark);
}
// map.addLayer(markers);
layerf = L.featureGroup();
var mymark = new L.marker([33.68,35.12],{time: "2015-11-10 08:42:26+01"});
layerf.addLayer(mymark);
var mymark = new L.marker([35.68,35.53],{time: "2015-11-10 08:42:26+01"});
layerf.addLayer(mymark);
var mymark = new L.marker([33.9,35.8],{time: "2015-11-10 08:42:26+01"});
layerf.addLayer(mymark);
layert = L.featureGroup();
var mymark = new L.marker([33.23,35.753],{time: "2015-11-10 08:42:26+01"});
layert.addLayer(mymark);
var mymark = new L.marker([34.36,35.3575],{time: "2015-11-10 08:42:26+01"});
layert.addLayer(mymark);
var mymark = new L.marker([33.753,35.29],{time: "2015-11-10 08:42:26+01"});
layert.addLayer(mymark);
markers2.addLayer(layert);
markers2.addLayer(layerf);
markers2.addLayer(markers);
map.addLayer(markers2);
}
//baselayers for map
var baseLayers = {
"Grayscale": grayscale,
"Streets": streets
};
</script>
</body>
</html>
注意：一些注释仅用于调试。如果你至少知道如何开始它，非常感谢，谢谢
答案 0 :(得分：1)
您可以使用turf.js turf.inside(point, polygon)函数http://turfjs.org/docs/#inside来测试该点是否在多边形内。