设置传单中图层的缩放级别 [英] Setting zoom level for layers in leaflet
问题描述
从此处继续查询:
https://gis.stackexchange.com/questions/340223 /leaflet-make-features-gone-when-zoom-out
缩小时,我希望某些图层完全消失.
I would like to have some layers completely gone when zooming 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级时,最顶层仍然保持可见:
but unfortunately it isn't a thing, which I am looking for, because once one layer disappear, another one is coming in. Eventually, the very top layer remain still visible when zooming out to level 1 as per the example here:
http://jsfiddle.net/expedio/kuovyw8m/
因为我想缩小图层,所以尝试了如下操作:
Because I would like to have layers gone as zoom out I tried sth like this:
map.on('zoomend', function () {
if (map.getZoom() < 10 {
map.removeLayer(sitec);
}
if (map.getZoom() < 12 {
map.removeLayer(test);
}
else {
map.addLayerGroup([sitec,test]);
}
});
它不能完全正常工作. COnsole说:
it doesn't work completely. COnsole says:
未捕获到的SyntaxError:意外令牌'{',与此处的示例矛盾:
Uncaught SyntaxError: Unexpected token '{' which is a contradiction to the example here:
https://gis.stackexchange.com/questions/258515 /show-hide-markers-取决于缩放级别
在其他情况下,我有:
未捕获的TypeError:sitec.removeFrom不是函数 在我((索引):174) 在i.fire(leaflet.js:5) 在i._moveEnd(leaflet.js:5) 在我(leaflet.js:5)
Uncaught TypeError: sitec.removeFrom is not a function at i. ((index):174) at i.fire (leaflet.js:5) at i._moveEnd (leaflet.js:5) at i. (leaflet.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 -传单中的图层
我最后尝试的是这里提供的插件:
Last thing which I tried was the plugin available here:
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);
但仍然令人失望.控制台显示:
but still wothiut result. The console says:
未捕获的TypeError:layer.addTo不是函数->来自 leaflet-zoom-hide隐藏21 layer.addTo(this._layerGroup);
uncaught TypeError: layer.addTo is not a function -> from leaflet-zoom-hide 21 layer.addTo(this._layerGroup);
有人知道如何处理吗?
我的代码在这里可用:
推荐答案
我找到了一种解决方案,我们可以用越来越长(虽然更实用)的方式进行解释:
I found one of the solution, that we can explain by shorter and longer (although more practical) way:
根据以下示例:
https://gis.stackexchange.com/questions/258515 /show-hide-markers-取决于缩放级别
我们可以这样做:
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);
}
});
对我们来说更好,而不是较短的...
which is better for us, unlike to shorter one...
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
});
当缩放级别达到该功能中给定的最大值时可以切换所有图层.
that can switch all layers back when zoom level reach max value given in the function.
这篇关于设置传单中图层的缩放级别的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!