Возвращать только выбранные элементы GeoJSON в Листовке

У меня есть этот код, который содержит все элементы переустановки OSM на карте и имеет кнопку для печати всех элементов, полученных с помощью API Overpass.Возвращать только выбранные элементы GeoJSON в Листовке

Вместо извлечения всех элементов, я хотел бы мне возможность:

выбрать несколько элементов на моей карте, нажав на те, которые я хочу (выбранные элементы будут выделены другим цветом, то синим цветом).
возвращает только выбранные элементы.

Вот 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>

Спасибо за вашу помощь!

источник

2015-06-14 leontalbot

На каждой функцию вы можете установить новое свойство, выбранное верно и цвет следующим образом:

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

PS> Также нет необходимости использовать $ .each здесь, просто используйте обычный цикл

источник

2015-06-15 10:47:34 SSA

Спасибо! просто сделал редактирование, чтобы заставить его работать. :-) – leontalbot

Возвращать только выбранные элементы GeoJSON в Листовке

ответ

Смежные вопросы