Установка уровня масштабирования для слоев в листовке - PullRequest
Новая
       53

Установка уровня масштабирования для слоев в листовке

1 голос
/ 30 октября 2019

Продолжая запрос отсюда:

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

это не работает полностью. COnsole говорит:

Uncaught SyntaxError: Неожиданный токен '{', что противоречит приведенному здесь примеру:

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

в другом случае у меня есть:

Uncaught TypeError: sitec.removeFrom не является функцией в i. ((индекс): 174) на i.fire (leaflet.js: 5) на i._moveEnd (leaflet.js: 5) на 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-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);

, но все равно результат не получился. Консоль говорит:

uncaught TypeError: layer.addTo не является функцией -> из leaflet-zoom-hide 21 layer.addTo (this._layerGroup);

Кто-нибудь знает, как с этим бороться?

Мой код доступен здесь:

https://jsfiddle.net/Krukarius/Ln48wfrm/1/ enter image description here

1 Ответ

0 голосов
/ 30 октября 2019

Я нашел одно из решений, которое мы можем объяснить более коротким и длинным (хотя и более практичным) способом:

Согласно приведенному ниже примеру:

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

, который может переключать все слои обратно, когда уровень масштабирования достигаетмаксимальное значение, указанное в функции.

...