問題描述

我正在嘗試使用按鈕在我的 geojson 文件的地圖特定值 (data.geojson) 上顯示.(例如繪制只有值domaine"的地圖:violences")

I'm triying to display on my map specific value ( data.geojson) of my geojson file with buttons. (for exemple to plot a map with only value "domaine":"violences ")

我正在尋找一種方法，通過我的地圖上的按鈕來(lái)依賴我的數(shù)據(jù)(domaine":violences"或其他)?

I am loocking for a way to rely my data ("domaine":"violences" or other)with a buttons on my map ?

非常感謝您抽出寶貴時(shí)間.我的js:

Thanks so much in advance for your time. my js:

<script type="text/javascript">
var map = L.map('map');
var terrainTiles = L.tileLayer('http://stamen-tiles-{s}.a.ssl.fastly.net/toner-lite/{z}/{x}/{y}.{ext}', {
    attribution: 'Map tiles by <a >Stamen Design</a>, <a >CC BY 3.0</a> &mdash; Map data &copy; <a ,
    subdomains: 'abcd',
    minZoom: 0,
    maxZoom: 20,
    ext: 'png'
});



terrainTiles.addTo(map);
map.setView([46.5160000, 6.6328200], 10);




L.control.locate(location).addTo(map);

function addDataToMap(data, map) {
    var dataLayer = L.geoJson(data, {
        onEachFeature: function(feature, layer) {
            var popupText = "<b>" + feature.properties.nom
                + "<br>" 

                + "<small>"  + feature.properties.localite 
                + "<br>Rue: " + feature.properties.rue + + feature.properties.num
                + "<br>Téléphone: " + feature.properties.tel

                + "<br><a href= '" + feature.properties.url + "'>Internet</a>";
            layer.bindPopup(popupText); }
        });
    dataLayer.addTo(map);
}

$.getJSON("data.geojson", function(data) { addDataToMap(data, map); });

</script>
</body>
</html>

data.geojson

the data.geojson

{
"type": "FeatureCollection",
"features": [
{
"type": "Feature",
"geometry": {
   "type": "Point",
   "coordinates":  [ 6.1200622,46.2106091 ]
},
"properties": {
  "nom":"Centre d'entra?nement aux méthodes d'éducation active - Genève",
  "rue":"Route des Franchises",
  "num":"11",
  "npa":1203,
  "localite":"Genève",
  "canton":"GE",
  "tel":"022 940 17 57",
  "url":"www.formation-cemea.ch",
  "domaine":"formation   "
}
  },

  {
"type": "Feature",
"geometry": {
   "type": "Point",
   "coordinates":  [ 6.1243056,46.2120426 ]
  },
"properties": {
  "nom":"VIRES",
  "rue":"Rue Ernest-Pictet ",
  "num":"10",
  "npa":1203,
  "localite":"Genève",
  "canton":"GE",
  "tel":"022 328 44 33",
  "url":"www.vires.ch",
  "domaine":"violences   "
  }
}

推薦答案

至于打開/關(guān)閉你的類別，你可以使用 Leaflet Layers Control L.control.layers.

As for toggling ON / OFF your categories, you could use Leaflet Layers Control L.control.layers.

至于按類別(在您的情況下為域")對(duì)功能進(jìn)行分組，請(qǐng)參閱我在評(píng)論中鏈接的帖子:傳單:如何從單個(gè)集合中切換 GeoJSON 功能屬性?

As for grouping your features by category ("domaine" in your case), see the post I linked in my comment: Leaflet: How to toggle GeoJSON feature properties from a single collection?

您甚至可以通過直接使用圖層組來(lái)稍微簡(jiǎn)化它L.layerGroup 而不是使用中間數(shù)組.

You could even slightly simplify it by directly using Layer Groups L.layerGroup instead of using intermediate arrays.

var categories = {},
    category;

var layersControl = L.control.layers(null, null).addTo(map);

function addDataToMap(data, map) {
  L.geoJson(data, {
    onEachFeature: function(feature, layer) {
      category = feature.properties.domaine;
      // Initialize the category layer group if not already set.
      if (typeof categories[category] === "undefined") {
        categories[category] = L.layerGroup().addTo(map);
        layersControl.addOverlay(categories[category], category);
      }
      categories[category].addLayer(layer);
    }
  });
  //dataLayer.addTo(map); // no longer add the GeoJSON layer group to the map.
}

$.getJSON("data.geojson", function(data) {
  addDataToMap(data, map);
});

演示:https://plnkr.co/edit/H6E6q0vKwb3RPOZBWs27?p=preview

這篇關(guān)于傳單地圖，通過按鈕獲取geojson文件的具體數(shù)據(jù)的文章就介紹到這了，希望我們推薦的答案對(duì)大家有所幫助，也希望大家多多支持html5模板網(wǎng)！