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

<template>
  <div ref="mapContainerRef" class="map-container">
    <slot></slot>
  </div>
</template>
<script>
import { Vector as VectorLayer } from 'ol/layer'
import TileLayer from 'ol/layer/Tile'
import Map from 'ol/Map'
import VectorSource from 'ol/source/Vector'
import XYZ from 'ol/source/XYZ'
import View from 'ol/View'
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 Data from './data.json'
import * as MarkerImg from './markerImage'
console.log('%c [ MarkerImg ]-19', 'font-size:13px; background:pink; color:#bf2c9f;', MarkerImg)

const token = 'AAPK2b935e8bbf564ef581ca3c6fcaa5f2a71ZH84cPqqFvyz3KplFRHP8HyAwJJkh6cnpcQ-qkWh5aiyDQsGJbsXglGx0QM2cPm'
export default {
  data() {
    return {
      stationList: []
    }
  },
  mounted() {
    this.initMap()
    this.initMapClick()
    this.initMapPopup()
    this.getStationList()
  },
  methods: {
    // 获取站点列表
    getStationList() {
      this.stationList = Data.result
      console.log('%c [ this.stationList ]-36', 'font-size:13px; background:pink; color:#bf2c9f;', this.stationList)
      this.initMarkers()
    },

    // 初始化地图
    initMap() {
      const layers = [
        new TileLayer({
          source: new XYZ({
            url: `https://ibasemaps-api.arcgis.com/arcgis/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}?token=${token}`
          })
        })
      ]

      const view = new View({
        projection: 'EPSG:4326', // 使用这个坐标系
        center: [116.2, 39.56],
        zoom: 4,
        maxZoom: 16,
        minZoom: 1
      })

      this.map = new Map({
        target: this.$refs.mapContainerRef,
        layers,
        view,
        controls: []
      })
    },

    // 初始化marker
    initMarkers() {
      const markerFeatures = []
      this.stationList.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
        })
        this.currentCoords = feature.getGeometry().getCoordinates()
        const stationInfo = feature && feature.values_ && feature.values_.stationInfo
        if (stationInfo) {
          await 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)
    },

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

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

    // 获取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.Car
      return new Style({
        image: new Icon({
          src,
          scale: 0.8
        })
      })
    }
  }
}
</script>
<style lang="less" scoped>
.map-container {
  height: 100%;
}
</style>