大地图切换图层小地图随之切换
一、定义小地图源
const gaodeMini = L.tileLayer(
'http://webrd0{s}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}'
, { maxZoom: 13, subdomains: ['1', '2', '3', '4'] });
const gaodeYxMini = L.tileLayer('http://webst0{s}.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}'
, { maxZoom: 13, subdomains: ['1', '2', '3', '4'] });
const gaodeYxMarkMini = L.tileLayer('http://webst0{s}.is.autonavi.com/appmaptile?style=8&x={x}&y={y}&z={z}'
, { maxZoom: 13, subdomains: ['1', '2', '3', '4'] });
2二定义小地图图层组信息
const gaodeMiniGroup = L.layerGroup([gaodeMini]);
const gaodeYxMiniGroup = L.layerGroup([gaodeYxMini, gaodeYxMarkMini]);
const baseLayersCopy = {
'高德': gaodeMiniGroup,
'高德影像': gaodeYxMiniGroup,
}
三、调用事件方法对小地图图层切换
var miniMap = new MiniMap(gaodeMini, { toggleDisplay: true }).addTo(this.leafletMap);
this.leafletMap.on('baselayerchange', function (e) {
miniMap.changeLayer(baseLayersCopy[e.name]);
});
从node_modules\leaflet-minimap\example\example_layerchange.html
里面找到的解决方法，此方法在官方文档中有api，但是比较晦涩难懂，在SO论坛上有调用方法
然而真正的使用是在这里找到的，所以通过组件内部的示例，有时能快速简洁地解决方法
SO解决方法