From 490d38ddfa10fe2ee33d5fa59d8c0b5ff8dc6297 Mon Sep 17 00:00:00 2001
From: "DESKTOP-VMMLSOQ\\wangzg" <1161909281@qq.com>
Date: Wed, 28 Feb 2024 23:21:53 +0800
Subject: [PATCH] =?UTF-8?q?=E3=80=90add=E3=80=91=E5=A2=9E=E5=8A=A0?=
 =?UTF-8?q?=E7=82=B9=E4=BD=8D=E4=BF=A1=E6=81=AF?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/Map.vue            | 48 +++++++++++++++++++++++----------
 components/Test.vue           | 15 -----------
 config/mapConfig.js           |  8 +++---
 config/mapFilters.js          | 16 +++++------
 pages/visual/PeakCoalView.vue | 18 ++++++-------
 store/map.js                  | 50 +++++++++++++++++++++++++++++++++++
 6 files changed, 105 insertions(+), 50 deletions(-)
 delete mode 100644 components/Test.vue
 create mode 100644 store/map.js

diff --git a/components/Map.vue b/components/Map.vue
index 4d70bce..fb48847 100644
--- a/components/Map.vue
+++ b/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.addDataByLayerType('cems', [
-          {
-            longitude: 114.116195,
-            latitude: 36.555232
-          }
-        ])
-        window.test = this
+        this.map.on(mars3d.EventType.click, function (event) {
+          console.log('单击了地图对象', event)
+        })
+        this.addPoints()
       })
 
     },
 
+    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)
diff --git a/components/Test.vue b/components/Test.vue
deleted file mode 100644
index 7ce615a..0000000
--- a/components/Test.vue
+++ /dev/null
@@ -1,15 +0,0 @@
-<template>
-<div>
-  123123123
-</div>
-</template>
-
-<script>
-export default {
-  name: "Test"
-}
-</script>
-
-<style scoped>
-
-</style>
diff --git a/config/mapConfig.js b/config/mapConfig.js
index e3f3494..42e7688 100644
--- a/config/mapConfig.js
+++ b/config/mapConfig.js
@@ -1,11 +1,11 @@
 export const ms3dConfig = {
   "scene": {
     "center": {
-      "lat": 36.555232,
-      "lng": 114.116195,
-      "alt": 45187,
+      "lat": 36.543132,
+      "lng": 114.110195,
+      "alt": 2187,
       "heading": 0,
-      "pitch": -85
+      "pitch": -60
     },
     "scene3DOnly": false,
     "shadows": false,
diff --git a/config/mapFilters.js b/config/mapFilters.js
index 091bdd0..5736899 100644
--- a/config/mapFilters.js
+++ b/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'
   }
diff --git a/pages/visual/PeakCoalView.vue b/pages/visual/PeakCoalView.vue
index 285c114..dce11fc 100644
--- a/pages/visual/PeakCoalView.vue
+++ b/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 = {
diff --git a/store/map.js b/store/map.js
new file mode 100644
index 0000000..2875b13
--- /dev/null
+++ b/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 = {
+
+}