feat(bd): 新增 3D 图层开关并优化地图相关功能

- 在 .env 文件中添加 VUE_APP_3D_SWITCH 变量，用于控制 3D 图层显示
- 新增 bd_signal 和 bd_signal_off 图标
- 优化地图组件，增加点击事件和中心点显示
- 调整实时定位和房间定位功能，优化设备选中逻辑
- 调整地图加载和 3D 图层添加逻辑

ruoyi-ui/.env.development

@@ -11,12 +11,12 @@ VUE_APP_BASE_URL = 'http://127.0.0.1:28080/bd-api'
 
 VUE_APP_WS_URL = 'ws://127.0.0.1:28080/bd-api'
 
-VUE_APP_DOMAIN_BASE_URL = 'http://127.0.0.1'
-
-
 VUE_APP_BD_BASE_API = '/dev-db-api'
 
 VUE_APP_BD_BASE_URL = 'http://200.200.19.253:31838/bdgis'
 
+# 3D图层开关
+VUE_APP_3D_SWITCH = false
+
 # 路由懒加载
 VUE_CLI_BABEL_TRANSPILE_MODULES = true

ruoyi-ui/.env.production

@@ -15,3 +15,6 @@ VUE_APP_WS_URL = '/prod-api'
 VUE_APP_BASE_URL = 'http://172.192.13.80:8080/tfc'
 
 VUE_APP_DOMAIN_BASE_URL = 'http://200.200.19.254:31080'
+
+# 3D图层开关
+VUE_APP_3D_SWITCH = false

ruoyi-ui/src/assets/icons/svg/bd_signal.svg

@@ -0,0 +1,5 @@
+<svg t="1730359242827" class="icon" viewBox="0 0 1346 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4326"
+     width="48" height="48">
+    <path d="M614.762225 324.416035a578.94361 578.94361 0 0 0-397.653943 238.117618 89.918541 89.918541 0 1 0 154.434563 92.115133 407.432318 407.432318 0 0 1 262.421842-151.458536c118.438803-12.683545 237.054751 43.400399 352.482099 166.834678a89.95397 89.95397 0 0 0 131.370351-122.867416c-194.575504-207.825911-380.966932-235.81474-503.054912-222.741477z m60.866846 354.288972a172.645016 172.645016 0 1 0 172.574158 172.574159 172.645016 172.645016 0 0 0-172.645016-172.715874zM630.846944 0.985632C291.615253 16.609776 64.232591 258.695431 22.107632 307.055875a89.918541 89.918541 0 0 0 135.621819 118.049086c20.655047-23.701932 209.668214-232.023848 481.407855-244.459391 185.222275-8.502935 372.003421 75.746982 555.135391 250.553161a89.918541 89.918541 0 0 0 124.001141-130.130339C1098.366672 90.939602 867.015973-9.997326 630.846944 0.985632z"
+          p-id="4327" fill="#1296db"></path>
+</svg>

ruoyi-ui/src/assets/icons/svg/bd_signal_off.svg

@@ -0,0 +1,5 @@
+<svg t="1730359709803" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5421"
+     width="48" height="48">
+    <path d="M512 768c30.464 0 58.453333 10.666667 80.469333 28.416L512 896l-80.426667-99.584A127.445333 127.445333 0 0 1 512 768zM119.808 59.434667l754.218667 754.261333-60.330667 60.330667-157.098667-157.013334-10.538666 13.056A212.48 212.48 0 0 0 512 682.666667c-50.773333 0-97.408 17.749333-134.016 47.36l-80.426667-99.584a339.754667 339.754667 0 0 1 197.205334-75.349334l-75.648-75.648a425.088 425.088 0 0 0-175.189334 84.608L163.413333 464.512A553.941333 553.941333 0 0 1 316.416 376.746667L251.093333 311.466667a640 640 0 0 0-141.226666 86.656L29.397333 298.538667c39.04-31.573333 81.194667-59.349333 125.952-82.858667L59.434667 119.808l60.373333-60.373333zM686.250667 506.453333l-165.034667-164.992L512 341.333333c132.053333 0 253.312 46.122667 348.586667 123.178667l-80.469334 99.584a426.709333 426.709333 0 0 0-93.866666-57.685333zM512 128c182.826667 0 350.72 63.914667 482.56 170.581333L914.176 398.08A637.312 637.312 0 0 0 512 256c-24.405333 0-48.469333 1.365333-72.106667 4.010667L329.557333 149.802667C388.053333 135.552 449.152 128 512 128z"
+          fill="#1296db" p-id="5422"></path>
+</svg>

ruoyi-ui/src/components/SvgIcon/index.vue

@@ -6,7 +6,7 @@
 </template>
 
 <script>
-import { isExternal } from '@/utils/validate'
+import { isExternal } from '@/utils/validate';
 
 export default {
   name: 'SvgIcon',
@@ -51,6 +51,7 @@ export default {
   vertical-align: -0.15em;
   fill: currentColor;
   overflow: hidden;
+  cursor: pointer;
 }
 
 .svg-external-icon {

ruoyi-ui/src/views/bd/index.vue

@@ -109,7 +109,9 @@ export default {
           },
         ],
       });
-      map.addCustomLayers(d3tiles, -1, true);
+      if (process.env.VUE_APP_3D_SWITCH === 'true') {
+        map.addCustomLayers(d3tiles, -1, true);
+      }
       this.mapLoaded = true;
     },
     menuClick(e) {

ruoyi-ui/src/views/bd/map/index.vue

@@ -25,7 +25,7 @@ export default {
         mapModel: BDLayers.Lib.Constant.BaseLayerModel.Satellite,
         center: [118.8738802982145, 32.010241883966096],
         defaultZoom: 15,
-        showCenter: false,
+        showCenter: true,
         baseControl: false,
         pitch: 45,
         lights: {
@@ -86,6 +86,10 @@ export default {
         minZoom: [3, 3],
       });
       this.mapView.addCustomLayers(satelliteTileLayer, -1, true);
+      this.mapView.on('click', function (param) {
+        console.log(new Date().toLocaleTimeString(),
+            'click map on', param.coordinate.toFixed(5).toArray().join());
+      });
       this.loaded(this.mapView);
     });
   },

ruoyi-ui/src/views/bd/realtimeLocation/index.vue

@@ -20,16 +20,15 @@
              {{ device.uwbKey }}
             </span>
             <span class="over-flow-hidden" style="width: 20%">
-              <i
-                  class="el-icon-location"
-                  title="查看设备定位"
-                  @click="()=>showLocation(device)"
+              <svg-icon :icon-class="`${selectedFlag[device.deviceId]?'bd_signal':'bd_signal_off'}`"
+                        title="查看设备定位"
+                        @click="()=>showLocation(device)"
               />
-               <i
-                   class="el-icon-circle-close"
-                   title="查看设备定位"
-                   @click="()=>play(device)"
-               />
+              <!--               <i-->
+              <!--                   class="el-icon-circle-close"-->
+              <!--                   title="查看设备定位"-->
+              <!--                   @click="()=>play(device)"-->
+              <!--               />-->
             </span>
           </div>
         </template>
@@ -77,6 +76,7 @@ export default {
       locationMarkers: {},
       selectedDevice: [],
       playInterval: null,
+      selectedFlag: {},
     };
   },
   // 组件卸载前清空图层信息
@@ -111,7 +111,7 @@ export default {
           [longitude, latitude],
           {
             imgurl: position,
-            iconSize: [60, 45],
+            iconSize: [50, 60],
             symbol: {
               'textName': 'm4',
               'textSize': 14,
@@ -128,10 +128,19 @@ export default {
       const exist = this.selectedDevice.find(item => item.deviceId === device.deviceId);
       if (exist) {
         this.selectedDevice = this.selectedDevice.filter(item => item.deviceId !== device.deviceId);
+        this.selectedFlag = {
+          ...this.selectedFlag,
+          [device.deviceId]: false,
+        };
         return;
       }
       this.selectedDevice.push(device);
+      this.selectedFlag = {
+        ...this.selectedFlag,
+        [device.deviceId]: true,
+      };
       this.selectedDevice = [...this.selectedDevice];
+      this.play();
     },
     onMessage(a) {
       const data = JSON.parse(a.data);
@@ -148,6 +157,7 @@ export default {
       this.locationMarkers[deviceId].moveMarker([longitude, latitude], 2000, false);
     },
     play() {
+      this.playInterval && clearInterval(this.playInterval);
       const gps = [
         [118.868474555524, 32.013913750075],
         [118.868459917135, 32.0138560330253],

ruoyi-ui/src/views/bd/roomlocation/roommap/index.vue

@@ -3,6 +3,8 @@
       title="室内定位融合"
       :visible.sync="centerDialogVisible"
       width="70vw"
+      @closed="onDialogClose"
+      @opened="play"
       center>
     <div style="width: 100%;height: 70vh;">
       <bd-map :loaded="loaded" map-id="room-map" />
@@ -48,14 +50,17 @@ export default {
 
   },
   mounted() {
-    this.play();
+
   },
   methods: {
     dayjs,
+    onDialogClose() {
+      this.playInterval && clearInterval(this.playInterval);
+    },
     loaded(map) {
       const vtLayer = new BDLayers.Lib.Layer.CBTileLayer('blayer_ng_s', {
         url: 'http://bd.xt.wenhq.top:8083/geoserver/gwc/service/wmts?REQUEST=GetTile&SERVICE=WMTS&VERSION=1.0.0&LAYER=bdlayers:bdl_cyy_pingmian&STYLE=&TILEMATRIX=EPSG:900913:{z}&TILEMATRIXSET=EPSG:900913&Format=image/jpeg&TILECOL={x}&TILEROW={y}',
-        maxZoom: 22,
+        maxZoom: 24,
         minZoom: 15,
       });
       map.addCustomLayers(vtLayer);
@@ -63,8 +68,7 @@ export default {
       map.addCustomLayers(this.markLayer);
       this.mapIns = map;
       map.setPitch(0);
-      map.setZoom(22);
-      map.setCenter([118.869046506393, 32.0133281708171]);
+      map.setCenter([118.86895,32.01326]);
     },
     show() {
       this.centerDialogVisible = true;
@@ -108,6 +112,10 @@ export default {
       this.locationMarkers[deviceId].moveMarker([longitude, latitude], 2000, false);
     },
     play() {
+      if (!this.mapIns) {
+        return;
+      }
+      this.mapIns.setZoom(22)
       const gps = [
         [118.869125003231, 32.0132579193923],
         [118.869114609672, 32.0132582036815],
@@ -198,7 +206,6 @@ export default {
         }
         i++;
       }, 2000);
-
     },
   },
 };