[英]Setting zoom level for layers in leaflet
從這里繼續查詢:
https://gis.stackexchange.com/questions/340223/leaflet-making-features-gone-when-zoom-out
我希望在縮小時完全消失一些圖層。
我試過這樣的:
map.on('zoomend', function (e) {
zoom_based_layerchange();
});
function clean_map() {
map.eachLayer(function (layer) {
if (layer instanceof L.GeoJSON)
{
map.removeLayer(layer);
}
//console.log(layer);
});
}
function zoom_based_layerchange() {
//console.log(map.getZoom());
var currentZoom = map.getZoom();
switch (currentZoom) {
case 8: //refers to the zoom level: 8
clean_map();
sitis.addTo(map); //show "sitis" geoJSON layer
break;
case 12:
//clean_map(); - removed, as I don't need to remove the layer visible at lower zoom level
church.addTo(map); //show "church" geoJSON layer
break;
default:
// do nothing
break;
} }
但不幸的是,這不是我正在尋找的東西,因為一旦一層消失,另一層就會進入。最終,根據此處的示例,當縮小到 1 級時,最頂層仍然可見:
http://jsfiddle.net/expedio/kuovyw8m/
因為我想讓圖層隨着縮小而消失,所以我嘗試了這樣的事情:
map.on('zoomend', function () {
if (map.getZoom() < 10 {
map.removeLayer(sitec);
}
if (map.getZoom() < 12 {
map.removeLayer(test);
}
else {
map.addLayerGroup([sitec,test]);
}
});
它不完全工作。 控制台 說:
Uncaught SyntaxError: Unexpected token '{' 這與此處的示例相矛盾:
https://gis.stackexchange.com/questions/258515/show-hide-markers-depending-on-zoom-level
在其他情況下,我有:
未捕獲的類型錯誤:sitec.removeFrom 不是 i 處的 function。 ((index):174) 在 i.fire (leaflet.js:5) 在 i._moveEnd (leaflet.js:5) 在 i. (傳單.js:5)
當輸入這樣的代碼時:
map.on('zoomend', function () {
var z = map.getZoom();
if (z > 12) {
return sitec.addTo(map);
}
if (z > 14) {
return test.addTo(map);
}
return sitec.removeFrom(map);
});
根據此處的示例:
https://gis.stackexchange.com/questions/182657/zoom-dependent-layers-in-leaflet
我嘗試的最后一件事是此處提供的插件:
https://github.com/auto-mat/leaflet-zoom-show-hide/blob/master/demo.html
我放的地方:
zsh = new ZoomShowHide();
zsh.addTo(map);
sitec.min_zoom = 9;
zsh.addLayer(sitec);
test.min_zoom = 11;
zsh.addLayer(test);
但仍然沒有結果。 控制台說:
未捕獲的類型錯誤:layer.addTo 不是 function -> 來自 Leaflet-zoom-hide 21 layer.addTo(this._layerGroup);
有誰知道如何處理它?
我的代碼在這里可用:
我找到了一種解決方案,我們可以用更短(雖然更實用)的方式來解釋:
根據下面的例子:
https://gis.stackexchange.com/questions/258515/show-hide-markers-depending-on-zoom-level
我們可以這樣做:
map.on('zoomend', function() {
if (map.getZoom() <6){
map.removeLayer(job);//1st geoJSON layer
}else{
map.addLayer(job);
}
if (map.getZoom() <7){
map.removeLayer(job2); //2nd geoJSON layer
}else{
map.addLayer(job2);
}
if (map.getZoom() <8){
map.removeLayer(job3); //3rd geoJSON layer
}else{
map.addLayer(job3);
}
});
這對我們來說更好,不像更短的...
map.on('zoomend', function() {
if (map.getZoom() <6){
map.removeLayer(job);//1st geoJSON layer
}
if (map.getZoom() <8){
map.removeLayer(job2);//2nd geoJSON layer
}
if (map.getZoom() <10){
map.removeLayer(job3);//3rd geoJSON layer
}
else {
map.addLayer(job);
map.addLayer(job2);
map.addLayer(job3);
} //all layers are to be switched on, when zoom level reach 10
});
當縮放級別達到 function 中給出的最大值時,可以將所有圖層切換回來。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.