logo标签列表

仅在Leaflet中返回所选的GeoJSON元素

leafletgeojsonoverpass-api
4

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

相反，我想能够：

  1. 通过单击我想要的元素（选定的元素将用不同于蓝色的颜色标记）在地图上选择多个元素。
  2. 仅返回所选元素。

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

感谢你的帮助！
1个回答
3
每个功能上，您可以设置一个新的属性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"});

}

选择具有选定属性为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()))
                }
            })

另外，在这里不需要使用$.each，只需使用简单的for循环即可。

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接