lg_frontend/components/Map.vue

<template>
  <div class="mars3dContainer" ref="mapRef" id="mars3dContainer"></div>
</template>

<script>
import { ms3dConfig } from '@/config/mapConfig'
const mapLayerTypeToPointIcon = {
  cems: require('@/assets/images/map/points/点位-CEMS.png'),
  sdjcy: require('@/assets/images/map/points/点位-深度检测仪.png'),
  zkz: require('@/assets/images/map/points/点位-质控站.png'),
  gbz: require('@/assets/images/map/points/点位-国标站.png'),
  ssc: require('@/assets/images/map/points/点位-洒水车.png'),
  shisc: require('@/assets/images/map/points/点位-湿扫车.png'),
  wz: require('@/assets/images/map/points/点位-微站.png'),
  jkd: require('@/assets/images/map/points/点位-监控点.png'),
}

export default {
  name: "Map",
  data () {
    return {
      layerMap: new Map()
    }
  },
  mounted() {
    this.$nextTick(() => {
      if (this.$refs.mapRef) {
        this.initMap()
      }
    })
  },
  methods: {
    //创建三维地球场景
    initMap () {
      this.map = new mars3d.Map(this.$refs.mapRef, ms3dConfig)
      this.map.on("load", () => {
        Object.keys(mapLayerTypeToPointIcon).forEach(layerType => {
          this.layerCreator(layerType) // 创建cems检测图层
        })

        this.addDataByLayerType('cems', [
          {
            longitude: 116.335987,
            latitude: 30.526361
          }
        ])
        window.test = this
      })

    },

    /**
     * 图层构造器
     * @param { 'cems' | 'sdjcy' | 'zkz' | 'gbz' | 'ssc' | 'shisc' | 'wz' | 'jkd' } layerType 图层名称
     */
    layerCreator (layerType) {
      if (!this.layerMap.has(layerType)) {
        const graphicLayer = new mars3d.layer.GraphicLayer({
          clustering: {
            enabled: true,
            pixelRange: 20,
            minimumClusterSize: 2,
            clampToGround: true,
            style: {

            }
          },
          allowDrillPick: true, // 如果存在坐标完全相同的图标点，可以打开该属性，click事件通过graphics判断
          flyTo: true
        })
        this.map.addLayer(graphicLayer)
        graphicLayer.on(mars3d.EventType.click, ({ graphic }) => {
          const position = graphic.positionShow
          this.map.flyToPoint(position, {
            radius: 5000, // 距离目标点的距离
            duration: 4,
            complete: function (e) {
              // 飞行完成回调方法
              // graphic.openPopup()
            }
          })
          this.$emit('pointClick', { layerType, data: graphic.attr })
        })
        this.layerMap.set(layerType, graphicLayer)
      }
    },

    /**
     * 根据图层类型添加点位数据
     * @param { 'cems' | 'sdjcy' | 'zkz' | 'gbz' | 'ssc' | 'shisc' | 'wz' | 'jkd' } layerType 图层名称
     * @param { Array<{ longitude: string | number, latitude: string | number, name: string }> }data
     */
    addDataByLayerType (layerType, data) {
      if (this.layerMap.has(layerType)) {
        const graphicLayer = this.layerMap.get(layerType)
        for (const datum of data) {
          const graphic = new mars3d.graphic.BillboardEntity({
            position: new mars3d.LngLatPoint( parseFloat(datum.longitude), parseFloat(datum.latitude), 1000),
            id: datum.primaryKey,
            style: {
              image: mapLayerTypeToPointIcon[layerType],
              scale: 1.0,
              horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
              verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
              clampToGround: true,
              width: 290 / 2,
              height: 426 / 2
            },
            attr: datum
          })
          if (datum.name) {
            graphic.bindTooltip(datum.name, {
              offsetY: -195,
              className: 'point-tooltip'
            })
          }

          graphicLayer.addGraphic(graphic) // 还可以另外一种写法: graphic.addTo(graphicLayer)
        }
      } else {
        this.layerCreator(layerType)
        this.addDataByLayerType(layerType, data)
      }
    },

    /**
     * 显示或隐藏图层
     * @param { 'cems' | 'sdjcy' | 'zkz' | 'gbz' | 'ssc' | 'shisc' | 'wz' | 'jkd' } layerType 图层名称
     * @param { boolean } show 显示/隐藏
     */
    setVisibility (layerType, show) {
      if (this.layerMap.has(layerType)) {
        const layer = this.layerMap.get(layerType)
        layer.show = show
      }
    }
  }
}
</script>

<style lang="less">
.point-tooltip {
  font-size: 35px;
  text-align: center;
}
</style>

<style scoped lang="less">
  .map-container {
    width: 100%;
    height: 100%;
    position: absolute;
    transform: translateX(-50%);
    left: 50%;
    top: 0;
    z-index: 1;
  }
</style>