保安员位置接口对接、生成图标点击弹窗展示

guanqb

2023-12-22 4c5ccd55411d61c379bc17abfde2699f50da20d3

保安员位置接口对接、生成图标点击弹窗展示

 src/api/livePersonLocation/livePersonLocation.js

New file
@@ -0,0 +1,11 @@
import request from '@/router/axios'

export const getlivePersonLocationList = (params) => {
    return request({
        url: '/api/livePersonLocation/getList',
        method: 'get',
        params: {
            ...params
        }
    })
}

 src/views/check/components/OlMapBox.vue

@@ -12,6 +12,15 @@
  <div class="w100 h100">
    <div id="OlMapBoxElement" class="w100 h100">
    </div>
        <div id="popup" class="ol-popup" v-show="isShowLivePersonInfoPopover">
            <a href="#" id="popup-closer" class="ol-popup-closer"></a>
            <div id="popup-content">
                <p>名称:{{ livePersonData.realName }}</p>
                <p>所属公司:{{ livePersonData.deptName }}</p>
                <p>派遣单位:{{ livePersonData.dispatchCompany }}</p>
                <p>更新时间:{{ livePersonData.recordTime }}</p>
            </div>
        </div>
  </div>
</template>

@@ -45,6 +54,7 @@
} from "ol/control.js"
import OlSourceOSM from "ol/source/OSM.js"
import OlLayerTile from "ol/layer/Tile.js"
import Overlay from "ol/Overlay.js"

import { Image as ImageLayer } from 'ol/layer'
import ImageStatic from 'ol/source/ImageStatic.js'
@@ -83,6 +93,9 @@
  yx: [],
  sl: []
}

let livePersonInfoPopover = null

let options,
  epsgcode,
  isMvt = false
@@ -106,6 +119,8 @@
  data () {
    return {
      publicPath: process.env.BASE_URL,
            livePersonData: {},
            isShowLivePersonInfoPopover: false
    }
  },

@@ -135,14 +150,6 @@
      })

      that.baseInitLayer(that.mapType)


      this.mapAddClusterLayer(
        'livePersonLocationLayer',
        '/public/img/map/location',
        [{lng: 113, lat: 24}, {lng: 115, lat:24 }],
        (e) => { },
      )
    })
  },

@@ -231,6 +238,7 @@
      return mercator
    },

        // 生成图标图层
    getCurItemFeature (params) {
      const iconFeature = new Feature({
        geometry: new Point([Number(params.lng), Number(params.lat)]),
@@ -277,11 +285,10 @@
      iconFeature.setStyle(new Style(styleOptions))

      iconFeature.on('click', (e) => {
        if (params.event) {
          params.event(e.target.values_.attributes.attr)
                if (params.event) {//icon事件参数
                    params.event(e.target.values_.attributes)//点击事件触发事件并传参
        }
      })

      return iconFeature
    },

@@ -393,14 +400,49 @@
          url: imgUrl,
          event: incident
        }))
                mapView.getView().animate({ // 只设置需要的属性即可
                    center: [item.lng, item.lat], // 中心点
                    zoom: 18, // 缩放级别
                    rotation: undefined, // 缩放完成view视图旋转弧度
                    duration: 1000 // 缩放持续时间，默认不需要设置
      })
            })

    },

        // 生成地图弹窗
        generateMapPopup (e) {
            const that = this
            this.livePersonData = e
            this.isShowLivePersonInfoPopover = true
            var container = document.getElementById('popup')
            var closer = document.getElementById('popup-closer')

            // 创建popup
            livePersonInfoPopover = new Overlay({
                element: container,
                autoPan: true,
                positioning: 'bottom-center',
                stopEvent: false,
                autoPanAnimation: {
                    duration: 250
                }
            })
            mapView.addOverlay(livePersonInfoPopover)
            closer.onclick = function () {
                livePersonInfoPopover.setPosition(undefined)
                closer.blur()
                return false
            }
            livePersonInfoPopover.setPosition([e.lng, e.lat])
  },


    }
}
</script>

<style lang='scss' scope>

.w100 {
  width: 100%;
}
@@ -408,4 +450,54 @@
.h100 {
  height: 100%;
}

.ol-popup {
    position: absolute;
    background-color: white;
    -webkit-filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.2));
    filter: drop-shadow(0 1px 4px #FFC125);
    padding: 15px;
    border-radius: 10px;
    border: 1px solid #cccccc;
    bottom: 130px;
    left: -114px;
    min-width: 300px;
}

.ol-popup:after,
.ol-popup:before {
    top: 100%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
}

.ol-popup:after {
    border-top-color: white;
    border-width: 10px;
    left: 48px;
    margin-left: -10px;
}

.ol-popup:before {
    border-top-color: #cccccc;
    border-width: 11px;
    left: 48px;
    margin-left: -11px;
}

.ol-popup-closer {
    text-decoration: none;
    position: absolute;
    top: 2px;
    right: 8px;
    color: red;
}

.ol-popup-closer:after {
    content: "✖";
}
</style>

 src/views/check/livePersonLocation.vue

@@ -1,19 +1,68 @@

<template>
  <div style="width: 100%; height: 100%;">
    <OlMapBox></OlMapBox>

        <OlMapBox ref="olmapboxelement"></OlMapBox>
  </div>
</template>

<script>
import  OlMapBox  from "./components/OlMapBox.vue";
import OlMapBox from "./components/OlMapBox.vue"
import { getlivePersonLocationList } from "@/api/livePersonLocation/livePersonLocation"

// 获取实时保安位置定时器
let liveBATimer

export default {
  name: "livePersonLocation",
  components: {OlMapBox}
    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
                })
                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>
<style scoped></style>