首页路况图层定时刷新 30s

wj-smartcity/src/utils/mapboxTools.js

@@ -13,13 +13,15 @@ function createTriangleIcon(color) {
     context.fill();
     return canvas.toDataURL();
 }
-export function convertPointsToGeo(arr){
+
+export function convertPointsToGeo(arr) {
     let features = []
-  for(let item of arr){
-      features.push(turf.point([item.longitude,item.latitude],item))
+    for (let item of arr) {
+        features.push(turf.point([item.longitude, item.latitude], item))
     }
     return turf.featureCollection(features)
 }
+
 export function addOrUpdateSelectVehicleTrack(map, geo) {
     if (!map.getSource("selectVehicleTrack")) {
         map.addSource("selectVehicleTrack", {
@@ -398,6 +400,58 @@ export function addOrUpdateRoadVector(map) {
             },
         });
     }
+    let timer = setInterval(() => {
+        // 1. 清除重新创建
+        // if (map) {
+        //     if (map.getLayer('vector_road_layer')) {
+        //         map.removeLayer('vector_road_layer')
+        //     }
+        //     if (map.getSource('vector_road')) {
+        //         map.removeSource('vector_road')
+        //     }
+        //     setTimeout(() => {
+        //         if (!map.getSource("vector_road")) {
+        //             map.addSource("vector_road", {
+        //                 type: "vector",
+        //                 tiles: [map_config.VECTOR_ROAD],
+        //             });
+        //         }
+        //         if (!map.getLayer("vector_road_layer")) {
+        //             map.addLayer({
+        //                 id: "vector_road_layer",
+        //                 source: "vector_road",
+        //                 "source-layer": "line-layer",
+        //                 type: "line",
+        //                 layout: {
+        //                     "line-join": "round",
+        //                     "line-cap": "round",
+        //                 },
+        //                 paint: {
+        //                     "line-width": 3,
+        //                     "line-color": [
+        //                         "match",
+        //                         ["get", "status"],
+        //                         "1",
+        //                         "green",
+        //                         "2",
+        //                         "yellow",
+        //                         "3",
+        //                         "orange",
+        //                         "4",
+        //                         "red",
+        //                         "green",
+        //                     ],
+        //                 },
+        //             });
+        //         }
+        //     }, 0)
+        // }
+        // 2. 只更新source
+        if (map?.getSource("vector_road")) {
+            map.getSource("vector_road").reload()
+        }
+    }, 1000 * 30)
+    return timer
 }
 
 // 更新选中车辆底部闪动波纹
@@ -1173,7 +1227,7 @@ export function addOrUpdateFlowLineArrow(map, json) {
                 turf.point(item.lineArray[1])
             );
             features.push(
-        turf.point([item.endLng, item.endLat], { ...item, angle: angle })
+                turf.point([item.endLng, item.endLat], {...item, angle: angle})
             );
         }
     }
@@ -1533,10 +1587,12 @@ export const vehicleWave = {
     },
 };
 import Vue from "vue";
-import { Message } from "element-ui";
+import {Message} from "element-ui";
 import eventPopupVue from "@/views/signal/mapPopup/eventPopup.vue";
+
 const EventPopupVue = Vue.extend(eventPopupVue);
 let popupEvent = null;
+
 export function addPopupEvent(map, prop) {
     popupEvent?.remove();
     if (prop.lng && prop.lat) {

wj-smartcity/src/views/signal/index.vue

 <template>
   <div class="full-w-h">
-    <wMap :mapId="'situation-map'" ref="wMap" />
+    <wMap :mapId="'situation-map'" ref="wMap"/>
     <msgs :clickCrossData="clickCrossData" :isCrossDetail="isCrossDetail" v-if="!loading"
           @showCrossStatus="showCrossStatus" @openCrossIndexDetail="openCrossIndexDetail" @showPolygon="showPolygon"
           @openGreenWaveDialog="openGreenWaveDialog" :show="boxesShow"></msgs>
     <div :class="boxesShow ? '' : 'hideBackToMain'" @click="backToMain" v-if="isCrossDetail" class="backToMain"></div>
     <!--切换图层 收起放开侧边栏-->
     <layers-switch ref="switch" :show="boxesShow" @changeCheck="changeCheck" @visibleChange="visibleChange"
-      :class="boxesShow ? 'generalSwitch' : 'rightSwitch'" />
+                   :class="boxesShow ? 'generalSwitch' : 'rightSwitch'"/>
     <!--路口指标详情弹窗-->
     <cross-detail :cross-detail-data="crossData" dialogId="crossDetailShow" v-if="dialogVisible.crossDetailShow"
-      @actionFinished="actionFinished" />
+                  @actionFinished="actionFinished"/>
     <!--路口绿波信息弹窗-->
     <green-wave :greenId="greenId" :waveTitle="waveTitle" dialogId="greenWaveShow" v-if="dialogVisible.greenWaveShow"
-      @actionFinished="actionFinished" />
+                @actionFinished="actionFinished"/>
     <!--设备图例控制-->
-    <equipment-switch :boxesShow="boxesShow" @equipmentChange="equipmentChange" v-if="currentCheck === 'fourth'" />
+    <equipment-switch :boxesShow="boxesShow" @equipmentChange="equipmentChange" v-if="currentCheck === 'fourth'"/>
   </div>
 </template>
 
@@ -28,7 +28,7 @@ import mapAssets from "@/config/holo/mapAssets";
 import CrossDetail from "@/views/signal/dialogs/crossDetail.vue";
 import GreenWave from "@/views/signal/dialogs/greenWave/index.vue";
 import * as mapTool from "@/utils/mapboxTools";
-import { initWs } from "@/config/holo/websocket";
+import {initWs} from "@/config/holo/websocket";
 import equipmentPopup from "./mapPopup/equipmentPopup.vue";
 import dict from "../../config/holo/dictionary";
 import vehicleDetail from "./mapPopup/vehicleDetail.vue";
@@ -39,6 +39,7 @@ import {
   equip_camera,
   equip_radar,
 } from "../../dao/situation";
+
 const EquipmentPopup = Vue.extend(equipmentPopup);
 const VehiclePopup = Vue.extend(vehicleDetail);
 
@@ -63,10 +64,11 @@ export default {
     msgs,
     EquipmentSwitch,
   },
-  mixins:[lightMixin],
+  mixins: [lightMixin],
   computed: {},
   data() {
     return {
+      roadTimer: null,
       currentCheck: "first",
       timer: null,
       licenseState: false,
@@ -77,7 +79,7 @@ export default {
       clickCrossData: {},
       isCrossDetail: false,
       loading: true,
-      crossData: { id: "", name: "" },
+      crossData: {id: "", name: ""},
       waveTitle: "",
       boxesShow: true,
       detailShow: false,
@@ -200,7 +202,8 @@ export default {
           map.loadImage(mapAssets.lightIcons[key], (error, image) => {
             if (map && !map.hasImage(key)) map.addImage(key, image);
           });
-        };
+        }
+        ;
         window.tb = new Threebox(map, map.getCanvas().getContext("webgl"), {
           defaultLights: true,
           realSunlight: true,
@@ -220,7 +223,7 @@ export default {
                 type: "gltf",
                 units: "meters",
                 scale: 0.8,
-                adjustment: { x: 0.5, y: 1, z: -0.5 },
+                adjustment: {x: 0.5, y: 1, z: -0.5},
                 bbox: true,
               };
               window.tb.loadObj(options, (model) => {
@@ -234,7 +237,7 @@ export default {
           },
         });
         map.addControl(
-          new mapboxgl.NavigationControl({ showZoom: false }),
+            new mapboxgl.NavigationControl({showZoom: false}),
             "bottom-right"
         );
         map.on("dblclick", () => {
@@ -306,7 +309,7 @@ export default {
         });
       }
       model.setCoords([options.longitude, options.latitude]);
-      model.setRotation({ x: 90, y: 360 - options.courseAngle - 90, z: 0 });
+      model.setRotation({x: 90, y: 360 - options.courseAngle - 90, z: 0});
       model.userData.data = options;
     },
     clearLicense() {
@@ -632,7 +635,7 @@ export default {
           topMargin: 2,
         });
         license.setCoords([option.longitude, option.latitude, 4]);
-        license.userData.data = { picLicense: option.picLicense };
+        license.userData.data = {picLicense: option.picLicense};
         window.tb.add(license, `license${option.id}`);
         licenseLabel[`license${option.id}`] = license;
       }
@@ -759,7 +762,7 @@ export default {
       });
     },
     openCrossIndexDetail(crossData) {
-      this.showRightDetail({ features: [{ properties: crossData }] });
+      this.showRightDetail({features: [{properties: crossData}]});
       // this.crossData = crossData
       // this.dialogVisible.crossDetailShow = true
     },
@@ -796,7 +799,8 @@ export default {
       });
     },
     switchsecond() {
-      mapTool.addOrUpdateRoadVector(map);
+      // 返回刷新定时器 供页面销毁
+      this.roadTimer = mapTool.addOrUpdateRoadVector(map);
     },
     switchfourth() {
       Promise.all([
@@ -845,7 +849,7 @@ export default {
               distance = 80;
             }
             let bearing = map.getBearing(); // 平移方向，0 表示正北方向
-            let options = { units: "meters" };
+            let options = {units: "meters"};
             let translatedPoint = turf.destination(
                 prop.wkt.split(","),
                 distance,
@@ -869,7 +873,7 @@ export default {
                 .addClassName("equipmentPopup");
             equipPopupInstance = new EquipmentPopup({
               propsData: {
-                model: { equip_type: type, ...prop },
+                model: {equip_type: type, ...prop},
               },
             });
             equipPopupInstance.$mount("#equipment_popup");
@@ -908,6 +912,9 @@ export default {
           equipPopup?.remove();
           map.off("click", this.equipmentsClick);
         }
+        if (beforeLabel === 'second') {
+          if (this.roadTimer) clearInterval(this.roadTimer)
+        }
         for (let key in this.layers) {
           if (key !== checkItem.label) {
             for (let layer of this.layers[key]) {
@@ -923,6 +930,7 @@ export default {
     },
   },
   beforeDestroy() {
+    if (this.roadTimer) clearInterval(this.roadTimer)
     this.timer && clearInterval(this.timer);
     this.closeAllWs()
     window.tb.dispose();