支持从第三方读取地图配置

web/src/api/server.js

@@ -115,3 +115,10 @@ export function info() {
   })
 }
 
+export function getMapConfig() {
+  return request({
+    method: 'get',
+    url: `/api/server/map/config`
+  })
+}
+

web/src/store/modules/server.js

@@ -1,6 +1,6 @@
 import {
   checkMediaServer,
-  checkMediaServerRecord, deleteMediaServer, getMediaInfo,
+  checkMediaServerRecord, deleteMediaServer, getMapConfig, getMediaInfo,
   getMediaServer,
   getMediaServerList, getMediaServerLoad,
   getOnlineMediaServerList, getResourceInfo, getSystemConfig, getSystemInfo, info, saveMediaServer
@@ -136,6 +136,16 @@ const actions = {
         reject(error)
       })
     })
+  },
+  getMapConfig({ commit }) {
+    return new Promise((resolve, reject) => {
+      getMapConfig().then(response => {
+        const { data } = response
+        resolve(data)
+      }).catch(error => {
+        reject(error)
+      })
+    })
   }
 }
 

web/src/styles/iconfont.scss

@@ -1,6 +1,6 @@
 @font-face {
   font-family: "iconfont"; /* Project id 1291092 */
-  src: url('iconfont.woff2?t=1758456390170') format('woff2')
+  src: url('iconfont.woff2?t=1758784486763') format('woff2')
 }
 
 .iconfont {
@@ -11,6 +11,158 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
+.icon-mti-duobianxingxuan:before {
+  content: "\e9e7";
+}
+
+.icon-mti-fengwotu:before {
+  content: "\e9e8";
+}
+
+.icon-mti-fangda:before {
+  content: "\e9e9";
+}
+
+.icon-mti-huizhi:before {
+  content: "\e9ea";
+}
+
+.icon-mti-guijihuifang:before {
+  content: "\e9eb";
+}
+
+.icon-mti-huodongguiji:before {
+  content: "\e9ed";
+}
+
+.icon-mti-juliceliang:before {
+  content: "\e9ee";
+}
+
+.icon-mti-jutai:before {
+  content: "\e9ef";
+}
+
+.icon-mti-kuangxuan:before {
+  content: "\e9f0";
+}
+
+.icon-mti-lukuang:before {
+  content: "\e9f1";
+}
+
+.icon-a-mti-qiehuanshijiaomti-sanwei:before {
+  content: "\e9f2";
+}
+
+.icon-mti-mianjiceliang:before {
+  content: "\e9f3";
+}
+
+.icon-mti-lukuang2:before {
+  content: "\e9f4";
+}
+
+.icon-mti-sandian:before {
+  content: "\e9f7";
+}
+
+.icon-mti-relitu:before {
+  content: "\e9f8";
+}
+
+.icon-mti-sanwei:before {
+  content: "\e9f9";
+}
+
+.icon-mti-quanxuan:before {
+  content: "\e9fa";
+}
+
+.icon-mti-suoxiao:before {
+  content: "\e9fb";
+}
+
+.icon-mti-tucengfenlei:before {
+  content: "\e9fc";
+}
+
+.icon-mti-tianjiadingweiquyu:before {
+  content: "\e9fd";
+}
+
+.icon-mti-tianjiadingwei:before {
+  content: "\e9fe";
+}
+
+.icon-mti-tujingdian:before {
+  content: "\e9ff";
+}
+
+.icon-mti-xinzengdian:before {
+  content: "\ea00";
+}
+
+.icon-mti-xianxuan:before {
+  content: "\ea01";
+}
+
+.icon-mti-xuanze:before {
+  content: "\ea02";
+}
+
+.icon-mti-xinzengxian:before {
+  content: "\ea03";
+}
+
+.icon-mti-yangshi:before {
+  content: "\ea04";
+}
+
+.icon-mti-yingyantu:before {
+  content: "\ea05";
+}
+
+.icon-mti-yunhangguiji:before {
+  content: "\ea06";
+}
+
+.icon-mti-ziyuanbukong:before {
+  content: "\ea08";
+}
+
+.icon-mti-zhongdianquyu:before {
+  content: "\ea09";
+}
+
+.icon-mti-zongheceliang:before {
+  content: "\ea0a";
+}
+
+.icon-mti-POIxinxi:before {
+  content: "\e9e2";
+}
+
+.icon-mti-celiang:before {
+  content: "\e9e3";
+}
+
+.icon-mti-dituqiehuan:before {
+  content: "\e9e4";
+}
+
+.icon-mti-diliweilan:before {
+  content: "\e9e5";
+}
+
+.icon-mti-erwei:before {
+  content: "\e9e6";
+}
+
+.icon-tuceng:before {
+  content: "\e7f2";
+}
+
 .icon-a-bofangqi1:before {
   content: "\ec17";
 }

web/src/views/common/MapComponent.vue

@@ -36,15 +36,16 @@ export default {
   data() {
     return {
       overlayId: null,
-      dragInteraction: new DragInteraction()
+      dragInteraction: new DragInteraction(),
+      mapTileList: [],
+      mapTileIndex: 0
     }
   },
   created() {
     this.$nextTick(() => {
-      setTimeout(() => {
-        this.init()
-      }, 100)
+      this.init()
     })
+
   },
   mounted() {
 
@@ -53,6 +54,23 @@ export default {
   },
   methods: {
     init() {
+      this.$store.dispatch('server/getMapConfig')
+        .then(mapConfigList => {
+          console.log(mapConfigList.length)
+          if (mapConfigList.length === 0) {
+           if (window.mapParam.tilesUrl) {
+             this.mapTileList.push({
+               tilesUrl: window.mapParam.tilesUrl,
+               coordinateSystem: window.mapParam.coordinateSystem
+             })
+           }
+          }else {
+            this.mapTileList = mapConfigList
+          }
+          this.initMap()
+      })
+    },
+    initMap(){
       let center = fromLonLat([116.41020, 39.915119])
       if (window.mapParam.center) {
         center = fromLonLat(window.mapParam.center)
@@ -65,13 +83,13 @@ export default {
         minZoom: window.mapParam.minZoom || 1
       })
       let tileLayer = null
-      if (window.mapParam.tilesUrl) {
+      if (this.mapTileList.length > 0 && this.mapTileList[this.mapTileIndex].tilesUrl) {
         tileLayer = new Tile({
           source: new XYZ({
             projection: getProj('EPSG:3857'),
             wrapX: false,
             tileSize: 256 || window.mapParam.tileSize,
-            url: window.mapParam.tilesUrl
+            url: this.mapTileList[this.mapTileIndex].tilesUrl
           })
         })
       } else {
@@ -179,7 +197,6 @@ export default {
     },
     openInfoBox(position, content, offset) {
       if (this.overlayId !== null) {
-        console.log(this.overlayId)
         this.closeInfoBox(this.overlayId)
         this.overlayId = null
       }
@@ -354,6 +371,9 @@ export default {
         olMap.addLayer(vectorLayer)
         return vectorLayer
       }
+    },
+    getCurrentCoordinateSystem() {
+      return this.mapTileList[this.mapTileIndex].coordinateSystem
     }
   }
 }

web/src/views/device/edit.vue

@@ -44,6 +44,12 @@
               <el-option key="UTF-8" label="UTF-8" value="utf-8" />
             </el-select>
           </el-form-item>
+          <el-form-item label="坐标系" prop="geoCoordSys">
+            <el-select v-model="form.geoCoordSys" style="float: left; width: 100%">
+              <el-option key="WGS84" label="WGS84" value="gb2312" />
+              <el-option key="GCJ02" label="GCJ02" value="utf-8" />
+            </el-select>
+          </el-form-item>
           <el-form-item label="其他选项">
             <el-checkbox v-model="form.ssrcCheck" label="SSRC校验" style="float: left" />
             <el-checkbox v-model="form.asMessageChannel" label="作为消息通道" style="float: left" />

web/src/views/device/list.vue

@@ -169,7 +169,7 @@
 </template>
 
 <script>
-import deviceEdit from '../dialog/deviceEdit.vue'
+import deviceEdit from './edit.vue'
 import syncChannelProgress from '../dialog/SyncChannelProgress.vue'
 import configInfo from '../dialog/configInfo.vue'
 import Vue from 'vue'

web/src/views/map/index.vue

@@ -5,6 +5,11 @@
         <MapComponent ref="mapComponent" @loaded="initChannelLayer"></MapComponent>
       </div>
       <div class="map-tool-box">
+        <div class="map-tool-btn-group">
+          <div class="map-tool-btn" @click="initChannelLayer">
+            <i class="iconfont icon-tuceng"></i>
+          </div>
+        </div>
         <div class="map-tool-btn-group">
           <div class="map-tool-btn" @click="initChannelLayer">
             <i class="iconfont icon-shuaxin3"></i>
@@ -60,6 +65,7 @@ import DeviceTree from '../common/DeviceTree.vue'
 import queryTrace from './queryTrace.vue'
 import MapComponent from '../common/MapComponent.vue'
 import devicePlayer from '../common/channelPlayer/index.vue'
+import gcoord from 'gcoord'
 
 export default {
   name: 'Map',
@@ -151,16 +157,18 @@ export default {
     initChannelLayer: function () {
       // 获取所有有位置的通道
       this.closeInfoBox()
-      this.$store.dispatch('commonChanel/getAllForMap', {
-        geoCoordSys: window.mapParam.coordinateSystem
-      }).then(data => {
+      this.$store.dispatch('commonChanel/getAllForMap', {}).then(data => {
         let array = []
         for (let i = 0; i < data.length; i++) {
           let item = data[i]
           if (item.gbLongitude && item.gbLatitude) {
+            let position = [item.gbLongitude, item.gbLatitude]
+            let gcj02Position = gcoord.transform(position, gcoord.WGS84, gcoord.GCJ02)
+            item.gbLongitude = gcj02Position[0]
+            item.gbLatitude = gcj02Position[1]
             array.push({
               id: item.gbId,
-              position: [item.gbLongitude, item.gbLatitude],
+              position: gcj02Position,
               data: item,
               image: {
                 anchor: [0.5, 1],
@@ -291,6 +299,12 @@ export default {
       })
     },
     submitEdit: function(channel) {
+      let position = [channel.gbLongitude, channel.gbLatitude]
+      if (this.$refs.mapComponent.getCurrentCoordinateSystem() === 'GCJ02') {
+        let wgs84Position = gcoord.transform(position, gcoord.GCJ02, gcoord.WGS84)
+        channel.gbLongitude = wgs84Position[0]
+        channel.gbLatitude = wgs84Position[1]
+      }
       this.$store.dispatch('commonChanel/update', channel)
         .then(data => {
           this.$message.success({
@@ -302,7 +316,7 @@ export default {
           this.$refs.mapComponent.dragInteraction.removeFeatureId(channel.gbId)
           this.$refs.mapComponent.setFeaturePositionById(this.channelLayer, channel.gbId, {
             id: channel.gbId,
-            position: [channel.gbLongitude, channel.gbLatitude],
+            position: position,
             data: channel,
             image: {
               anchor: [0.5, 1],