百度地图添加地区覆盖物和坐标点遇到的问题

1. 先添加地区覆盖物

setoverly() {
      const map = new window.BMap.Map('mapBox')
      var bd = new window.BMap.Boundary()
      bd.get('武清区', (rs) => {
        map .clearOverlays() //清除地图覆盖物,必须在添加区域的时候清
        const hole = new window.BMap.Polygon(rs.boundaries[0], {
          fillColor: '#3694FF',
          fillOpacity: 0.2,
          strokeColor: '#3694FF',
          strokeOpacity: 0.5,
          strokeStyle: 'dashed',
          strokeWeight: 2
        })
        map.addOverlay(hole)
        // 添加坐标点
        this.amap()
      })
    }

2. 之后再添加坐标点和lable

amap() {
      const self = this
      let icon
      const map = self.mapInstance // 实例
      if (this.processingStation.length !== 0) {
        this.processingStation.forEach((ele) => {
          let longitude = Number(ele.stationLocation.split(',')[0]) // 处理站经度
          let latitude = Number(ele.stationLocation.split(',')[1]) // 处理站纬度
          if (ele.stationTypeCode == 'zdgw') {
            if (ele.isRecovery === 0) {
              icon = new window.BMap.Icon(station1, new window.BMap.Size(26, 32))
            } else {
              if (ele.onlineState === 0) {
                icon = new window.BMap.Icon(station, new window.BMap.Size(26, 32))
              } else if (ele.onlineState === 1) {
                icon = new window.BMap.Icon(station0, new window.BMap.Size(26, 32))
              }
            }
          } else if (ele.stationTypeCode == 'jgw') {
            if (ele.isRecovery === 0) {
              icon = new window.BMap.Icon(guanwang1, new window.BMap.Size(26, 32))
            } else {
              if (ele.onlineState === 0) {
                icon = new window.BMap.Icon(guanwang, new window.BMap.Size(26, 32))
              } else if (ele.onlineState === 1) {
                icon = new window.BMap.Icon(guanwang0, new window.BMap.Size(26, 32))
              }
            }
          }
          let point = new window.BMap.Point(longitude, latitude)
          let stationMarker = new window.BMap.Marker(point, { icon: icon })
          // map.addOverlay(stationMarker)

          let labels = new window.BMap.Label(ele.name, {
            // 创建文本标注
            offset: new BMap.Size(30, 0), // 偏移量
            position: point // 设置标注的地理位置
          })
          labels.setStyle({
            border: '1px solid #ffcc00',
            borderRadius: '5px',
            padding: '4px 8px',
            color: '#ffcc00',
            fontSize: '12px',
            fontFamily: '微软雅黑'
          })
          stationMarker.setLabel(labels)
          map.addOverlay(stationMarker)
          // map.addOverlay(labels) // 将标注添加到地图中
          labels.hide()
          // 鼠标经过图层时的操作
          stationMarker.addEventListener('mouseover', function (e) {
            stationMarker.setTop(true) // 设置显示在最上面,防止多图层显示在相同位置时 无法知道时哪个图层
            // stationMarker.setIcon(highIcon) // 设置图层高亮显示
            if (stationMarker.getLabel()) {
              stationMarker.getLabel().show()
            }
          })
          // 鼠标离开图层时的操作
          stationMarker.addEventListener('mouseout', function (e) {
            stationMarker.setTop(false) // 设置显示在最上面,防止多图层显示在相同位置时 无法知道时哪个图层
            // marker.setIcon(myIcon) // 设置图层高亮恢复
            if (stationMarker.getLabel()) {
              stationMarker.getLabel().hide()
            }
          })
            // 监听层级
          map.addEventListener('zoomend', () => {
            if (map.getZoom() > 12) {
              if (stationMarker.getLabel()) {
                stationMarker.getLabel().show()
              }
            }
            if (map.getZoom() <= 12) {
              if (stationMarker.getLabel()) {
                stationMarker.getLabel().hide()
              }
            }
          })
          stationMarker.addEventListener('click', function () {
            console.log('点击标记点', ele.stationTypeCode)
            // 处理站详情接口
            wsStationDetail({ stationId: ele.stationId }).then((res) => {
              // console.log(res)
              self.$nextTick(() => {
                self.differentiateRtuStation = 1
                self.stationDetail = { ...res.data }
                self.typeLab = ele.stationTypeCode
                // console.log(self.stationDetail.configName)
                self.drawer = true
              })
            })
          })
        })
      }
    }

 这样可以解决清除地图上坐标点重新渲染时,地区区域闪烁问题。

解决方法:先设置区域覆盖物,在区域中清除所有的坐标点后再去重新渲染点,这样不会闪烁。

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值