[英]Toggle GeoJSON layers using an html button instead of links with Mapbox GL JS
我正在制作一張涉及打開和關閉兩個GeoJSON圖層的網絡地圖。 我以前使用Mapbox JS通過刪除圖層並在單擊時使用自定義HTML按鈕添加它們來完成此操作,但是在使用Mapbox GL JS完成此操作時遇到了問題。 我要做的就是使用HTML按鈕而不是添加到創建的CSS菜單的鏈接打開和關閉兩層(顯示和隱藏):
var layers = document.getElementById('menu');
layers.appendChild(link);
我想可以將功能綁定到button元素,但是無法使其正常工作:
document.getElementById("toggle-layer-one").onclick = function() {};
HTML:
<button data-balloon="Campsite" data-balloon-pos="right" id="toggle-layer-one"></button>
CSS
#toggle-layer-one {
background-image: url("../Assets/Campsite.svg");
background-size: 70px 70px;
height: 70px;
width: 70px;
border-top: 1px solid #fff;
}
JS
map.on('style.load', function () {
map.addSource("sample", {
type: "geojson",
data: "https://raw.githubusercontent.com/aarontaveras/Sample-GeoJSON-Data/master/sample.geojson"
});
map.addLayer({
"id": "sample-point-one",
"type": "symbol",
"source": "sample",
"filter": ["==", "$type", "Point"],
"layout": {
"icon-image": "circle-15",
"icon-size": 1,
"icon-anchor": "center",
}
});
map.setFilter('sample-point-one', ['==', 'region', 'Africa']);
map.addLayer({
"id": "sample-point-two",
"type": "symbol",
"source": "sample",
"filter": ["==", "$type", "Point"],
"layout": {
"icon-image": "circle-15",
"icon-size": 1,
"icon-anchor": "center",
}
});
map.setFilter('sample-point-two', ['==', 'region', 'Asia']);
});
// Toggle layers
var toggleableLayerIds = ["sample-point-one", "sample-point-two"];
for (var i = 0; i < toggleableLayerIds.length; i++) {
var id = toggleableLayerIds[i];
var link = document.createElement('a');
link.href = '#';
link.className = 'active';
link.textContent = id;
link.onclick = function (e) {
var clickedLayer = this.textContent;
e.preventDefault();
e.stopPropagation();
var visibility = map.getLayoutProperty(clickedLayer, 'visibility');
if (visibility === 'visible') {
map.setLayoutProperty(clickedLayer, 'visibility', 'none');
this.className = '';
} else {
this.className = 'active';
map.setLayoutProperty(clickedLayer, 'visibility', 'visible');
}
};
var layers = document.getElementById('menu');
layers.appendChild(link);
}
謝謝!
我最終搞清楚了。
HTML:
<a id="test" href="#">TEST</a>
JS:
var toggleLayerId = ["sample-point-one"];
document.getElementById("test").onclick = function (e){
for (var index in toggleLayerId) {
var clickedLayer = toggleLayerId[index];
e.preventDefault();
e.stopPropagation();
var visibility = map.getLayoutProperty(clickedLayer, 'visibility');
if (visibility === 'visible') {
map.setLayoutProperty(clickedLayer, 'visibility', 'none');
this.className = '';
} else {
this.className = 'active';
map.setLayoutProperty(clickedLayer, 'visibility', 'visible');
}
}
};
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.