Browse Source

功能修改

sunzehao 1 tuần trước cách đây
mục cha
commit
6f8286adc3

+ 47 - 15
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();
     },
@@ -1661,18 +1661,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) {
@@ -2038,6 +2038,7 @@ export default {
       if (type !== "windbasic2d") {
         this.windDrawer = true;
         this.windDrawerHeader = val.name + "数据详情";
+        
         if (type === "basic") {
           this.windDrawerTitle = "基础信息";
           this.showBasicMsg = true;
@@ -2049,7 +2050,7 @@ export default {
           this.showProblemMsg = true;
         }
       } else {
-        this.showWindDetail = true;
+        // this.showWindDetail = true;
         this.allStationentitys.forEach(({ entity, handler }) => {
           viewer.entities.remove(entity); // 移除实体
           if (!handler.isDestroyed()) {
@@ -2057,15 +2058,46 @@ export default {
           }
         });
         this.allStationentitys = [];
-        this.showWindFromStation(viewer);
+        // this.showWindFromStation(viewer);
         this.showTypeViewer = false;
         this.cancleAllLayer();
+        this.getCameraPosition(viewer)
       }
       //  else {
       //     this.windDrawerTitle = '模型解构'
       //     this.showModelMsg = true
       // }
     },
+    // 获取当前经纬度和高度并跳转风机详情
+    getCameraPosition(viewer) {
+        const camera = viewer.camera;
+        const ellipsoid = viewer.scene.globe.ellipsoid;
+
+        // 获取相机的笛卡尔坐标
+        const cartesianPosition = camera.position;
+
+        // 转换为地理坐标(弧度)
+        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;                             // 高度(米)
+
+            // return { longitude, latitude, height };
+
+            this.$router.push({
+                path: "/windMap",
+                query: {
+                    longitude: longitude,
+                    latitude: latitude,
+                    height: Math.ceil(height)
+                }
+            });
+        } else {
+            return undefined; // 相机可能在地球之外或无效位置
+        }
+    },
     // 重置风场中所有风机视角
     resetWindViewport() {
       this.viewer.camera.flyTo({

+ 20 - 2
src/views/cesiumComponents/topographicMap.vue

@@ -176,8 +176,10 @@ export default {
         });
 
         const imageryProvider = new Cesium.UrlTemplateImageryProvider({
-            url: this.urlTiles,
-            // url: "https://webst02.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}",
+            // minimumLevel: 11,
+            // maximumLevel: 18,
+            // url: this.urlTiles,
+            url: "https://webst02.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}",
             // url: "http://192.168.2.180:3007/tiles/map/{z}/{x}/{y}",
             credit: "影像地图",
         });
@@ -814,6 +816,22 @@ export default {
     },
     // 重置风场中所有风机视角
     resetWindViewport() {
+        let fromLon = this.$route.query.longitude*1
+        let fromLat = this.$route.query.latitude*1
+        let fromheight = this.$route.query.height*1
+        // 设置镜头到指定的经纬度(度)、高度(米)
+        this.viewer.camera.setView({
+            destination: Cesium.Cartesian3.fromDegrees(
+                fromLon,      // 经度 (degrees)
+                fromLat,       // 纬度 (degrees)
+                fromheight      // 高度 (meters)
+            ),
+            orientation: {
+                heading : Cesium.Math.toRadians(0.0),     // 偏航角 (方向,0 指向北方)
+                pitch : Cesium.Math.toRadians(-90.0),     // 俯仰角 (-90 是垂直向下)
+                roll : 0.0                                // 翻滚角
+            }
+        });
         // 目标位置:经度、纬度、高度
         const targetLon = 114.502778;
         const targetLat = 35.326667;

+ 50 - 7
src/views/cesiumComponents/windView.vue

@@ -1,10 +1,10 @@
 <template>
     <div class="windView">
-        <!-- <aside class="sidebar-left-top">
+        <aside class="sidebar-left-top">
             <div class="stat-block-lefttop" @click="backStations">
                 <p class="label">返回</p>
             </div>
-        </aside> -->
+        </aside>
         <!-- Left Sidebar -->
         <aside class="sidebar-left panel">
             <div class="stat-block">
@@ -37,9 +37,9 @@
             </div>
             <div class="stat-block2">
                 <span class="labels">范围 </span>
-                <span class="values">0.0m/s</span>
-                <span class="valuess"></span>
-                <span class="values">100.0m/s</span>
+                <span class="values">0.0</span><span class="values">{{scopeUnit()}}</span>
+                <span :class="scopeColor()"></span>
+                <span class="values">100.0</span><span class="values">{{scopeUnit()}}</span>
             </div>
             <div class="stat-block2">
                 <span class="labels">高度 </span>
@@ -844,8 +844,31 @@ export default {
         this.findProjectPlan();
     },
     methods: {
+        scopeColor() {
+            if (this.showCover === "风场" || this.showCover === "温度") {
+                return "valuess"
+            } else if (this.showCover === "云层") {
+                return "valuessColund"
+            } else if (this.showCover === "降雨") {
+                return "valuessTemp"
+            } 
+        },
+        scopeUnit() {
+            if (this.showCover === "风场") {
+                return "(m/s)"
+            } else if (this.showCover === "温度") {
+                return "(°C)"
+            } else if (this.showCover === "云层") {
+                return "(%)"
+            } else if (this.showCover === "降雨") {
+                return "(mm)"
+            } 
+        },
         backStations() {
-            this.$emit("backStations")
+            // this.$emit("backStations")
+            this.$router.push({
+                path: "/",
+            });
         },
         valueOnChange(it) {
             this.heightArr.forEach(it => {
@@ -1088,7 +1111,7 @@ export default {
     background: rgba(255, 255, 255, 0.15);
 }
 .sidebar-left{
-    top: 100px;
+    top: 160px;
     width: 260px;
 }
 
@@ -1366,6 +1389,26 @@ export default {
         position: relative; 
         top: 6px;
     }
+    .valuessColund{
+        margin-left: 5px; 
+        display: inline-block; 
+        width: 230px; 
+        height: 10px; 
+        background: 
+        linear-gradient(90deg, rgba(255,255, 255,0), rgb(255,255, 255,1));
+        position: relative; 
+        top: 6px;
+    }
+    .valuessTemp{
+        margin-left: 5px; 
+        display: inline-block; 
+        width: 230px; 
+        height: 10px; 
+        background: 
+        linear-gradient(90deg, rgba(255,255, 255,0), rgb(0, 110, 255));
+        position: relative; 
+        top: 6px;
+    }
     .heightcheck, .covercheck{
         display: inline-block;
         margin-left: 5px;