0
我想排序標記添加到我的地圖，accordong地區（政府），我有他們作爲.zip shapefile，我能夠 - Using this - 獲取多邊形和使用彈出窗口和所有內容將它們添加到地圖中。我一直在做的是測試如果標記是在每個多邊形內，所以我可以過濾它們。所有的嘗試到現在爲止還沒有worked.this是完整的代碼得到一個多邊形內的點，並過濾它們
<!DOCTYPE html>
<html style="" lang="en"><head>
<style>
#map {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
\t
</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">
\t \t <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>
\t \t <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" />
\t \t <script src="/Scripts/shp.js"></script>
\t \t <script src="/Scripts/leaflet.shpfile.js"></script>
\t \t <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>
\t \t //creating layers
\t \t \t 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
\t \t \t 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';
\t \t \t // get the geoJson data from url
\t \t $.getJSON(dataurl, function (data) {
var st = JSON.stringify(data);
\t \t \t \t shpfile = new L.Shapefile('/resources/LBN_medium.zip',{
\t \t \t 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>"); }});
\t \t \t shpfile.addTo(map);
\t \t \t alert(shpfile);
\t \t // \t asd = shpfile.getLayer(20); //your feature id here
\t \t \t //alert(asd.feature.properties.NAME_1);
\t \t \t //call the function to create the cluster sending the json data as a string
Creation(st,shpfile);
});
function Creation(geo,shpfile) {
\t \t \t results = leafletPip.pointInLayer([33.9, 35.8], shpfile,true);
\t \t \t k = results.toString();
\t \t \t //alert(shpfile.feature.properties.NAME_1);
\t \t \t alert(typeof(results));
\t \t \t alert("Testing...");
\t \t \t //create the cluster object
\t \t \t var markers = L.layerGroup();//new L.markerClusterGroup();
\t \t \t var markers2 = new L.markerClusterGroup();
\t \t \t //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];
\t \t \t //create markers
var mymark = new L.marker([lat[0], lon[0]],{time: "2015-11-10 08:42:26+01"});
\t \t \t \t mymark.bindPopup("<b>Accident</b><br>this is marker number 1 with coordinates :["+lat[0]+","+lon[0]+"]").openPopup();
\t \t \t //add to the marker group
\t \t \t markers.addLayer(mymark);
for (var i = 1; i < len; i++) {
\t \t \t \t 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"});
\t \t \t \t \t
\t \t \t \t \t 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);
\t \t \t \t 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);
\t \t \t \t 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);
\t markers2.addLayer(layert);
\t markers2.addLayer(layerf); \t
\t markers2.addLayer(markers);
\t map.addLayer(markers2);
}
\t \t \t //baselayers for map
var baseLayers = {
"Grayscale": grayscale,
"Streets": streets
};
</script>
</body>
</html>注：一些評論僅供調試。如果你至少有一個想法如何啓動它是最受讚賞的，謝謝
是否必須在geojson？ –
是的。但是，一旦你有L.Marker，你可以調用函數GeoJSON（）來獲得GeoJSON表示。 – mattesCZ
鏈接已損壞。 –