优化地图展示流程，已经默认统一坐标为wgs84

2025-09-25 18:06:58 +08:00
parent 6469aefe22
commit 8d6fe0c9d8
12 changed files with 102 additions and 308 deletions
--- a/web/src/views/common/MapComponent.vue
+++ b/web/src/views/common/MapComponent.vue
@@ -17,7 +17,7 @@ import View from 'ol/View'
 import Feature from 'ol/Feature'
 import Overlay from 'ol/Overlay'
 import { Point, LineString } from 'ol/geom'
-import { get as getProj } from 'ol/proj'
+import { get as getProj, toLonLat as projToLonLat } from 'ol/proj'
 import { containsCoordinate } from 'ol/extent'
 import {
  defaults as defaultInteractions
@@ -27,9 +27,9 @@ import { fromLonLat, toLonLat } from './map/TransformLonLat'

 import { v4 } from 'uuid'
 import { getUid } from 'ol'
+import gcoord from 'gcoord'

-let olMap = null
-
+let olMap, tileLayer = null
 export default {
  name: 'MapComponent',
  props: [],
@@ -72,6 +72,7 @@ export default {
    },
    initMap(){
      let center = fromLonLat([116.41020, 39.915119])
+      window.coordinateSystem = this.mapTileList[this.mapTileIndex].coordinateSystem
      if (window.mapParam.center) {
        center = fromLonLat(window.mapParam.center)
      }
@@ -82,7 +83,7 @@ export default {
        maxZoom: window.mapParam.maxZoom || 19,
        minZoom: window.mapParam.minZoom || 1
      })
-      let tileLayer = null
+
      if (this.mapTileList.length > 0 && this.mapTileList[this.mapTileIndex].tilesUrl) {
        tileLayer = new Tile({
          source: new XYZ({
@@ -231,7 +232,7 @@ export default {
      }
    },
    /**
-       * 添加图层
+       * 添加图层， 数据坐标系由控件内完成，输入和输出永远是wgs84
       * @param data
       * [
       *     {
@@ -287,7 +288,6 @@ export default {
      }
    },
    updateLayer(layer, data, postponement) {
-      console.log(layer)
      layer.getSource().clear(true)
      const features = []
      for (let i = 0; i < data.length; i++) {
@@ -374,6 +374,19 @@ export default {
    },
    getCurrentCoordinateSystem() {
      return this.mapTileList[this.mapTileIndex].coordinateSystem
+    },
+    changeMapTile(index) {
+      let center = this.getCenter()
+      let mapTileConfig = this.mapTileList[this.mapTileIndex]
+      this.mapTileIndex = index
+      window.coordinateSystem = this.mapTileList[this.mapTileIndex].coordinateSystem
+      tileLayer.getSource().setUrl(this.mapTileList[index].tilesUrl)
+      if (mapTileConfig.coordinateSystem !== this.mapTileList[this.mapTileIndex].coordinateSystem) {
+        // 发送通知
+        this.$emit('coordinateSystemChange', this.mapTileList[this.mapTileIndex].coordinateSystem)
+        // 修正地图的中心点
+        olMap.getView().setCenter(fromLonLat(center))
+      }
    }
  }
 }
--- a/web/src/views/common/map/TransformLonLat.js
+++ b/web/src/views/common/map/TransformLonLat.js
@@ -2,8 +2,16 @@ import { fromLonLat as projFromLonLat, toLonLat as projToLonLat } from 'ol/proj'
 import gcoord from 'gcoord'

 export function fromLonLat(coordinate) {
-  return projFromLonLat(gcoord.transform(coordinate, gcoord.WGS84, gcoord.GCJ02))
+  if (window.coordinateSystem === 'GCJ02') {
+    return projFromLonLat(gcoord.transform(coordinate, gcoord.WGS84, gcoord.GCJ02))
+  }else {
+    return projFromLonLat(coordinate)
+  }
 }
 export function toLonLat(coordinate) {
-  return gcoord.transform(projToLonLat(coordinate), gcoord.GCJ02, gcoord.WGS84)
+  if (window.coordinateSystem === 'GCJ02') {
+    return gcoord.transform(projToLonLat(coordinate), gcoord.GCJ02, gcoord.WGS84)
+  }else {
+    return projToLonLat(coordinate)
+  }
 }
--- a/web/src/views/map/index.vue
+++ b/web/src/views/map/index.vue
@@ -2,13 +2,19 @@
    <div id="devicePosition" style="height: calc(100vh - 84px);width: 100%;">
      <div style="height: 100%; display: grid; grid-template-columns: 360px auto">
        <DeviceTree ref="deviceTree" @clickEvent="treeChannelClickEvent" :showPosition="true" :contextmenu="getContextmenu()"/>
-        <MapComponent ref="mapComponent" @loaded="initChannelLayer"></MapComponent>
+        <MapComponent ref="mapComponent" @loaded="initChannelLayer" @coordinateSystemChange="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>
+          <el-dropdown placement="top"  @command="changeMapTile">
+            <div class="el-dropdown-link map-tool-btn">
+              <i class="iconfont icon-tuceng"></i>
+            </div>
+            <el-dropdown-menu slot="dropdown">
+              <el-dropdown-item  v-for="(item,index) in mapTileList" :key="index" :command="index">{{item.name}}</el-dropdown-item>
+            </el-dropdown-menu>
+          </el-dropdown>
+
        </div>
        <div class="map-tool-btn-group">
          <div class="map-tool-btn" @click="initChannelLayer">
@@ -89,10 +95,12 @@ export default {
      },
      isLoging: false,
      longitudeStr: 'longitude',
-      latitudeStr: 'latitude'
+      latitudeStr: 'latitude',
+      mapTileList: []
    }
  },
  created() {
+
  },
  destroyed() {

@@ -151,10 +159,12 @@ export default {
    },
    showChannelInfo: function(data) {
      this.channel = data
-      this.infoBoxId = this.$refs.mapComponent.openInfoBox([data.gbLongitude, data.gbLatitude], this.$refs.infobox, [0, -50])
+      let position = [data.gbLongitude, data.gbLatitude]
+      this.infoBoxId = this.$refs.mapComponent.openInfoBox(position, this.$refs.infobox, [0, -50])
    },

    initChannelLayer: function () {
+      this.mapTileList = this.$refs.mapComponent.mapTileList
      // 获取所有有位置的通道
      this.closeInfoBox()
      this.$store.dispatch('commonChanel/getAllForMap', {}).then(data => {
@@ -163,12 +173,9 @@ export default {
          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: gcj02Position,
+              position: position,
              data: item,
              image: {
                anchor: [0.5, 1],
@@ -180,6 +187,9 @@ export default {
        this.updateChannelLayer(array)
      })
    },
+    changeMapTile: function (index) {
+      this.$refs.mapComponent.changeMapTile(index)
+    },
    updateChannelLayer: function(array) {
      if (this.channelLayer) {
        this.channelLayer = this.$refs.mapComponent.updateLayer(this.channelLayer, array, true)
@@ -300,11 +310,6 @@ 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({