个性化底图样式切换功能实现

应用场景介绍

在使用百度地图API进行地图开发时，开发者往往需要根据不同的业务场景定制地图的视觉效果，以满足不同用户的需求。百度地图提供了个性化底图样式功能，允许开发者通过自定义JSON样式文件来修改地图的视觉呈现。

代码基本功能介绍

本段代码实现了地图个性化底图样式的切换功能，用户可以通过点击按钮在白天模式和夜晚模式之间切换，从而改变地图的视觉效果。

功能实现步骤及关键代码分析

1. 加载必要的资源

await Promise.all([
  this.loadScripts([
    'https://api.map.baidu.com/api?type=subway&v=1.0&ak=cxtWZ9zGiLlLdQwBSuGGwpanwqfaLvEc&services=&t=20240319170303',
    'http://api.map.baidu.com/getscript?type=webgl&v=1.0&ak=cxtWZ9zGiLlLdQwBSuGGwpanwqfaLvEc&services=&t=20240319170303',
    'https://mapopen.bj.bcebos.com/github/BMapGLLib/InfoBox/src/InfoBox.js',
    'https://mapopen.bj.bcebos.com/github/BMapGLLib/RichMarker/src/RichMarker.min.js',
    'https://mapopen.bj.bcebos.com/github/BMapGLLib/DrawingManager/src/DrawingManager.min.js',
    'https://mapopen.cdn.bcebos.com/github/BMapGLLib/DistanceTool/src/DistanceTool.min.js',
    'https://bj.bcebos.com/v1/mapopen/api-demos/js/mapStyle.js',
  ]),
  this.loadStyles([
    'http://api.map.baidu.com/res/webgl/10/bmap.css',
    'http://mapopen.cdn.bcebos.com/github/BMapGLLib/DrawingManager/src/DrawingManager.min.css',
  ]),
])

首先加载必要的JavaScript和CSS资源，包括百度地图API、第三方库和自定义样式文件。

2. 初始化地图

const BMapGL = window.BMapGL

var map = new BMapGL.Map('container')
map.centerAndZoom(new BMapGL.Point(116.404, 39.915), 11)
map.enableScrollWheelZoom(true)
map.setMapStyleV2({ styleJson: styleJson1 })

使用BMapGL创建地图对象，设置地图中心点、缩放级别和启用鼠标滚轮缩放。并使用setMapStyleV2方法设置默认的白天模式样式。

3. 切换底图样式

function setCustomStyle(e) {
  if (e.className.indexOf('current') === -1) {
    var allLi = document.getElementsByClassName('btn')
    for (var i = 0; i < allLi.length; i++) {
      allLi[i].className = allLi[i].className.replace(' current', '').trim()
    }
    e.className += ' current'
    if (e.className.indexOf('light') !== -1) {
      map.setMapStyleV2({ styleJson: styleJson1 })
    } else {
      map.setMapStyleV2({ styleJson: styleJson2 })
    }
  }
}

定义setCustomStyle函数，当用户点击按钮时触发。该函数首先更新按钮的样式，然后根据按钮的类型切换地图样式。如果点击了“白天模式”按钮，则设置白天模式样式；如果点击了“夜晚模式”按钮，则设置夜晚模式样式。

总结与展望

通过这段代码，我们实现了地图个性化底图样式的切换功能。开发者可以根据实际需求自定义不同的底图样式，并通过按钮或其他交互方式在不同的样式之间切换，从而满足不同用户的视觉喜好。

未来，可以对该功能进行进一步拓展和优化，例如：

• 增加更多的底图样式选择
• 提供自定义样式编辑功能，允许开发者自由创建自己的样式
• 根据用户偏好或当前时间自动切换底图样式