vue按钮控制leaflet地图的亮色及暗色
需求:点击切换主题,展示亮色、暗色按钮,点击按钮并相对应的展示地图的底色。
先初始化地图:
initMap() {
const dayImg = '亮色底图路径';
const darkImg = '暗色底图路径';
this.dayLayer = L.titleLayer(dayImg, {
attribution: '亮色'
})
this.darkLayer = L.titleLayer(darkImg, {
attribution: '暗色'
})
this.map = L.map('mapCon', {
layers: this.dayLayer, //默认底图
center: [], //中心点位置
zoom: 6, //默认层
minZoom: 6,
maxZoom: 15,
attributionControl: false,
doubleClickZoom: false
})
var baseMaps = {
'亮色': this.dayLayer,
'暗色': this.darkLayer
}
L.control.layers(baseMaps, null).addTo(this.map)
},
// 自己根据实际情况做个判断
this.map.removeLayer(this.dayLayer)
this.map.addLayer(this.darkLayer)

浙公网安备 33010602011771号