当前位置: 首页 > 工具软件 > Minimap > 使用案例 >

Leaflet.MiniMap 切换地图

程招
2023-12-01

在项目中使用leaflet来实现地图的相关效果,其中就有容器地图(大地图)需要切换电子地图和卫星地图;

当然这部分最后是实现了,但是发现我们右下角使用leaflet.minimap实现的鹰眼地图(小地图)的底图瓦片没有跟地图的底图瓦片切换对应;如大小地图都是初始化加载电子地图,结果大地图切换成卫星地图的时候,小地图还是电子地图

到这里我们肯定是想把小地图也切换为跟大地图一样的底图瓦片,保持视图的统一;

这里使用changeLayer来实现改变底图瓦片图层的效果

// 初始鹰眼地图
var osm2 = new L.TileLayer(osmUrl, {minZoom: 0, maxZoom: 13});
var miniMap = new L.Control.MiniMap(osm2).addTo(map);
// 改变底图瓦片图层
var newLayer = new L.TileLayer(osmUrl, {minZoom: 0, maxZoom: 13});
miniMap.changeLayer(newLayer)

这里我们已经可以改变鹰眼地图的视图了,大小地图单独切换的时候都是没问题,但是当大小地图一起联动切换的时候,就出现问题了,解决方法就是底图图层对象不要共用,同一个底图瓦片我们需要申明两次分别用于大小地图的切换

// 大地图底图
let electronics = L.tileLayer(this.options.url,{
    maxZoom: 18,
    minZoom: 5,
})
// 小地图底图
let minElectronics = L.tileLayer(this.options.url,{
    maxZoom: 18,
    minZoom: 5,
});

leaflet.MiniMap插件地址 GitHub - Norkart/Leaflet-MiniMap: A minimap control plugin for Leaflet

 类似资料: