常规上传

src/views/cesiumComponents/windMap3D.vue

@@ -190,6 +190,7 @@ export default {
       entityxyArray: [],
       isFakeData: false,
       fakeDataTimmer: null,
+      isFirstAdd: true,
     };
   },
   mounted() {
@@ -198,6 +199,10 @@ export default {
       this.loading = false;
     }, 1000);
   },
+  unmounted() {
+    clearInterval(this.fakeDataTimmer);
+    this.fakeDataTimmer = null;
+  },
   methods: {
     async initCesium() {
       const box = document.getElementById("cesiumContainer");
@@ -525,35 +530,62 @@ export default {
 
           this.fakeDataTimmer = setInterval(() => {
             // viewer.entities.removeAll();
-          }, 5000);
+
+            fjLonLatJson.data.forEach((e) => {
+              let fjItem =
+                wtArray.find((findEle) => {
+                  return findEle.fjbh === e.fjbh;
+                }) || {};
+              const fjMix = Object.assign({}, e, fjItem);
+              fjMix.status = this.getStatus(fjMix.fjzt);
+              e = fjMix;
+
+              this.changeZb(e);
+            });
+          }, 1000);
         },
       });
 
       webSocketService.on("message", (res) => {
         if (stationName === "MYFDC") {
-          fjLonLatJson = fjMYLonLatJson;
+          fjLonLatJson = JSON.parse(JSON.stringify(fjMYLonLatJson));
         } else if (stationName === "JNWHZ") {
-          fjLonLatJson = fjWHZLonLatJson;
+          fjLonLatJson = JSON.parse(JSON.stringify(fjWHZLonLatJson));
         } else if (stationName === "JNYPL") {
-          fjLonLatJson = fjYPLLonLatJson;
+          fjLonLatJson = JSON.parse(JSON.stringify(fjYPLLonLatJson));
         } else if (stationName === "JNSMS") {
-          fjLonLatJson = fjSMSLonLatJson;
+          fjLonLatJson = JSON.parse(JSON.stringify(fjSMSLonLatJson));
         }
 
-        let wtArray = res.windMachineList;
+        let wtArray = JSON.parse(JSON.stringify(res.windMachineList));
 
-        fjLonLatJson.data.forEach((e, index) => {
+        if (this.isFirstAdd) {
+          fjLonLatJson.data.forEach((e) => {
+            let fjItem =
+              wtArray.find((findEle) => {
+                return findEle.fjbh === e.fjbh;
+              }) || {};
+            const fjMix = Object.assign({}, e, fjItem);
+            fjMix.status = this.getStatus(fjMix.fjzt);
+            e = fjMix;
+
+            this.showStatuswind(viewer, e);
+          });
+        }
+
+        this.fjLonLatJsonArr = fjLonLatJson;
+        this.isFirstAdd = false;
+
+        fjLonLatJson.data.forEach((e) => {
           let fjItem =
             wtArray.find((findEle) => {
               return findEle.fjbh === e.fjbh;
             }) || {};
           const fjMix = Object.assign({}, e, fjItem);
+          fjMix.status = this.getStatus(fjMix.fjzt);
           e = fjMix;
-
-          this.showStatuswind(viewer, e);
+          this.changeZb(e);
         });
-
-        this.fjLonLatJsonArr = fjLonLatJson;
       });
 
       this.resetWindViewport();
@@ -605,6 +637,7 @@ export default {
         e
       );
     },
+
     //给模型上描边
     getWtStatue(code, type) {
       if (code === 1) {
@@ -637,6 +670,7 @@ export default {
         return type === "color" ? "#42a7f9" : type === "en" ? "bw" : "并网";
       }
     },
+
     addTreeain(viewer, mountainMsg) {
       const hpRoll = new Cesium.HeadingPitchRoll(90.0, 0.0, 0.0);
       const position = Cesium.Cartesian3.fromDegrees(
@@ -823,38 +857,92 @@ export default {
           return findEle.fjbh === model.fjbh;
         }) || null;
 
-      if (entityxy) {
-        entityxy.billboard.image._value = billboardImage;
-      } else {
-        entityxy = viewer.entities.add({
-          name,
-          position,
-          billboard: {
-            image: billboardImage,
-            scale: 1,
-            verticalOrigin: Cesium.VerticalOrigin.BOTTOM, // 原来已经是CENTER，现在改为BOTTOM
-            pixelOffset: new Cesium.Cartesian2(80, -50), // 原来是-20，现在改为30，向上移动
-            eyeOffset: new Cesium.Cartesian3(0, 0, 0), // 保持固定大小
-            heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
-            scaleByDistance: new Cesium.NearFarScalar(
-              6000, // 5010米内
-              1.2, // 1倍大小
-              9000, // 10000米外
-              1 // 0.1倍大小
-            ),
+      entityxy = viewer.entities.add({
+        name,
+        position,
+        billboard: {
+          image: billboardImage,
+          scale: 1,
+          verticalOrigin: Cesium.VerticalOrigin.BOTTOM, // 原来已经是CENTER，现在改为BOTTOM
+          pixelOffset: new Cesium.Cartesian2(80, -50), // 原来是-20，现在改为30，向上移动
+          eyeOffset: new Cesium.Cartesian3(0, 0, 0), // 保持固定大小
+          heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
+          scaleByDistance: new Cesium.NearFarScalar(
+            6000, // 5010米内
+            1.2, // 1倍大小
+            9000, // 10000米外
+            1 // 0.1倍大小
+          ),
+
+          // 透明度渐变
+          // translucencyByDistance: new Cesium.NearFarScalar(
+          //   6000, // 500米内
+          //   1.0, // 完全不透明
+          //   9000, // 3000米外
+          //   0.5 // 完全透明
+          // ),
+        },
+      });
 
-            // 透明度渐变
-            // translucencyByDistance: new Cesium.NearFarScalar(
-            //   6000, // 500米内
-            //   1.0, // 完全不透明
-            //   9000, // 3000米外
-            //   0.5 // 完全透明
-            // ),
-          },
-        });
+      entityxy.fjbh = model.fjbh;
+      this.entityxyArray.push(entityxy);
+    },
+
+    changeZb(model) {
+      // 使用高级灯牌生成器
+      const advancedGenerator = new AdvancedBillboardGenerator();
 
-        entityxy.fjbh = model.fjbh;
-        this.entityxyArray.push(entityxy);
+      let statusItems = [
+        {
+          label: "功率",
+          value: `${
+            this.isFakeData
+              ? this.randomNum(100, 1000)
+              : model.actualPower.toFixed(2)
+          }MW`,
+        },
+        {
+          label: "风速",
+          value: `${
+            this.isFakeData
+              ? this.randomNum(100, 1000)
+              : model.windSpeed.toFixed(1)
+          }m/s`,
+        },
+        {
+          label: "转速",
+          value: `${
+            this.isFakeData
+              ? this.randomNum(100, 1000)
+              : model.rotateSpeed.toFixed(1)
+          }p`,
+        },
+      ];
+
+      const billboardImage = advancedGenerator.generateAdvancedBillboard({
+        title: model.fjbh,
+        statusItems,
+        borderGradient: ["#ccc", "#ccc"],
+        backgroundColor: "transparent",
+        padding: 6,
+        titleHeight: 22,
+        itemHeight: 17,
+        titleColor: "#1890ff",
+        titleStrokeStyle: "#000",
+        titleStrokeWidth: 1,
+        labelStrokeStyle: "#000",
+        labelStrokeWidth: 1,
+        valueStrokeStyle: "#000",
+        valueStrokeWidth: 1,
+      });
+
+      let entityxy =
+        this.entityxyArray.find((findEle) => {
+          return findEle.fjbh === model.fjbh;
+        }) || null;
+
+      if (entityxy) {
+        entityxy.billboard.image._value = billboardImage;
       }
     },