1、在地图上打点,并定义 click 事件
export function createTrafficEventMarker(map, imgUrl, data, onclick) {
let position = wgs84togcj02(data.lon, data.lat);
let tmpMap = map
let lon = position[0]
let lat = position[1]
let tmpImgShow = imgUrl + 'event_up.png'
let eventMark = new AMap.Marker({
map: tmpMap,
position: [lon, lat],
anchor: 'center',
zooms: [1, 20],
extData: {
eventId: data.eventId
},
content: '<div style="display:flex;flex-direction: column;justify-content: center;align-items: center;">' +
'<div style="background: red;font-size: ' + fontSize.f14 + 'px;width: ' + fontSize.f100 + 'px;display:flex;justify-content: center;align-items: center;border-radius: ' + fontSize.f4 + 'px;">' +
'<div style="padding: ' + fontSize.f4 + 'px;">' + data.eventName + '</div>' +
'</div>' +
'<img style="width: ' + fontSize.f24 + 'px;height: ' + fontSize.f36 + 'px;" src=' + tmpImgShow + '>' +
'</div>',
})
eventMark["layerType"] = 'trafficEvent';
eventMark.on('click', () => {
map.setCenter([lon, lat])
onclick(eventMark)
})
return eventMark;
}
2、数据由websocket订阅,后台实时推送
initValidEventList() {
getValidEventList({regionId: this.$store.state.region.regionCode}).then(res => {
if (res.code === 0) {
if (res.data.length > 0) {
res.data.forEach(item => {
let eventMarker = createTrafficEventMarker(this.map, this.ImgUrl, item, onclick)
this.markerList.push(eventMarker)
})
}
}
})
window.onclick = (eventMarker) => {
if (eventMarker.layerType === 'trafficEvent') {
this.$store.state.curClickEventId = eventMarker.getExtData().eventId
this.eventDetailVisible = true
this.$refs.eventDetailRef.getEventDetail()
}
}
},
3、实时失效
curInvalidEvent(data) {
let len = data.eventIds.length
let markerListLen = this.markerList.length
let listDataLen = this.listData.length
if (len > 0 && this.markerList.length > 0) {
for (let i = 0; i < len; i++) {
for (let j = markerListLen - 1; j >= 0; j--) {
if (this.markerList[j].getExtData().eventId === data.eventIds[i]) {
this.map.remove(this.markerList[j])
this.markerList.splice(j, 1)
}
}
for (let k = 0; k < listDataLen; k++) {
if (this.listData[k].eventId === data.eventIds[i]) {
this.listData[k].eventState = 1
}
}
}
}
},