Changes

package.json

@@ -30,6 +30,7 @@
     "nprogress": "0.2.0",
     "path-to-regexp": "2.4.0",
     "screenfull": "^5.1.0",
+    "v-viewer": "^1.6.4",
     "vue": "2.6.10",
     "vue-echarts": "^6.5.1",
     "vue-router": "3.0.6",

public/gis/static/threeMap/set.json

@@ -989,8 +989,8 @@
       },
       "style": {
         "offset": [
-          0,
-          0,
+          0.0005,
+          0.0005,
           -0.001
         ],
         "fontSize": "10"

public/static/config.json

@@ -0,0 +1,278 @@
+[
+  {
+    "名称": "铁岭西牵引变电所",
+    "坐标(经度)": 123.810777,
+    "坐标(纬度)": 42.40068,
+    "文件路径": "/牵引配电所/京哈高速线主接线图/牵引所亭主接线/6.铁岭西牵引变电所.PNG"
+  },
+  {
+    "名称": "新台子西牵引变",
+    "坐标(经度)": 123.475288,
+    "坐标(纬度)": 42.08451,
+    "文件路径": "/牵引配电所/京哈高速线主接线图/牵引所亭主接线/2.新台子西牵引变电所.PNG"
+  },
+  {
+    "名称": "公主岭南牵引变",
+    "坐标(经度)": 124.814252,
+    "坐标(纬度)": 43.477701,
+    "文件路径": "/牵引配电所/京哈高速线主接线图/牵引所亭主接线/18.公主岭南牵引变电所.PNG"
+  },
+  {
+    "名称": "四平东牵引变",
+    "坐标(经度)": 124.440149,
+    "坐标(纬度)": 43.138456,
+    "文件路径": "/牵引配电所/京哈高速线主接线图/牵引所亭主接线/14.四平东牵引变电所.PNG"
+  },
+  {
+    "名称": "昌图西牵引变",
+    "坐标(经度)": 124.067891,
+    "坐标(纬度)": 42.776468,
+    "文件路径": "/牵引配电所/京哈高速线主接线图/牵引所亭主接线/10.昌图西牵引变电所.PNG"
+  },
+  {
+    "名称": "米沙子牵引变电所",
+    "坐标(经度)": 125.492778,
+    "坐标(纬度)": 44.231944,
+    "文件路径": "/牵引配电所/京哈高速线主接线图/牵引所亭主接线/26.米沙子牵引变电所.PNG"
+  },
+  {
+    "名称": "德惠西牵引变电所",
+    "坐标(经度)": 125.7325,
+    "坐标(纬度)": 44.632778,
+    "文件路径": "/牵引配电所/京哈高速线主接线图/牵引所亭主接线/30.德惠西牵引变电所.PNG"
+  },
+  {
+    "名称": "扶余北牵引变电所",
+    "坐标(经度)": 126.004372,
+    "坐标(纬度)": "44. 996309",
+    "文件路径": "/牵引配电所/京哈高速线主接线图/牵引所亭主接线/34.扶余北牵引变电所.PNG"
+  },
+  {
+    "名称": "长春西牵引变电所",
+    "坐标(经度)": 125.194657,
+    "坐标(纬度)": 43.882948,
+    "文件路径": "/牵引配电所/京哈高速线主接线图/牵引所亭主接线/22.长春西牵引变电所.PNG"
+  },
+  {
+    "名称": "蛟河西牵引变电所",
+    "坐标(经度)": 127.289887,
+    "坐标(纬度)": 43.768179,
+    "文件路径": "/牵引配电所/长珲主接线图/长珲城际线牵引所/13蛟河西牵引变电所.PNG"
+  },
+  {
+    "名称": "威虎玲北牵引变电所",
+    "坐标(经度)": 127.832047,
+    "坐标(纬度)": 43.561264,
+    "文件路径": "/牵引配电所/长珲主接线图/长珲城际线牵引所/17威虎岭北牵引变电所.PNG"
+  },
+  {
+    "名称": "双吉牵引变电所",
+    "坐标(经度)": 126.460128,
+    "坐标(纬度)": 43.966139,
+    "文件路径": "/牵引配电所/长珲主接线图/长珲城际线牵引所/7双吉牵引变电所.PNG"
+  },
+  {
+    "名称": "龙潭山牵引所",
+    "坐标(经度)": 126.708456,
+    "坐标(纬度)": 43.917838,
+    "文件路径": "/牵引配电所/长珲主接线图/长珲城际线牵引所/9龙潭山牵引变电所.PNG"
+  },
+  {
+    "名称": "西营城子牵引变电所",
+    "坐标(经度)": 125.327527,
+    "坐标(纬度)": 43.911125,
+    "文件路径": "/牵引配电所/长珲主接线图/长珲城际线牵引所/3西营城子牵引变电所.PNG"
+  },
+  {
+    "名称": "万宝牵引变电所",
+    "坐标(经度)": 128.378744,
+    "坐标(纬度)": 42.876726,
+    "文件路径": "/牵引配电所/敦白主接线图/敦白牵引所/万宝牵引变电所.PNG"
+  },
+  {
+    "名称": "大桥乡牵引所",
+    "坐标(经度)": 128.361612,
+    "坐标(纬度)": 43.347708,
+    "文件路径": "/牵引配电所/长珲主接线图/长珲城际线牵引所/21大桥乡牵引变电所.PNG"
+  },
+  {
+    "名称": "长白山牵引所",
+    "坐标(经度)": 128.145052,
+    "坐标(纬度)": 42.477159,
+    "文件路径": "/牵引配电所/敦白主接线图/敦白牵引所/长白山牵引变电所.PNG"
+  },
+  {
+    "名称": "安图西牵引所",
+    "坐标(经度)": 128.887544,
+    "坐标(纬度)": 43.139903,
+    "文件路径": "/牵引配电所/长珲主接线图/长珲城际线牵引所/25安图西牵引变电所.PNG"
+  },
+  {
+    "名称": "延吉西牵引所",
+    "坐标(经度)": 129.416457,
+    "坐标(纬度)": 42.904,
+    "文件路径": "/牵引配电所/长珲主接线图/长珲城际线牵引所/30延吉西牵引变电所.PNG"
+  },
+  {
+    "名称": "石头河牵引所",
+    "坐标(经度)": 130.029059,
+    "坐标(纬度)": 43.033167,
+    "文件路径": "/牵引配电所/长珲主接线图/长珲城际线牵引所/35石头河牵引变电所.PNG"
+  },
+  {
+    "名称": "珲春配电所",
+    "坐标(经度)": 130.410496,
+    "坐标(纬度)": 42.908141,
+    "文件路径": "/牵引配电所/长珲主接线图/长珲城际线配电所/12珲春配电所.PNG"
+  },
+  {
+    "名称": "德惠西配电所",
+    "坐标(经度)": 125.675834,
+    "坐标(纬度)": 44.554069,
+    "文件路径": "/牵引配电所/京哈高速线主接线图/配电所/10.德惠西配电所.PNG"
+  },
+  {
+    "名称": "扶余北配电所",
+    "坐标(经度)": 126.008201,
+    "坐标(纬度)": 45.004318,
+    "文件路径": "/牵引配电所/京哈高速线主接线图/配电所/11.扶余北配电所.PNG"
+  },
+  {
+    "名称": "长春西10KV配电所",
+    "坐标(经度)": 125.227033,
+    "坐标(纬度)": 43.889989,
+    "文件路径": "/牵引配电所/京哈高速线主接线图/配电所/6.长春西10KV变配电所.PNG"
+  },
+  {
+    "名称": "长春西35kV配电所",
+    "坐标(经度)": "125,227,033",
+    "坐标(纬度)": 43.889989,
+    "文件路径": "/牵引配电所/京哈高速线主接线图/配电所/7.长春西35KV变配电所.PNG"
+  },
+  {
+    "名称": "龙嘉配电所",
+    "坐标(经度)": 125.617866,
+    "坐标(纬度)": 43.925075,
+    "文件路径": "/牵引配电所/长珲主接线图/长珲城际线配电所/1龙嘉机场配电所.PNG"
+  },
+  {
+    "名称": "四平东配电所",
+    "坐标(经度)": 124.437153,
+    "坐标(纬度)": 43.149004,
+    "文件路径": "/牵引配电所/京哈高速线主接线图/配电所/4.四平东配电所.PNG"
+  },
+  {
+    "名称": "公主岭南配电所",
+    "坐标(经度)": 124.821209,
+    "坐标(纬度)": 43.480431,
+    "文件路径": "/牵引配电所/京哈高速线主接线图/配电所/5.公主岭南配电所.PNG"
+  },
+  {
+    "名称": "长春西站房配电所",
+    "坐标(经度)": 125.208596,
+    "坐标(纬度)": 43.880735,
+    "文件路径": "/牵引配电所/京哈高速线主接线图/配电所/9.长春西站房配电所.PNG"
+  },
+  {
+    "名称": "长春西动车所1号配电所",
+    "坐标(经度)": 125.185993,
+    "坐标(纬度)": 43.883348,
+    "文件路径": "/牵引配电所/京哈高速线主接线图/配电所/8.长春西动车所1号配电所.PNG"
+  },
+  {
+    "名称": "长春西动罕所2号配电所",
+    "坐标(经度)": 125.188291,
+    "坐标(纬度)": 43.895302,
+    "文件路径": "/牵引配电所/京哈高速线主接线图/配电所/长春西动车所2号配电所.PNG"
+  },
+  {
+    "名称": "铁岭西配电所",
+    "坐标(经度)": 123.679187,
+    "坐标(纬度)": 42.237862,
+    "文件路径": "/牵引配电所/京哈高速线主接线图/配电所/1.铁岭西配电所.PNG"
+  },
+  {
+    "名称": "开原西配电所",
+    "坐标(经度)": 123.918394,
+    "坐标(纬度)": 42.549095,
+    "文件路径": "/牵引配电所/京哈高速线主接线图/配电所/2.开原西配电所.PNG"
+  },
+  {
+    "名称": "昌图西配电所",
+    "坐标(经度)": 124.067013,
+    "坐标(纬度)": 42.776774,
+    "文件路径": "/牵引配电所/京哈高速线主接线图/配电所/3.昌图西配电所.PNG"
+  },
+  {
+    "名称": "桦皮厂配电所",
+    "坐标(经度)": 126.217489,
+    "坐标(纬度)": 43.989878,
+    "文件路径": "/牵引配电所/长珲主接线图/长珲城际线配电所/2桦皮厂配电所.PNG"
+  },
+  {
+    "名称": "蛟河西配电所",
+    "坐标(经度)": 127.320733,
+    "坐标(纬度)": 43.737012,
+    "文件路径": "/牵引配电所/长珲主接线图/长珲城际线配电所/4蛟河西配电所.PNG"
+  },
+  {
+    "名称": "威虎岭北配电所",
+    "坐标(经度)": 127.832047,
+    "坐标(纬度)": 43.561264,
+    "文件路径": "/牵引配电所/长珲主接线图/长珲城际线配电所/5威虎岭北配电所.PNG"
+  },
+  {
+    "名称": "安图西配电所",
+    "坐标(经度)": 128.902825,
+    "坐标(纬度)": 43.119784,
+    "文件路径": "/牵引配电所/长珲主接线图/长珲城际线配电所/7安图西配电所.PNG"
+  },
+  {
+    "名称": "延吉西配电所",
+    "坐标(经度)": 129.429631,
+    "坐标(纬度)": 42.90552,
+    "文件路径": "/牵引配电所/长珲主接线图/长珲城际线配电所/8延吉西配电所.PNG"
+  },
+  {
+    "名称": "延吉西站房配电所",
+    "坐标(经度)": 129.4223796,
+    "坐标(纬度)": 42.91023355,
+    "文件路径": "/牵引配电所/长珲主接线图/长珲城际线配电所/9延吉西站房配电所.PNG"
+  },
+  {
+    "名称": "延吉西整备库配电所",
+    "坐标(经度)": 129.3957112,
+    "坐标(纬度)": 42.91842976,
+    "文件路径": "/牵引配电所/长珲主接线图/长珲城际线配电所/10延吉西整备库配电所.PNG"
+  },
+  {
+    "名称": "图们北配电所",
+    "坐标(经度)": 129.805393,
+    "坐标(纬度)": 43.021414,
+    "文件路径": "/牵引配电所/长珲主接线图/长珲城际线配电所/11图们北配电所.PNG"
+  },
+  {
+    "名称": "敦化南10kV配电所",
+    "坐标(经度)": 128.334031,
+    "坐标(纬度)": 43.312741,
+    "文件路径": "/牵引配电所/敦白主接线图/敦白配电所/敦化南配电所.PNG"
+  },
+  {
+    "名称": "永庆10kV配电所",
+    "坐标(经度)": 128.262582,
+    "坐标(纬度)": 42.731213,
+    "文件路径": "/牵引配电所/敦白主接线图/敦白配电所/永庆配电所.PNG"
+  },
+  {
+    "名称": "长白山存车场配电所",
+    "坐标(经度)": 128.160241,
+    "坐标(纬度)": 42.486028,
+    "文件路径": "/牵引配电所/敦白主接线图/敦白配电所/长白山存车场配电所.PNG"
+  },
+  {
+    "名称": "长白山动车库配电所",
+    "坐标(经度)": 128.164473,
+    "坐标(纬度)": 42.493832,
+    "文件路径": "/牵引配电所/敦白主接线图/敦白配电所/长白山动车库配电所.PNG"
+  }
+]

src/main.js

@@ -54,6 +54,10 @@ Vue.use(Antd)
 Vue.use(JDictSelectTag)
 Vue.use(JMultiSelectTag)
 Vue.mixin(datePickerZhMixin)
+
+import 'viewerjs/dist/viewer.css'
+import VueViewer from 'v-viewer'
+Vue.use(VueViewer)
 /**
  * If you don't want to use mock-server
  * you want to use MockJs for mock api

src/views/dashboard-screen/chart-map/chartMap.vue

@@ -9,6 +9,11 @@ import {chartMap} from '@/api/dashboard-json'
 
 export default {
   name: 'ChartMap',
+  data() {
+    return {
+      config: []
+    }
+  },
   created() {
     window['mapFrame'] = this.$refs.mapFrame
   },
@@ -16,6 +21,8 @@ export default {
     this.$refs.mapFrame.onload = () => {
       this.loadDone()
     }
+
+    this.getConfig()
   },
   methods: {
     loadDone() {
@@ -39,10 +46,31 @@ export default {
         )
         this.$refs.mapFrame.contentWindow.addEventListener('message', (evt) => {
           console.log('onMessage', evt)
+          const dataItem = evt.data?.data || {}
+          const name = dataItem.name
+          const renderType = dataItem?.ident?.type || 0
+          const findConfig = this.config.find(item => item['名称'] === name)
+          if (findConfig && (renderType === 1 || renderType === 2)) {
+            this.loadImage(findConfig['文件路径'])
+          }
         })
         console.log('data', data)
       })
       console.log('loadDone')
+    },
+    async getConfig() {
+      const response = await fetch('/static/config.json');
+      const json = await response.json();
+      console.log('json', json)
+      this.config = json;
+    },
+
+    loadImage(path) {
+      console.log('loadImage', path)
+      this.$viewerApi({
+        images: [`/static${path}`],
+      })
+
     }
   }
 }