关于leaflet maxNativeZoom不生效的问题

305 阅读1分钟

有这样一种场景,比如我们项目中用到天地图的服务,天地图可获取到的最高层级是18级,而我们地图希望可以缩放到20级,这样在地图应用中,地图缩放到19到20级的时候,地图会显示空白。
我们希望19到20级的时候,地图仍然显示18级的影像,看官方API,tileLayer构造函数有这样的属性maxNativeZoom ,恰好能满足我们的问题;

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

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

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

像这样,代码就可以正常运行了:

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