众所周知 leaflet切换控制图层的工具长这样,朴实无华。
我要实现的长这样
现在开始改造 上图的组件不再赘述 重点放到点击实现切换底图的功能
//通过dom原生提取
initMap(){
xxxx
....
let baseLayers = {
'矢量底图':'xxxxxxx',
'影像底图':'xxxxxx'
}
L.control.layers(baseLayers,null).addTo(this.mapObj.map);
for(let node of document.querySelectorAll('.leaflet-control-layers-base label')){
this.layers[node.innerText.trim()] = node.querySelector('input')
}
....
xxxx
}
//自定义的底图切换点击事件
//点击切换底图
//注意 value 要与 baseLayers 的键名对应
changeLayer(value){
this.layers[value].click()
},