小冊子地圖，獲取具有按鈕的geojson文件的具體數據

Question

我正在試圖在我的地圖上顯示具有按鈕的geojson文件的具體值（data.geojson）。 （例如，繪製一張只有值「domaine」的地圖：「暴力」）

我在爲我的數據（「domaine」：「暴力」或其他）依賴我的地圖上的按鈕的方式loocking？

非常感謝您的時間。 我的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 href="http://stamen.com">Stamen Design</a>, <a href="http://creativecommons.org/licenses/by/3.0">CC BY 3.0</a> &mdash; Map data &copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</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

{ 
"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 " 
    } 
} 

Answer 1

至於切換ON/OFF您的類別，你可以使用單張圖層控制L.control.layers。

至於按類別（你的情況「酒莊」）分組的功能，請參閱我在我的評論鏈接的帖子：Leaflet: How to toggle GeoJSON feature properties from a single collection?

你甚至可以稍微直接使用圖層組L.layerGroup，而不是使用中間把它簡化陣列。

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