Question

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

取而代之的是检索所有元素，我希望能够：

通过点击我想要的那些选择我的地图上的多个元素（所选元素将标记为不同的颜色，然后是蓝色）。
仅返回所选元素。

以下是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

在每个功能上，您可以将新属性设置为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"});

}

选择具有所选属性的功能：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＆GT;也不需要在这里使用$ .each，只需使用plain for loop

仅返回Leaflet中选定的GeoJSON元素

1 个答案: