Leaflet 仅返回传单中选定的GeoJSON元素
我有这段代码，它可以在地图中获取所有OSM元素，并有一个按钮来打印使用OverpassAPI检索到的所有元素 取而代之的是检索所有元素，我希望我能够：Leaflet 仅返回传单中选定的GeoJSON元素,leaflet,geojson,overpass-api,Leaflet,Geojson,Overpass Api,我有这段代码，它可以在地图中获取所有OSM元素，并有一个按钮来打印使用OverpassAPI检索到的所有元素 取而代之的是检索所有元素，我希望我能够： 通过单击我想要的元素，在我的地图上选择多个元素（所选元素将标记为不同的颜色，然后是蓝色） 仅返回选定的元素 以下是javascript代码： // initializing map var map = new L.Map('map', { center: L.latLng(46.827, -
// initializing map
var map = new L.Map('map', {
center: L.latLng(46.827, -71.227),
zoom: 15,
zoomControl: false,
layers: L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png')
});
map.addControl(L.control.zoom({position:'topleft'}));
var geoLayer = L.geoJson().addTo(map);
//getting elements on map
$.ajax({
data: "data=[out:json];way[highway=service][service=alley](46.822161505913414,-71.23554468154907,46.83211547933473,-71.21927976608276);(._;>;);out;",
type: 'post',
dataType: 'json',
url: 'http://overpass-api.de/api/interpreter',
success: function(json) {
//loading warning...
$('#preloader').hide();
$('#preloader')
.ajaxStart(function(){
$(this).show();
}).ajaxStop(function(){
$(this).hide();
});
//putting elements on map
var geojson = osmtogeojson(json);
geoLayer = L.geoJson(geojson, {
onEachFeature: function (feature, layer) {
//bind click
layer.on({
click: null //add a property to Feature like "selected: true" if selected is false and vice versa??????
});
//change style
// ??? if selected is false, keep default brue for alleys, is selected true go with light green?
}
}).addTo(map);
}
});
// printing elements
function getAllElements() {
var allMarkersObjArray = [];//new Array();
var allMarkersGeoJsonArray = [];//new Array();
$.each(map._layers, function (ml) {
//console.log(map._layers)
if (map._layers[ml].feature) {
allMarkersObjArray.push(this)
allMarkersGeoJsonArray.push(JSON.stringify(this.toGeoJSON()))
}
})
console.log(allMarkersObjArray);
alert("total Markers : " + allMarkersGeoJsonArray.length + "\n\n" + allMarkersGeoJsonArray + "\n\n Also see your console for object view of this array" );
}
$(".get-elements").on("click", getAllElements);
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="//cdn.jsdelivr.net/leaflet/0.7.3/leaflet.css"/>
<style>
#map {
float:left;
width:900px;
height:600px;
}
</style>
</head>
<body>
<h4>Here are the alleys. Please select the alleys you really use and click send.</h4>
<div id="preloader">Chargement...</div>
<div id="map"></div>
<input class="get-elements" type="button" value="Send" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="//cdn.jsdelivr.net/leaflet/0.7.3/leaflet.js"></script>
<script src="/assets/javascripts/leaflet/osmtogeojson.js"></script>
<script>CODE HERE</script>
</body>
</html>
#地图{
浮动：左；
宽度：900px；
高度：600px；
}
这里是小巷。请选择您真正使用的巷道，然后单击“发送”。
收费。。。
代码在这里
谢谢你的帮助 在每个功能上，您可以按如下方式将新特性设置为选定的true和color：
layer.on('click', function (e) {
//Set feature selected, you can also use layer.feature.properties
e.target.feature.properties.selected = true;
//Set style, what ever style option you want
layer.setStyle({opacity:1,width:3, fillColor:"#0080FF"});
}
$.each(map._layers, function (ml) {
//console.log(map._layers)
if (map._layers[ml].feature && map._layers[ml].feature.properties.selected === true) {
allMarkersObjArray.push(this)
allMarkersGeoJsonArray.push(JSON.stringify(this.toGeoJSON()))
}
})