AnalysisSystemForRadionuclide_vue/src/views/stationOperation/components/MapMarker.vue

<template>
  <div ref="mapPopupRef">
    这是弹窗
  </div>
</template>
<script>
import { Vector as VectorLayer } from 'ol/layer'
import VectorSource from 'ol/source/Vector'
import Feature from 'ol/Feature'
import { Fill, Icon, Stroke, Style, Text } from 'ol/style'
import { Point } from 'ol/geom'
import Overlay from 'ol/Overlay'

import MarkerImg from './markerImage'

export default {
  props: {
    list: {
      type: Array,
      required: true
    }
  },
  mounted() {
    this.map = this.$parent.getMapInstance()
    this.initMarkers()
    this.initMapClick()
    this.initMapPopup()
  },
  methods: {
    // 初始化marker
    initMarkers() {
      const markerFeatures = []
      this.list.forEach((eventItem, index) => {
        markerFeatures.push(this.getMarker(eventItem))
        markerFeatures.push(this.getCircle(eventItem))
      })
      const markerLayer = new VectorLayer({
        source: new VectorSource({
          features: markerFeatures
        }),
        properties: { name: 'eventMarker' }
      })
      this.map.addLayer(markerLayer)
    },

    // 初始化地图点击事件
    initMapClick() {
      this.map.on('click', async evt => {
        const feature = this.map.forEachFeatureAtPixel(evt.pixel, feature => {
          return feature
        })
        const stationInfo = feature && feature.values_ && feature.values_.stationInfo
        if (stationInfo) {
          this.showMapPopup(stationInfo)
        } else {
          this.closeMapPopup()
        }
      })
    },

    // 初始化地图弹窗
    initMapPopup() {
      this.popupOverlay = new Overlay({
        element: this.$refs.mapPopupRef,
        autoPan: true,
        autoPanAnimation: {
          duration: 250
        }
      })
      this.map.addOverlay(this.popupOverlay)
    },

    // 显示地图弹窗
    showMapPopup(stationInfo) {
      this.popupOverlay.setPosition([stationInfo.lon, stationInfo.lat])
      this.currMapClickEventItem = stationInfo // 填充基本信息
      if (!stationInfo.appEventDetailList) {
        this.isGettingPopupDetail = true
        stationInfo.appEventDetailList = stationInfo.appEventDetailList
        this.isGettingPopupDetail = false
      }
    },

    //关闭地图弹窗
    closeMapPopup() {
      this.popupOverlay.setPosition(null)
    },

    // 获取marker图标
    getMarker(stationInfo) {
      const { lon, lat } = stationInfo
      const markerFeature = new Feature({
        geometry: new Point([lon, lat]),
        stationInfo
      })

      markerFeature.setStyle(this.getMarkerStyle(stationInfo))
      return markerFeature
    },

    // 获取circle
    getCircle(stationInfo) {
      const { lon, lat } = stationInfo
      const markerFeature = new Feature({
        geometry: new Point([lon, lat]),
        stationInfo
      })

      markerFeature.setStyle(this.getMarkerStyle(stationInfo))
      return markerFeature
    },
    // 获取marker颜色
    getMarkerStyle() {
      const src = MarkerImg.NuclearFacility
      return new Style({
        image: new Icon({
          src,
          scale: 0.8
        })
      })
    }
  }
}
</script>
<style lang="less" scoped></style>