[英]leaflet map, getting specific data of geojson file with button
我試圖用按鈕在我的地圖上顯示我的geojson文件的特定值(data.geojson)。 (例如,僅繪制值“ domaine”:“ violences”的地圖)
我是否想通過地圖上的按鈕來依賴我的數據(“ domaine”:“ violences”或其他)?
非常感謝您抽出寶貴的時間。 我的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> — Map data © <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 "
}
}
至於切換類別,您可以使用Leaflet Layers Control L.control.layers
。
至於按類別(在您的情況下為“域”) 對要素進行分組,請參閱我在評論中鏈接的文章: 傳單:如何從單個集合切換GeoJSON要素屬性?
您甚至可以通過直接使用Layer Groups 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
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.