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

<template>
  <div ref="mapPopupRef" class="popover">
    这是弹窗
  </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 } from 'ol/style'
import { Point } from 'ol/geom'
import Overlay from 'ol/Overlay'

import { MarkerIcon } from './markerEnum'
import { fromLonLat } from 'ol/proj'

export default {
  props: {
    list: {
      type: Array,
      required: true
    }
  },
  data() {
    return {
      currStationInfo: {}
    }
  },
  mounted() {
    this.map = this.$parent.getMapInstance()
    this.initLayer()
    this.initMarkers()

    this.initMapClick()
    this.initMapPopup()
  },
  methods: {
    initLayer() {
      this.markerLayer = new VectorLayer({
        source: new VectorSource({
          features: []
        }),
        properties: { name: 'eventMarker' }
      })
      this.map.addLayer(this.markerLayer)
      console.log('%c [  ]-46', 'font-size:13px; background:pink; color:#bf2c9f;', this.markerLayer)
    },

    // 初始化marker
    initMarkers() {
      const markerFeatures = []
      this.list.forEach(eventItem => {
        markerFeatures.push(this.getMarker(eventItem))
      })
      this.markerLayer.getSource().addFeatures(markerFeatures)
    },

    // 初始化地图点击事件
    initMapClick() {
      this.map.on('click', 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
        },
        positioning: 'top-center'
      })
      this.map.addOverlay(this.popupOverlay)
    },

    // 显示地图弹窗
    showMapPopup(stationInfo) {
      this.popupOverlay.setPosition(fromLonLat([stationInfo.lon, stationInfo.lat]))
      this.currStationInfo = stationInfo // 填充基本信息
    },

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

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

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

    // 获取marker样式
    getMarkerStyle(type) {
      const src = MarkerIcon[type]
      return new Style({
        image: new Icon({
          src,
          scale: 0.8
        })
      })
    },

    // 设置marker位置
    setMarkerPosition(markerId, position) {
      const overlay = this.map.getOverlayById(markerId)
      overlay.setPosition(position)
    }
  },
  watch: {
    list() {
      this.markerLayer.getSource().clear()
      console.log('%c [  ]-122', 'font-size:13px; background:pink; color:#bf2c9f;', this.map)
      this.initMarkers()
    }
  }
}
</script>
<style lang="less" scoped>
.popover {
  width: 200px;
  height: 300px;
  background-color: rgba(2, 26, 29, 0.9);
  box-shadow: 0 0 5px rgba(2, 26, 29, 0.9);
}
</style>