|
<template>
|
<div style="width: 100%; height: 100%;">
|
<OlMapBox ref="olmapboxelement" @getlivePersonLocationList="getlivePersonLocationList"></OlMapBox>
|
</div>
|
</template>
|
|
<script>
|
import OlMapBox from "./components/OlMapBox.vue"
|
import { getlivePersonLocationList } from "@/api/livePersonLocation/livePersonLocation"
|
|
// 获取实时保安位置定时器
|
let liveBATimer
|
|
export default {
|
name: "livePersonLocation",
|
components: { OlMapBox },
|
|
data () {
|
return {
|
// publicPath: process.env.BASE_URL,
|
livePersonLocationList: []
|
}
|
},
|
|
created () {
|
// 首先执行一次,必须等地图渲染完成再去创建图标图层！
|
this.$nextTick(() => {
|
this.getlivePersonLocationList()
|
})
|
liveBATimer = setInterval(() => {
|
this.getlivePersonLocationList()
|
}, 60000)//一分钟执行一次
|
},
|
|
methods: {
|
// 获取保安列表实时位置数据
|
getlivePersonLocationList () {
|
if (this.$refs.olmapboxelement) {//不清除就不新增
|
this.$refs.olmapboxelement.mapRemoveLayer(['livePersonLocationLayer'])
|
}
|
getlivePersonLocationList().then(res => {
|
this.livePersonLocationList = res.data.data
|
res.data.data.forEach(item => {
|
item.lng = item.longitude
|
item.lat = item.latitude
|
item.text = item.realName
|
})
|
this.$refs.olmapboxelement.mapAddClusterLayer('livePersonLocationLayer', 'img/map/security.png', res.data.data, this.livePersonIconClick)
|
})
|
},
|
|
// 保安实时图标点击事件
|
livePersonIconClick (e) {
|
this.$refs.olmapboxelement.generateMapPopup(e)
|
}
|
},
|
|
destroyed () {
|
// 清除保安图标图层
|
if (this.$refs.olmapboxelement) {//不清除就不新增
|
this.$refs.olmapboxelement.mapRemoveLayer(['livePersonLocationLayer'])
|
}
|
liveBATimer && clearInterval(liveBATimer)
|
}
|
}
|
</script>
|
|
<style scoped></style>
|
