3d页面修改

src/views/cesiumComponents/windMap3D.vue

@@ -330,30 +330,13 @@ export default {
     // 展示所选风场的风机
     showWindFromStation(viewer) {
         fjLonLatJson.data.forEach((e, index) => {
-            if (e.status) {
-                if (e.status === 1) {
-                    this.showStatuswind(viewer, e, dj)
-                } else if (e.status === 2) {
-                    this.showStatuswind(viewer, e, gz)
-                } else if (e.status === 3) {
-                    this.showStatuswind(viewer, e, jx)
-                } else if (e.status === 4) {
-                    this.showStatuswind(viewer, e, xd)
-                } else if (e.status === 5) {
-                    this.showStatuswind(viewer, e, lx)
-                } else if (e.status === 6) {
-                    this.showStatuswind(viewer, e, sl)
-                } else {
-                    //并网风机
-                    this.showAnimatewind(viewer, e)
-                }
-            }
+            this.showStatuswind(viewer, e)
         });
         this.resetWindViewport()
     },
     // 根据状态展示不同颜色风机贴图
     showStatuswind(viewer, e, type, index) {
-        this.addSvg(
+        this.addModel(
             viewer,
             type,
             e.longitude,
@@ -362,49 +345,26 @@ export default {
             Math.random().toFixed(4)*10000
         );
     },
-    // 风机柱与扇叶分开展示转动效果贴图
-    showAnimatewind(viewer, e, index) {
-        this.addSvgs(
-            viewer,
-            bwshan,
-            e.longitude,
-            e.latitude,
-            e,
-            Math.random().toFixed(3)*1000
-        );
-        this.addSvg(
-            viewer,
-            bwzhu,
-            e.longitude,
-            e.latitude,
-            e,
-            Math.random().toFixed(3)*2000
-        );
-    },
-
-    // 生成随机数
-    randomNum(minNum, maxNum) {
-      switch (arguments.length) {
-        case 1:
-          return parseInt(Math.random() * minNum + 1, 10);
-        case 2:
-          return parseInt(Math.random() * (maxNum - minNum + 1) + minNum, 10);
-        default:
-          return 0;
-      }
-    },
     //给模型上描边
     getWtStatue(code) {
-      if (code === 1) {
-        return "#fff";
-      } else if (code === 2) {
-        return "#1890ff";
-      } else {
-        return "#f25656";
+      if (code === 1) { //待机
+        return "#05bb4c";
+      } else if (code === 2) { //故障
+        return "#d83238";
+      } else if (code === 3) { //检修
+        return "#ff8300";
+      } else if (code === 4) { //限电
+        return "#c732ca";
+      } else if (code === 5) { //离线
+        return "#6f7881";
+      } else if (code === 6) { //受累
+        return "#cbd1d7";
+      } else {//并网
+        return "#42a7f9";
       }
     },
     //添加模型
-    addModel(viewer, uri, name, lon, lat, scale, val) {
+    addModel(viewer, name, lon, lat, val) {
       const hpRoll = new Cesium.HeadingPitchRoll(90.0, 0.0, 0.0);
       const position = Cesium.Cartesian3.fromDegrees(lon, lat);
       const orientation = Cesium.Transforms.headingPitchRollQuaternion(
@@ -412,7 +372,7 @@ export default {
         hpRoll
       );
 
-      const wtStatue = this.randomNum(1, 3);
+      const wtStatue = val.status
       const statueColor = this.getWtStatue(wtStatue);
 
       const entity = viewer.entities.add({
@@ -421,32 +381,22 @@ export default {
         orientation, // 模型朝向
         animation: false,
         model: {
-          uri,
-          scale,
+          uri: "/public/static/model/fjSolo/model.glb",
+          scale: 0.7,
           // 模型贴地
           heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
           silhouetteSize: 2,
           silhouetteColor: Cesium.Color.fromCssColorString(statueColor),
-          runAnimations: wtStatue === 3 ? false : true,
+          runAnimations: wtStatue !== 7 ? false : true,
         },
         //添加标签
         label: {
-          text: val ? val.name : name, // 标签文字
-          font: "14px sans-serif", // 字体
-          fillColor: Cesium.Color.fromBytes(255, 255, 255), // 填充颜色
-          outlineColor: Cesium.Color.BLACK, // 描边颜色
-          outlineWidth: 2, // 描边宽度
-          style: Cesium.LabelStyle.FILL_AND_OUTLINE, // 填充+描边
-          verticalOrigin: Cesium.VerticalOrigin.BOTTOM, // 文本在模型上方
-          horizontalOrigin: Cesium.HorizontalOrigin.CENTER, // 水平居中
-          eyeOffset: new Cesium.Cartesian3(-100, 1100, 5), // 向上 15 米
-          translucencyByDistance: new Cesium.NearFarScalar(
-            1.0e6,
-            1.0,
-            6.0e6,
-            0.0
-          ),
-        },
+            text: val.name ? val.name : val.plantname,
+            font: '14px sans-serif',
+            fillColor: Cesium.Color.fromBytes(255, 255, 255),
+            heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
+            pixelOffset: val.name === 'F10号风机' ? new Cesium.Cartesian2(40, -20) : new Cesium.Cartesian2(0, 10)
+        }
       });
       let that = this;
       // 创建事件处理器
@@ -477,90 +427,6 @@ export default {
         }
       }, Cesium.ScreenSpaceEventType.RIGHT_CLICK);
     },
-    //添加svg或png贴图
-    addSvg(viewer, uri, lon, lat, val, index) {
-        let that = this;
-        let ids = that.generateUniqueId(val.id)
-        const position = Cesium.Cartesian3.fromDegrees(lon, lat);
-        const entity = viewer.entities.add({
-            id: ids,
-            position, // 模型位置
-            billboard: {
-                image: uri, // 也可以是 SVG 路径，如 'icon.svg'
-                scale: 0.5,
-                verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
-                horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
-                // 模型贴地
-                heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
-            },
-            label: {
-                text: val.name ? val.name : val.plantname,
-                font: '14px sans-serif',
-                fillColor: Cesium.Color.fromBytes(255, 255, 255),
-                heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
-                pixelOffset: val.name === 'F10号风机' ? new Cesium.Cartesian2(40, -20) : new Cesium.Cartesian2(0, 0)
-            }
-        });
-        // 创建事件处理器
-        const handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
-        handler.setInputAction(function (movement) {
-            var position = movement.position;
-            var pickedObject = viewer.scene.pick(position);
-            if (pickedObject && pickedObject.id.id === ids) {
-                console.log("你点击了标签或模型！", entity);
-                console.log("标签或模型数据！", val);
-                that.modelVal = val;
-                // 找到实体，显示包含实体信息的弹框
-                that.showRightClickPopup(position, val);
-                return;
-            }
-        }, Cesium.ScreenSpaceEventType.RIGHT_CLICK);
-        this.allWindEntitys.push({entity, handler})
-    },
-    //添加svg或png贴图
-    addSvgs(viewer, uri, lon, lat, val, index) {
-      let that = this;
-      let ids = that.generateUniqueId(val.id)
-      const position = Cesium.Cartesian3.fromDegrees(lon, lat);
-      const entity = viewer.entities.add({
-        id: ids,
-        position, // 模型位置
-        billboard: {
-            image: uri, // 也可以是 SVG 路径，如 'icon.svg'
-            scale: 0.5,
-            pixelOffset: new Cesium.Cartesian2(0, -15),
-            verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
-            horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
-            // 模型贴地
-            heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
-            // 核心：使用 CallbackProperty 实现旋转动画
-            rotation: new Cesium.CallbackProperty(function(time) {
-            // 每 3 秒转一圈（可调速度）
-            const seconds = time.secondsOfDay;
-            const angle = Cesium.Math.toRadians((seconds % 3) * -360 / 3); // 每3秒一圈
-            return angle;
-            }, false),
-            // 确保绕中心旋转
-            rotationAlignment: Cesium.HeightReference.CENTER,
-            alignedAxis: Cesium.Cartesian3.UNIT_Z
-        }
-      });
-        // 创建事件处理器
-        const handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
-        handler.setInputAction(function (movement) {
-            var position = movement.position;
-            var pickedObject = viewer.scene.pick(position);
-            if (pickedObject && pickedObject.id.id === ids) {
-                console.log("你点击了标签或模型！", entity);
-                console.log("标签或模型数据！", val);
-                that.modelVal = val;
-                // 找到实体，显示包含实体信息的弹框
-                that.showRightClickPopup(position, val);
-                return;
-            }
-        }, Cesium.ScreenSpaceEventType.RIGHT_CLICK)
-        this.allWindEntitys.push({entity, handler})
-    },
     // 右键展示元素
     showRightClickPopup(screenPosition, val) {
       // 创建或获取弹框元素
@@ -836,22 +702,25 @@ export default {
         // 目标位置：经度、纬度、高度
         const targetLon = 114.502778;
         const targetLat = 35.326667;
-        const targetHeight = 20000;
+        const targetHeight = 10000;
 
-        const draggableHeightTolerance = 10000; // 允许拖拽的高度范围：20,000 ~ 30,000
-        const minHeight = 10000;   // 最低高度
+        const draggableHeightTolerance = 5000; // 允许拖拽的高度范围：20,000 ~ 30,000
+        const minHeight = 5000;   // 最低高度
         const maxHeight = 800000;  // 最高高度
 
-        const allowedOffsetDegrees = 0.2; // 允许拖拽的最大偏移（经纬度）
+        const allowedOffsetDegrees = 2; // 允许拖拽的最大偏移（经纬度）
+
+        const Lat3d = targetLat - 0.3;
 
         const minLon = targetLon - allowedOffsetDegrees;
         const maxLon = targetLon + allowedOffsetDegrees;
-        const minLat = targetLat - allowedOffsetDegrees;
-        const maxLat = targetLat + allowedOffsetDegrees;
+        const minLat = Lat3d - allowedOffsetDegrees;
+        const maxLat = Lat3d + allowedOffsetDegrees;
+
 
         let that = this
         that.viewer.camera.flyTo({
-            destination: Cesium.Cartesian3.fromDegrees(targetLon,targetLat, targetHeight),
+            destination: Cesium.Cartesian3.fromDegrees(targetLon,Lat3d, targetHeight),
             // orientation: {
             //     heading: Cesium.Math.toRadians(0),
             //     pitch: Cesium.Math.toRadians(-90),
@@ -859,7 +728,7 @@ export default {
             // },
             orientation: {
                 heading: 0, //北京天安门角度 0 上海角度 1
-                pitch: -0.2,
+                pitch: -0.3,
                 roll: 0,
             },
             duration: 3.0,

src/views/cesiumComponents/windView.vue

@@ -37,9 +37,9 @@
             </div>
             <div class="stat-block2">
                 <span class="labels">范围 </span>
-                <span class="values">0.0</span><span class="values">{{scopeUnit()}}</span>
+                <span class="values">{{scopeNumMin()}}</span><span class="values">{{scopeUnit()}}</span>
                 <span :class="scopeColor()"></span>
-                <span class="values">100.0</span><span class="values">{{scopeUnit()}}</span>
+                <span class="values">{{scopeNumMax()}}</span><span class="values">{{scopeUnit()}}</span>
             </div>
             <div class="stat-block2">
                 <span class="labels">高度 </span>
@@ -864,6 +864,28 @@ export default {
                 return "(mm)"
             } 
         },
+        scopeNumMin() {
+            if (this.showCover === "风场") {
+                return "0.0"
+            } else if (this.showCover === "温度") {
+                return "-12"
+            } else if (this.showCover === "云层") {
+                return "0.0"
+            } else if (this.showCover === "降雨") {
+                return "0.0"
+            } 
+        },
+        scopeNumMax() {
+            if (this.showCover === "风场") {
+                return "25.0"
+            } else if (this.showCover === "温度") {
+                return "40"
+            } else if (this.showCover === "云层") {
+                return "100.0"
+            } else if (this.showCover === "降雨") {
+                return "50"
+            } 
+        },
         backStations() {
             // this.$emit("backStations")
             this.$router.push({