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
})
})
})
})
}
}
这样可以解决清除地图上坐标点重新渲染时,地区区域闪烁问题。
解决方法:先设置区域覆盖物,在区域中清除所有的坐标点后再去重新渲染点,这样不会闪烁。