增加撒点功能，支持点位点击和提示信息，聚合点位需要图标

components/Map.vue

@@ -4,8 +4,24 @@
 
 <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) {
@@ -17,11 +33,118 @@ export default {
     //创建三维地球场景
     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%;

config/mapConfig.js

@@ -5,7 +5,7 @@ export const ms3dConfig = {
       "lng": 116.335987,
       "alt": 45187,
       "heading": 0,
-      "pitch": -45
+      "pitch": -85
     },
     "scene3DOnly": false,
     "shadows": false,
@@ -57,9 +57,11 @@ export const ms3dConfig = {
     },
     "mouseDownView": false,
     "zoom": {
+      enabled: false,
       "insertBefore": "sceneModePicker"
     },
     "compass": {
+      enabled: false,
       "bottom": "toolbar",
       "left": "5px"
     },