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)
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· TypeScript + Deepseek 打造卜卦网站:技术与玄学的结合
· 阿里巴巴 QwQ-32B真的超越了 DeepSeek R-1吗?
· 【译】Visual Studio 中新的强大生产力特性
· 10年+ .NET Coder 心语 ── 封装的思维:从隐藏、稳定开始理解其本质意义
· 【设计模式】告别冗长if-else语句:使用策略模式优化代码结构