常规上传

src/tools/lightsign.js

@@ -4,7 +4,7 @@ export default class AdvancedBillboardGenerator {
   }
 
   // 生成高级灯牌
-  generateAdvancedBillboard(data) {
+  generateAdvancedBillboard(options) {
     const {
       title,
       statusItems = [],
@@ -14,9 +14,18 @@ export default class AdvancedBillboardGenerator {
       titleColor = "#4fc3f7",
       valueColor = "#00ff88",
       labelColor = "#b3e5fc",
-    } = data;
-
-    const cacheKey = JSON.stringify(data);
+      padding = 8,
+      titleHeight = 30,
+      itemHeight = 25,
+      titleStrokeStyle = "#000",
+      titleStrokeWidth = 0,
+      labelStrokeStyle = "#000",
+      labelStrokeWidth = 0,
+      valueStrokeStyle = "#000",
+      valueStrokeWidth = 0,
+    } = options;
+
+    const cacheKey = JSON.stringify(options);
     if (this.cache.has(cacheKey)) {
       return this.cache.get(cacheKey);
     }
@@ -26,9 +35,9 @@ export default class AdvancedBillboardGenerator {
     canvas.width = width;
 
     // 计算高度
-    const titleHeight = 30;
-    const itemHeight = 25;
-    const padding = 8;
+    // const titleHeight = 30;
+    // const itemHeight = 25;
+    // const padding = 8;
     const height = titleHeight + statusItems.length * itemHeight + padding * 2;
     canvas.height = height;
 
@@ -45,6 +54,14 @@ export default class AdvancedBillboardGenerator {
     ctx.fillStyle = titleColor;
     ctx.font = "bold 14px sans-serif";
     ctx.textAlign = "center";
+
+    // 绘制描边
+    if (titleStrokeWidth > 0) {
+      ctx.strokeStyle = titleStrokeStyle;
+      ctx.lineWidth = titleStrokeWidth;
+      ctx.strokeText(title, width / 2, padding + 14);
+    }
+
     ctx.fillText(title, width / 2, padding + 14);
 
     // 绘制状态项
@@ -55,12 +72,28 @@ export default class AdvancedBillboardGenerator {
       ctx.fillStyle = labelColor;
       ctx.font = "12px sans-serif";
       ctx.textAlign = "left";
+
+      // 绘制 label 描边
+      if (labelStrokeWidth > 0) {
+        ctx.strokeStyle = labelStrokeStyle;
+        ctx.lineWidth = labelStrokeWidth;
+        ctx.strokeText(item.label, padding, y + 12);
+      }
+
       ctx.fillText(item.label + ":", padding, y + 12);
 
       // 值
       ctx.fillStyle = valueColor;
       ctx.font = "bold 12px sans-serif";
       ctx.textAlign = "right";
+
+      // 绘制 value 描边
+      if (valueStrokeWidth > 0) {
+        ctx.strokeStyle = valueStrokeStyle;
+        ctx.lineWidth = valueStrokeWidth;
+        ctx.strokeText(item.value, width - padding, y + 12);
+      }
+
       ctx.fillText(item.value, width - padding, y + 12);
     });
 
@@ -125,7 +158,8 @@ export default class AdvancedBillboardGenerator {
       ctx.strokeStyle = color;
       ctx.lineWidth = lineWidth;
       ctx.stroke();
-    } else {
+    }
+    else {
       ctx.fillStyle = color;
       ctx.fill();
     }

src/views/cesiumComponents/windMap2D.vue

@@ -456,31 +456,53 @@ export default {
         // { label: "其他参数F", value: "...." },
       ];
 
-      //   for (let i = 0; i <= this.randomNum(1, 9); i++) {
-      //     statusItems.push(statusArray[i]);
-      //   }
       statusItems = statusArray;
 
-      console.log("statusItems====>>>>", statusItems);
-
-    //   const billboardImage = advancedGenerator.generateAdvancedBillboard({
-    //     title: val.name,
-    //     statusItems,
-    //     borderGradient: ["#00e5ff", "#2979ff"],
-    //   });
-
-    //   const entityxy = viewer.entities.add({
-    //     name: val.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.NONE,
-    //     },
-    //   });
+      const billboardImage = advancedGenerator.generateAdvancedBillboard({
+        title: val.name,
+        statusItems,
+        // borderGradient: ["#00e5ff", "#2979ff"],
+        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,
+      });
+
+      const entityxy = viewer.entities.add({
+        name: val.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.NONE,
+          // 近大远小
+          scaleByDistance: new Cesium.NearFarScalar(
+            6000, // 5010米内
+            1.2, // 1倍大小
+            9000, // 10000米外
+            0.5 // 0.1倍大小
+          ),
+
+          // 透明度渐变
+          translucencyByDistance: new Cesium.NearFarScalar(
+            6000, // 500米内
+            1.0, // 完全不透明
+            9000, // 3000米外
+            0.5 // 完全透明
+          ),
+        },
+      });
 
       const btn = document.getElementById("windBtn");
 
@@ -497,7 +519,7 @@ export default {
           verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
           horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
           // 模型贴地
-        //   heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
+          //   heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
         },
         // label: {
         //     // text: val.name ? val.name : val.plantname,
@@ -524,6 +546,7 @@ export default {
       }, Cesium.ScreenSpaceEventType.RIGHT_CLICK);
       this.allWindEntitys.push({ entity, handler });
     },
+
     randomNum(minNum, maxNum) {
       switch (arguments.length) {
         case 1:
@@ -534,6 +557,7 @@ export default {
           return 0;
       }
     },
+
     //添加svg或png贴图
     addSvgs(viewer, uri, lon, lat, val, index) {
       let that = this;
@@ -549,7 +573,7 @@ export default {
           verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
           horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
           // 模型贴地
-        //   heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
+          //   heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
           // 核心：使用 CallbackProperty 实现旋转动画
           rotation: new Cesium.CallbackProperty(function (time) {
             // 每 3 秒转一圈（可调速度）
@@ -895,9 +919,9 @@ export default {
         },
         duration: 3.0,
         complete: function () {
-            console.log('飞入完成，启用拖拽限制逻辑');
-            enableHeightBasedDragControl();
-        }
+          console.log("飞入完成，启用拖拽限制逻辑");
+          enableHeightBasedDragControl();
+        },
       });
       // ===== 控制逻辑：根据高度决定是否允许拖拽 =====
       function enableHeightBasedDragControl() {

src/views/cesiumComponents/windMap3D.vue

@@ -637,6 +637,16 @@ export default {
         title: name,
         statusItems,
         borderGradient: ["#00e5ff", "#2979ff"],
+        padding: 6,
+        titleHeight: 22,
+        itemHeight: 17,
+        titleColor: "#1890ff",
+        titleStrokeStyle: "#000",
+        titleStrokeWidth: 1,
+        labelStrokeStyle: "#000",
+        labelStrokeWidth: 1,
+        valueStrokeStyle: "#000",
+        valueStrokeWidth: 1,
       });
 
       const entityxy = viewer.entities.add({
@@ -649,6 +659,20 @@ export default {
           pixelOffset: new Cesium.Cartesian2(80, -50), // 原来是-20，现在改为30，向上移动
           eyeOffset: new Cesium.Cartesian3(0, 0, 0), // 保持固定大小
           heightReference: Cesium.HeightReference.NONE,
+          scaleByDistance: new Cesium.NearFarScalar(
+            6000, // 5010米内
+            1.2, // 1倍大小
+            9000, // 10000米外
+            0.5 // 0.1倍大小
+          ),
+
+          // 透明度渐变
+          translucencyByDistance: new Cesium.NearFarScalar(
+            6000, // 500米内
+            1.0, // 完全不透明
+            9000, // 3000米外
+            0.5 // 完全透明
+          ),
         },
       });
 

src/views/cesiumComponents/windView.vue

@@ -1290,11 +1290,11 @@ export default {
   position: absolute;
   left: 20px;
 }
-.btnms1{
-    left: 20px;
+.btnms1 {
+  left: 20px;
 }
-.btnms2{
-    left: 90px;
+.btnms2 {
+  left: 90px;
 }
 .sidebar-left-top {
   top: 110px;
@@ -1700,6 +1700,22 @@ export default {
       /* 傍晚 - 橙色 */ #6a3093 90%,
       /* 夜晚 - 深紫色 */ #0a1931 100% /* 凌晨4点 - 深蓝色 */
     );
+    // background: linear-gradient(
+    //   to right,
+    //   #0d1b2a 0%,
+    //   /* 22:00 - 深夜 */ #1b263b 8.33%,
+    //   /* 00:00 */ #1b263b 16.67%,
+    //   /* 02:00 */ #415a77 25%,
+    //   /* 04:00 - 黎明前 */ #778da9 33.33%,
+    //   /* 06:00 - 清晨 */ #a8c0e0 41.67%,
+    //   /* 08:00 */ #d4e4f7 50%,
+    //   /* 10:00 */ #ffffff 58.33%,
+    //   /* 12:00 - 正午 */ #ffffff 66.67%,
+    //   /* 14:00 */ #fff9e6 75%,
+    //   /* 16:00 */ #ffd89b 83.33%,
+    //   /* 18:00 - 黄昏 */ #b4846c 91.67%,
+    //   /* 20:00 */ #0d1b2a 100% /* 22:00 */
+    // );
   }
 
   .el-slider__bar {