【add】增加点位信息

components/Map.vue

@@ -4,6 +4,7 @@
 
 <script>
 import { ms3dConfig } from '@/config/mapConfig'
+import { mapState } from 'vuex'
 const mapLayerTypeToPointIcon = {
   cems: require('@/assets/images/map/points/点位-CEMS.png'),
   sdjcy: require('@/assets/images/map/points/点位-深度检测仪.png'),
@@ -32,26 +33,45 @@ export default {
       this.setVisibility(layerType, show)
     })
   },
+  computed: {
+    ...mapState({
+      cems: state => state.map.cems,
+      sdjcy: state => state.map.sdjcy,
+      zkz: state => state.map.zkz,
+      gbz: state => state.map.gbz,
+      ssc: state => state.map.ssc,
+      shisc: state => state.map.shisc,
+      wz: state => state.map.wz,
+      jkd: state => state.map.jkd,
+    })
+  },
   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.layerCreator(layerType)
         })
-
+        this.map.on(mars3d.EventType.click, function (event) {
-        this.addDataByLayerType('cems', [
+          console.log('单击了地图对象', event)
-          {
+        })
-            longitude: 114.116195,
+        this.addPoints()
-            latitude: 36.555232
-          }
-        ])
-        window.test = this
       })
 
     },
 
+    addPoints () {
+      this.addDataByLayerType('cems', this.cems)
+      this.addDataByLayerType('sdjcy', this.sdjcy)
+      this.addDataByLayerType('zkz', this.zkz)
+      this.addDataByLayerType('gbz', this.gbz)
+      this.addDataByLayerType('ssc', this.ssc)
+      this.addDataByLayerType('shisc', this.shisc)
+      this.addDataByLayerType('wz', this.wz)
+      this.addDataByLayerType('jkd', this.jkd)
+    },
+
     /**
      * 图层构造器
      * @param { 'cems' | 'sdjcy' | 'zkz' | 'gbz' | 'ssc' | 'shisc' | 'wz' | 'jkd' } layerType 图层名称
@@ -59,7 +79,7 @@ export default {
     layerCreator (layerType) {
       if (!this.layerMap.has(layerType)) {
         const graphicLayer = new mars3d.layer.GraphicLayer({
-          clustering: {
+          /*clustering: {
             enabled: true,
             pixelRange: 20,
             minimumClusterSize: 2,
@@ -67,21 +87,21 @@ export default {
             style: {
 
             }
-          },
+          },*/
           allowDrillPick: true, // 如果存在坐标完全相同的图标点，可以打开该属性，click事件通过graphics判断
-          flyTo: true
+          flyTo: false
         })
         this.map.addLayer(graphicLayer)
         graphicLayer.on(mars3d.EventType.click, ({ graphic }) => {
           const position = graphic.positionShow
-          this.map.flyToPoint(position, {
+          /*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)

components/Test.vue

@@ -1,15 +0,0 @@
-<template>
-<div>
-  123123123
-</div>
-</template>
-
-<script>
-export default {
-  name: "Test"
-}
-</script>
-
-<style scoped>
-
-</style>

config/mapConfig.js

@@ -1,11 +1,11 @@
 export const ms3dConfig = {
   "scene": {
     "center": {
-      "lat": 36.555232,
+      "lat": 36.543132,
-      "lng": 114.116195,
+      "lng": 114.110195,
-      "alt": 45187,
+      "alt": 2187,
       "heading": 0,
-      "pitch": -85
+      "pitch": -60
     },
     "scene3DOnly": false,
     "shadows": false,

config/mapFilters.js

@@ -3,7 +3,7 @@ export default [
     label: '监控点',
     icon: '',
     selectedIcon: '',
-    count: 0,
+    count: 4,
     selected: true,
     id: 'jkd'
   },
@@ -11,7 +11,7 @@ export default [
     label: '微站',
     icon: '',
     selectedIcon: '',
-    count: 0,
+    count: 1,
     selected: true,
     id: 'wz'
   },
@@ -19,7 +19,7 @@ export default [
     label: '深度检测仪',
     icon: '',
     selectedIcon: '',
-    count: 0,
+    count: 1,
     selected: true,
     id: 'sdjcy'
   },
@@ -28,7 +28,7 @@ export default [
     icon: '',
     selectedIcon: '',
     count: 0,
-    selected: true,
+    selected: false,
     id: 'zkz'
   },
   {
@@ -36,7 +36,7 @@ export default [
     icon: '',
     selectedIcon: '',
     count: 0,
-    selected: true,
+    selected: false,
     id: 'gbz'
   },
   {
@@ -44,7 +44,7 @@ export default [
     icon: '',
     selectedIcon: '',
     count: 0,
-    selected: true,
+    selected: false,
     id: 'ssc'
   },
   {
@@ -52,14 +52,14 @@ export default [
     icon: '',
     selectedIcon: '',
     count: 0,
-    selected: true,
+    selected: false,
     id: 'shisc'
   },
   {
     label: 'CEMS',
     icon: '',
     selectedIcon: '',
-    count: 0,
+    count: 1,
     selected: true,
     id: 'cems'
   }

pages/visual/PeakCoalView.vue

@@ -32,7 +32,7 @@
 
         <!--      中间内容-->
         <div class="center-content">
-          <Map />
+          <Map @pointClick="pointClick" />
           <div class="container"></div>
           <img class="center-bg" :src="centerBg" />
         </div>
@@ -120,7 +120,6 @@
 <script>
 import mapFilters from "@/config/mapFilters";
 const centerBg = require('@/assets/peakCoalImages/center/center-content-bg.png')
-import Test from "@/components/Test";
 export default {
   name: "PeakCoalView",
   components: {},
@@ -147,15 +146,16 @@ export default {
       e.stopPropagation()
       this.getAutoStyle()
     }, false)
-    this.$open(Test, {}, {
-      title: '测试',
-      width: 1920,
-      onClose () {
-        console.log(1);
-      }
-    })
   },
   methods: {
+    /**
+     * 图层构造器
+     * @param { 'cems' | 'sdjcy' | 'zkz' | 'gbz' | 'ssc' | 'shisc' | 'wz' | 'jkd' } layerType 图层类型 jkd(监控点) wz(微站) sdjcy(深度检测仪)  zkz（质控站） gbz(国标站) ssc(洒水车) shisc(湿扫车) cems（CEMS）
+     * @param { object } data 图层类型
+     */
+    pointClick (layerType, data) {
+      // todo
+    },
     getAutoStyle() {
       const {scale, origin} = this.getScale()
       this.autoStyle = {

store/map.js

@@ -0,0 +1,50 @@
+export const state = {
+  cems: [
+    {
+      longitude: 114.116195,
+      latitude: 36.555232
+    }
+  ],
+  sdjcy: [
+    {
+      longitude: 114.116195,
+      latitude: 36.555232
+    }
+  ],
+  zkz: [],
+  gbz: [],
+  ssc: [],
+  shisc: [],
+  wz: [
+    {
+      longitude: 114.116195,
+      latitude: 36.555232
+    },
+  ],
+  jkd: [
+    {
+      longitude: 114.116195,
+      latitude: 36.555232
+    },
+    {
+      longitude: 114.116195,
+      latitude: 36.555232
+    },
+    {
+      longitude: 114.116195,
+      latitude: 36.555232
+    },
+    {
+      longitude: 114.116195,
+      latitude: 36.555232
+    }
+  ]
+}
+
+export const mutations = {
+
+}
+
+export const actions = {
+
+}