問題描述

從這里繼續(xù)查詢:

我找到了一個解決方案，我們可以用更短和更長(雖然更實用)的方式來解釋:

根據(jù)下面的例子:

https://gis.stackexchange.com/questions/258515/show-hide-markers-depending-on-zoom-level

我們可以這樣做:

 map.on('zoomend', function() {if (map.getZoom() <6){map.removeLayer(job);//第一個 geoJSON 層}別的{map.addLayer(工作);}if (map.getZoom() <7){map.removeLayer(job2);//第二個geoJSON層}別的{map.addLayer(job2);}if (map.getZoom() <8){map.removeLayer(job3);//第三個geoJSON層}別的{map.addLayer(job3);}});

這對我們來說更好，不像較短的......

 map.on('zoomend', function() {if (map.getZoom() <6){map.removeLayer(job);//第一個 geoJSON 層}if (map.getZoom() <8){map.removeLayer(job2);//第二個geoJSON層}if (map.getZoom() <10){map.removeLayer(job3);//第三個geoJSON層}別的 {map.addLayer(工作);map.addLayer(job2);map.addLayer(job3);}//所有圖層都被打開，當(dāng)縮放級別達到10});

當(dāng)縮放級別達到函數(shù)中給定的最大值時，可以將所有圖層切換回來.

Continuing the query from here:

https://gis.stackexchange.com/questions/340223/leaflet-making-features-gone-when-zoom-out

I would like to have some layers completely gone when zooming out.

I tried sth like this:

 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;

} }

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]);
    }
});

it doesn't work completely. COnsole says:

Uncaught SyntaxError: Unexpected token '{' which is a contradiction to the example here:

https://gis.stackexchange.com/questions/258515/show-hide-markers-depending-on-zoom-level

in other case I have:

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)

when type code like this:

 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);
 });

as per the example here:

https://gis.stackexchange.com/questions/182657/zoom-dependent-layers-in-leaflet

Last thing which I tried was the plugin available here:

https://github.com/auto-mat/leaflet-zoom-show-hide/blob/master/demo.html

Where I put:

    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:

uncaught TypeError: layer.addTo is not a function -> from leaflet-zoom-hide 21 layer.addTo(this._layerGroup);

Does anyone know how to deal with it?

My code is available here:

I found one of the solution, that we can explain by shorter and longer (although more practical) way:

According to the example below:

https://gis.stackexchange.com/questions/258515/show-hide-markers-depending-on-zoom-level

We can do sth like this:

  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.

這篇關(guān)于在傳單中設(shè)置圖層的縮放級別的文章就介紹到這了，希望我們推薦的答案對大家有所幫助，也希望大家多多支持html5模板網(wǎng)！