在 Angular 上以编程方式在 Leaflet 中的层之间切换

Question

我必须在 Angular 上显示不支持 Leaflet 中所有缩放级别的图层。这些是从外部服务器加载的 WMTS 图层。

参见下面的示例：

Zoom-Level 12

Zoom-Level 13

如何以编程方式切换到支持相应缩放层的层以保持使用流？并不是每个缩放级别都支持图层，用户很难清楚地理解。

使用的图层配置如下：

var baseMap = new L.TileLayer(
   'https://wmts.url.tld/{z}/{x}/{y}.png',
   {
      maxZoom: 15,
      attribution: '&copy; source',
});

Answer 1

侦听 zoomend 事件，如果缩放更大/更小，则添加/删除图层。

var MIN_LAYER_ZOOM_LEVEL = 14; // Zoom level until layer is visible

map.on('zoomend',(e)=>{
   var currentZoom = map.getZoom();
   if(currentZoom >= MIN_LAYER_ZOOM_LEVEL){
      baseMap.addTo(map)
   }else{
       baseMap.removeFrom(map) 
   }
});

在 Angular 上以编程方式在 Leaflet 中的层之间切换

Switching programmatically between layers in Leaflet on Angular

javascript

maps

leaflet

angular