关于leaflet maxNativeZoom不生效的问题

Nicander2024-03-20 18:04

有这样一种场景，比如我们项目中用到天地图的服务，天地图可获取到的最高层级是18级，而我们地图希望可以缩放到20级，这样在地图应用中，地图缩放到19到20级的时候，地图会显示空白。

我们希望19到20级的时候，地图仍然显示18级的影像，看官方API，tileLayer构造函数有这样的属性maxNativeZoom ,恰好能满足我们的问题；

当我们使用这样的代码，却发现依然不能生效：

javascript 复制代码

let map = $L.map('map', {
   maxZoom:22,
})
$L.tileLayer(layerItem.url,{
   maxNativeZoom:18,
})

想要让代码生效，需要同时设置tileLayer的maxNativeZoom和maxZoom属性，否则tileLayer的maxzoom会被设置默认的18。

像这样，代码就可以正常运行了：

javascript 复制代码

let map = $L.map('map', {
   maxZoom:22,
})
$L.tileLayer(layerItem.url,{
   maxNativeZoom:18,
   maxZoom: 22
})