常规上传

src/views/cesium.vue

@@ -434,7 +434,7 @@ export default {
       // this.setMapImageryProvider();
       this.initCesiumTerrain();
       this.initCesiumBaseMapImage();
-    //   this.switchWindLayer();
+      //   this.switchWindLayer();
       this.showAllStation(viewer, allStationJson.station);
       this.initGeoJsonData();
     },
@@ -477,7 +477,7 @@ export default {
       // this.viewer.imageryLayers.addImageryProvider(imageryProvider);
 
       // this.viewer.scene.globe.depthTestAgainstTerrain = true; //地形遮挡效果开关，打开后 地形会遮挡看不到的区域
-      // this.viewer.scene.globe.enableLighting = true; //对大气和雾启用动态照明效
+      this.viewer.scene.globe.enableLighting = true; //对大气和雾启用动态照明效
     },
 
     // 初始化底图
@@ -928,7 +928,6 @@ export default {
         strokeWidth: 1, // 边界线宽度
         markerSymbol: "?", // 点要素的符号
         clampToGround: true, // 贴地
-        height: 0,
       }).then((dataSource) => {
         // 添加到视图
         this.viewer.dataSources.add(dataSource);
@@ -944,7 +943,23 @@ export default {
             positions: positions,
             width: 2,
             outline: false,
-            clampToGround: true,
+            // clampToGround: true,
+            show: true,
+          };
+
+          entity.wall = {
+            positions: entity.polyline.positions.getValue(
+              Cesium.JulianDate.now()
+            ),
+            // maximumHeights: new Array(
+            //   entity.polyline.positions.getValue(Cesium.JulianDate.now()).length
+            // ).fill(-3000), // 向下30米
+            minimumHeights: new Array(
+              entity.polyline.positions.getValue(Cesium.JulianDate.now()).length
+            ).fill(-50000), // 向下50米
+            material: Cesium.Color.BLACK.withAlpha(0.1),
+            outline: false,
+            // outlineColor: Cesium.Color.WHITE,
           };
         }
 
@@ -1632,18 +1647,18 @@ export default {
 
     // 展示所有风场
     showAllStation(viewer, station) {
-        station.forEach((e, index) => {
-            if (e.energytype === "Wind") {
-            this.showStationFn(viewer, e, index, fc);
-            } else if (e.energytype === "Fire") {
-            this.showStationFn(viewer, e, index, hd);
-            } else if (e.energytype === "Storage") {
-            this.showStationFn(viewer, e, index, chu);
-            } else {
-            this.showStationFn(viewer, e, index, gf);
-            }
-        });
-        this.resetViewport(6000000);
+      station.forEach((e, index) => {
+        if (e.energytype === "Wind") {
+          this.showStationFn(viewer, e, index, fc);
+        } else if (e.energytype === "Fire") {
+          this.showStationFn(viewer, e, index, hd);
+        } else if (e.energytype === "Storage") {
+          this.showStationFn(viewer, e, index, chu);
+        } else {
+          this.showStationFn(viewer, e, index, gf);
+        }
+      });
+      this.resetViewport(6000000);
     },
     // 根据状态展示不同颜色风机贴图
     async showStationFn(viewer, e, index, images) {
@@ -2010,7 +2025,7 @@ export default {
       if (type !== "windbasic2d" && type !== "windbasic3d") {
         this.windDrawer = true;
         this.windDrawerHeader = val.name + "数据详情";
-        
+
         if (type === "basic") {
           this.windDrawerTitle = "基础信息";
           this.showBasicMsg = true;
@@ -2033,7 +2048,7 @@ export default {
         // this.showWindFromStation(viewer);
         this.showTypeViewer = false;
         this.cancleAllLayer();
-        this.getCameraPosition(viewer, type)
+        this.getCameraPosition(viewer, type);
       }
       //  else {
       //     this.windDrawerTitle = '模型解构'
@@ -2042,33 +2057,34 @@ export default {
     },
     // 获取当前经纬度和高度并跳转风机详情
     getCameraPosition(viewer, type) {
-        const camera = viewer.camera;
-        const ellipsoid = viewer.scene.globe.ellipsoid;
+      const camera = viewer.camera;
+      const ellipsoid = viewer.scene.globe.ellipsoid;
 
-        // 获取相机的笛卡尔坐标
-        const cartesianPosition = camera.position;
+      // 获取相机的笛卡尔坐标
+      const cartesianPosition = camera.position;
 
-        // 转换为地理坐标（弧度）
-        const cartographicPosition = ellipsoid.cartesianToCartographic(cartesianPosition);
+      // 转换为地理坐标（弧度）
+      const cartographicPosition =
+        ellipsoid.cartesianToCartographic(cartesianPosition);
 
-        if (cartographicPosition) {
-            const longitude = Cesium.Math.toDegrees(cartographicPosition.longitude); // 经度（度）
-            const latitude = Cesium.Math.toDegrees(cartographicPosition.latitude);   // 纬度（度）
-            const height = cartographicPosition.height;                             // 高度（米）
+      if (cartographicPosition) {
+        const longitude = Cesium.Math.toDegrees(cartographicPosition.longitude); // 经度（度）
+        const latitude = Cesium.Math.toDegrees(cartographicPosition.latitude); // 纬度（度）
+        const height = cartographicPosition.height; // 高度（米）
 
-            // return { longitude, latitude, height };
+        // return { longitude, latitude, height };
 
-            this.$router.push({
-                path: type ==="windbasic2d" ? "/windMap2D" : "/windMap3D",
-                query: {
-                    longitude: longitude,
-                    latitude: latitude,
-                    height: Math.ceil(height)
-                }
-            });
-        } else {
-            return undefined; // 相机可能在地球之外或无效位置
-        }
+        this.$router.push({
+          path: type === "windbasic2d" ? "/windMap2D" : "/windMap3D",
+          query: {
+            longitude: longitude,
+            latitude: latitude,
+            height: Math.ceil(height),
+          },
+        });
+      } else {
+        return undefined; // 相机可能在地球之外或无效位置
+      }
     },
     // 重置风场中所有风机视角
     resetWindViewport() {

src/views/cesiumComponents/windMap3D.vue

@@ -1,4 +1,7 @@
 <template>
+    <div id="loading" class="dataLoading" v-if="loading">
+        <span class="loadText">数据加载中...</span>
+    </div>
   <div class="mapBox">
     <div id="cesiumContainer" style="width: 100%; height: 100vh"></div>
     <div :class="!menuComTStyB ? 'menuComTSty' : 'menuComT'" v-if="0">
@@ -124,6 +127,7 @@ export default {
   },
   data() {
     return {
+        loading: true,
       viewer: null,
       windLayer: null, // 风场图
       windLayerTimmer: null, // 风场图计时器
@@ -156,6 +160,9 @@ export default {
   },
   mounted() {
     this.initCesium();
+    setTimeout(() =>{
+        this.loading = false
+    }, 1000)
   },
   methods: {
     async initCesium() {
@@ -330,30 +337,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 +352,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 +379,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 +388,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 +434,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 +709,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 +735,7 @@ export default {
             // },
             orientation: {
                 heading: 0, //北京天安门角度 0 上海角度 1
-                pitch: -0.2,
+                pitch: -0.3,
                 roll: 0,
             },
             duration: 3.0,
@@ -1285,6 +1161,25 @@ export default {
 </script>
 
 <style lang="less" scoped>
+.dataLoading {
+    width: 100vw;
+    height: 100vh;
+    background: rgba(0, 0, 0, 0.5);
+    z-index: 999;
+    position: fixed;
+    .loadText{
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+        background: rgba(255, 255, 255, 0.7);
+        padding: 15px 20px;
+        border-radius: 6px;
+        color: black;
+        font-size: 14px;
+        font-weight: bold;
+    }
+  }
 .mapBox {
   width: 100%;
   height: 100%;