Leaflet 中只有 return 个选定的 GeoJSON 元素

Question

我有这段代码可以获取地图中的所有 OSM 小巷元素，并且有一个按钮可以打印使用 Overpass API 检索到的所有元素。

而不是检索所有元素，我希望我能够：

select 通过单击我想要的元素在我的地图上显示多个元素（selected 元素将用不同于蓝色的颜色标记）。
return 仅 selected 元素。

这是 javascript 代码：

        // 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);

这是 HTML:

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

感谢您的帮助！

Answer 1

您可以在每个功能上设置新的属性 selected true 和颜色，如下所示：

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"});

}

select 具有属性 selected:true 的功能，（没有尝试或测试它，所以可能有问题）

$.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()))
                }
            })

PS> 也不需要在这里使用 $.each ，只需使用普通的 for 循环

Leaflet 中只有 return 个选定的 GeoJSON 元素

Only return selected GeoJSON elements in Leaflet

geojson

leaflet

overpass-api