百度地图开发，自定义各省、市、区的边界样式

需求

        想要改变百度地图省市区的边界颜色，以及边界的宽度。

思路

1. 创建一个自定义覆盖物类：继承百度地图的BMapGL.Overlay类来创建自己的覆盖物。

2. 实现绘制方法：在这个类中实现draw方法，使用Canvas API来绘制河南省的边界。

3. 添加覆盖物到地图上：创建自定义覆盖物的实例，并将其添加到地图上。

实现

        以某个省为例，这里使用河南省，多个地区循环调用 boundary.get() 即可。

      var map = new BMapGL.Map('yzMap') // 创建Map实例
      map.centerAndZoom(new BMapGL.Point(113.3, 34.222956), 8) // 初始化地图,设置中心点坐标和地图级别
      map.enableScrollWheelZoom(true) // 开启鼠标滚轮缩放
      map.setMapType(BMAP_SATELLITE_MAP)

      // 自定义覆盖物类
      function BoundaryOverlay(boundaries, color) {
        this._boundaries = boundaries
        this._color = color
      }

      BoundaryOverlay.prototype = new BMapGL.Overlay()

      BoundaryOverlay.prototype.initialize = function(map) {
        this._map = map
        var canvas = document.createElement('canvas')
        var size = map.getSize()
        canvas.width = size.width
        canvas.height = size.height
        canvas.style.position = 'absolute'
        map.getPanes().labelPane.appendChild(canvas)
        this._canvas = canvas
        return canvas
      }

      // 解析边界字符串
      BoundaryOverlay.prototype.parseBoundary = function(boundaryString) {
        return boundaryString.split(';').map(function(point) {
          var coords = point.split(',')
          return { lng: parseFloat(coords[0]), lat: parseFloat(coords[1]) }
        })
      }

      BoundaryOverlay.prototype.draw = function() {
        var map = this._map
        var ctx = this._canvas.getContext('2d')
        ctx.clearRect(0, 0, this._canvas.width, this._canvas.height)

        this._boundaries.forEach(boundary => {
          var path = this.parseBoundary(boundary)
          ctx.beginPath()
          path.forEach((point, index) => {
            var pixel = map.pointToOverlayPixel(point)
            if (index === 0) {
              ctx.moveTo(pixel.x, pixel.y)
            } else {
              ctx.lineTo(pixel.x, pixel.y)
            }
          })
          ctx.closePath()
          ctx.strokeStyle = this._color
          ctx.lineWidth = 3 // 设置线宽
          ctx.stroke()
        })
      }

      // 获取河南省边界并添加自定义覆盖物
      var boundary = new BMapGL.Boundary()
      boundary.get('河南省', function(res) {
        var count = res.boundaries.length
        if (count === 0) {
          console.log('未能获取河南省边界')
          return
        }
        var boundaryOverlay = new BoundaryOverlay(res.boundaries, '#0067FF')
        map.addOverlay(boundaryOverlay)
      })

原始效果

修改之后