功能修改

src/router/index.js

@@ -36,7 +36,7 @@ const routes = [
     },
     //风机地图页面
     {
-        path: '/topographicMap',
+        path: '/windMap',
         name: 'topographicMap',
         component: () => import('../views/cesiumComponents/topographicMap.vue')
     },

src/views/cesiumComponents/topographicMap.vue

@@ -149,7 +149,8 @@ export default {
       showWindDetail: true,
       allStationentitys: [],
       allWindEntitys: [],
-      showWeather: false
+      showWeather: false,
+      urlTiles: "/public/static/tiles/{z}/{x}/{y}.jpg"
     };
   },
   mounted() {
@@ -175,7 +176,8 @@ export default {
         });
 
         const imageryProvider = new Cesium.UrlTemplateImageryProvider({
-            url: "https://webst02.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}",
+            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: "影像地图",
         });
@@ -193,83 +195,6 @@ export default {
         this.showWindFromStation(viewer)
         this.initGeoJsonData()
     },
-    //限制相机在区域内活动
-    allowedRectangleFn(viewer) {
-        // 定义允许的区域范围（WGS84 坐标，单位：度）
-        const allowedRectangle = Cesium.Rectangle.fromDegrees(
-            113.9,   // west
-            34.8,    // south
-            115,    // east
-            35.7     // north
-        );
-        // viewer.scene.preUpdate.addEventListener(function(scene, time) {
-        // const camera = viewer.camera;
-        // const position = camera.positionCartographic;
-
-        // if (position) {
-        //     const lon = Cesium.Math.toDegrees(position.longitude);
-        //     const lat = Cesium.Math.toDegrees(position.latitude);
-
-        //     // 判断是否越界
-        //     if (lon < allowedRectangle.west || lon > allowedRectangle.east ||
-        //         lat < allowedRectangle.south || lat > allowedRectangle.north) {
-            
-        //     // 获取当前视角方向，用于保持高度和朝向
-        //     const height = position.height;
-        //     let targetLon = Cesium.Math.clamp(lon, allowedRectangle.west, allowedRectangle.east);
-        //     let targetLat = Cesium.Math.clamp(lat, allowedRectangle.south, allowedRectangle.north);
-
-        //     // camera.flyTo({
-        //     //     destination: Cesium.Cartesian3.fromDegrees(targetLon, targetLat, height),
-        //     //     duration: 0.1, // 可以设置轻微动画，更自然
-        //     //     maximumHeight: height,
-        //     //     complete: function() {
-        //     //     // 防止连续触发
-        //     //     }
-        //     // });
-        //     }
-        // }
-        // });
-        viewer.camera.changed.addEventListener(function() {
-            const cameraPositionCartographic = viewer.camera.positionCartographic;
-            
-            // 检查相机是否在允许的区域内
-            if (cameraPositionCartographic) {
-                const lon = Cesium.Math.toDegrees(cameraPositionCartographic.longitude);
-                const lat = Cesium.Math.toDegrees(cameraPositionCartographic.latitude);
-
-                let corrected = false;
-                let correctedLon = lon;
-                let correctedLat = lat;
-
-                // 限制经度
-                if (lon < allowedRectangle.west) {
-                correctedLon = allowedRectangle.west;
-                corrected = true;
-                } else if (lon > allowedRectangle.east) {
-                correctedLon = allowedRectangle.east;
-                corrected = true;
-                }
-
-                // 限制纬度
-                if (lat < allowedRectangle.south) {
-                correctedLat = allowedRectangle.south;
-                corrected = true;
-                } else if (lat > allowedRectangle.north) {
-                correctedLat = allowedRectangle.north;
-                corrected = true;
-                }
-
-                // 如果超出范围，将相机位置纠正
-                if (corrected) {
-                viewer.camera.flyTo({
-                    destination: Cesium.Cartesian3.fromDegrees(correctedLon, correctedLat, cameraPositionCartographic.height),
-                    duration: 0 // 立即跳转，无动画
-                });
-                }
-            }
-        })
-    },
     // 初始化 geoJson 数据
     async initGeoJsonData() {
       // 创建GeoJSON数据源

src/views/cesiumComponents/windView.vue

@@ -23,6 +23,78 @@
             
         </aside>
         <aside class="sidebar-left2 panel" v-if="showWindStatus">
+            <div class="stat-block2" v-if="showWeather">
+                <span class="labels">数据 </span>
+                <span class="values">{{showCover}} @ {{showHeight}}hpa </span>
+            </div>
+            <div class="stat-block2" v-if="showWeather">
+                <span class="labels">模式 </span>
+                <span class="covercheck">
+                    <el-check-tag v-for="(it, index) in windmodelArr" :key="index" type="primary"
+                    :disabled="it.disabled"
+                     :checked="it.check">{{it.value}}</el-check-tag>
+                </span>
+            </div>
+            <div class="stat-block2" v-if="showWeather">
+                <span class="labels">范围 </span>
+                <span class="values">0.0m/s</span>
+                <span class="valuess"></span>
+                <span class="values">100.0m/s</span>
+            </div>
+            <div class="stat-block2" v-if="showWeather">
+                <span class="labels">高度 </span>
+                <span class="values">地表 </span>
+                <span class="heightcheck">
+                    <el-check-tag v-for="(it, index) in heightArr" :key="index" type="primary"
+                     :checked="it.check" @change="valueOnChange(it)">{{it.value}}</el-check-tag>
+                </span>
+                <span class="values">hpa </span>
+            </div>
+            <div class="stat-block2" v-if="showWeather">
+                <span class="labels">覆盖模式 </span>
+                <span class="covercheck">
+                    <el-check-tag v-for="(it, index) in coverArr" :key="index" type="primary"
+                    :disabled="it.disabled"
+                     :checked="it.check" @change="coverOnChange(it)">{{it.value}}</el-check-tag>
+                </span>
+            </div>
+            <div class="stat-block2">
+                <span class="labels">
+                    <span style="font-size: 15px; color: #6c757d;font-weight: 600;position: relative;top:20px">场站类型</span>
+                </span>
+                <div style="display: flex;width:405px">
+                    <div class="windStatus">
+                        <img :src="bw" style="width:60px;height:60px;">
+                        <p class="values windVal">并网</p>
+                    </div>
+                    <div class="windStatus">
+                        <img :src="dj" style="width:60px;height:60px;">
+                        <p class="values windVal">待机</p>
+                    </div>
+                    <div class="windStatus">
+                        <img :src="gz" style="width:60px;height:60px;">
+                        <p class="values windVal">故障</p>
+                    </div>
+                    <div class="windStatus">
+                        <img :src="jx" style="width:60px;height:60px;">
+                        <p class="values windVal">检修</p>
+                    </div>
+                    <div class="windStatus">
+                        <img :src="xd" style="width:60px;height:60px;">
+                        <p class="values windVal">限电</p>
+                    </div>
+                    <div class="windStatus">
+                        <img :src="lx" style="width:60px;height:60px;">
+                        <p class="values windVal">离线</p>
+                    </div>
+                    <div class="windStatus">
+                        <img :src="sl" style="width:60px;height:60px;">
+                        <p class="values windVal">受累</p>
+                    </div>
+                </div>
+            </div>
+        </aside>
+        <!-- <aside class="sidebar-left2 panel" v-if="showWindStatus">
             <div v-if="showWeather">
                 <span class="labels">覆盖模式 </span>
                 <div class="stat-block">
@@ -66,7 +138,7 @@
                     </div>
                 </div>
             </div>
-        </aside>
+        </aside> -->
         <!-- Right Sidebar -->
         <aside class="sidebar-right panel">
             <div class="info-section">
@@ -648,6 +720,48 @@ export default {
             xd,
             lx,
             sl,
+            windmodelArr: [
+                {
+                    value: "大气层",
+                    check: false,
+                    disabled: true
+                },
+                {
+                    value: "地表层",
+                    check: true
+                },
+            ],
+            showHeight: 1000,
+            heightArr: [
+                {
+                    value: 1000,
+                    check: true
+                },
+                {
+                    value: 850,
+                    check: false
+                },
+                {
+                    value: 700,
+                    check: false
+                },
+                {
+                    value: 500,
+                    check: false
+                },
+                {
+                    value: 250,
+                    check: false
+                },
+                {
+                    value: 70,
+                    check: false
+                },
+                {
+                    value: 10,
+                    check: false
+            }],
+            showCover: "风场",
             coverArr: [
                 {
                     value: "风场",
@@ -713,6 +827,13 @@ export default {
         backStations() {
             this.$emit("backStations")
         },
+        valueOnChange(it) {
+            this.heightArr.forEach(it => {
+                it.check = false
+            })
+            it.check = true
+            this.showHeight = it.value
+        },
         coverOnChange(itv) {
             this.coverArr.forEach(it => {
                 if (itv === it) {
@@ -930,33 +1051,6 @@ export default {
     box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.08);
     padding: 20px;
 }
-.sidebar-left2{
-    position: absolute;
-    left: 20px;
-    bottom: 20px;
-    width: 450px;
-    .labels{
-        font-size: 16px;
-        font-weight: bold;
-    }
-    .windStatus{
-        display: flex;
-        flex-direction: column;
-        .windVal{
-            position:relative;
-            top: 5px; 
-            left: 10px;
-        }
-    }
-    .covercheck{
-        display: inline-block;
-        width: 100%;
-        .el-check-tag{
-            margin: 0 5px 3px 0;
-            padding: 5px 8px;
-        }
-    }
-}
 
 /* --- Left Sidebar --- */
 .sidebar-left, .sidebar-left-top {
@@ -1182,6 +1276,75 @@ export default {
       }
     }
 }
+.sidebar-left2{
+    position: absolute;
+    left: 20px;
+    bottom: 20px;
+    width: 500px;
+    .windStatus{
+        display: flex;
+        flex-direction: column;
+        .windVal{
+            position:relative;
+            top: 5px; 
+            left: 10px;
+        }
+    }
+    .covercheck{
+        display: inline-block;
+        width: 100%;
+        .el-check-tag{
+            margin: 0 5px 3px 0;
+            padding: 5px 8px;
+        }
+    }
+}
+.stat-block2 {
+    margin-bottom: 10px;
+    display: flex;
+    .labels { 
+        font-size: 15px; 
+        color: #6c757d; 
+        width: 40px;
+        font-weight: 600;
+        display: block;
+        border-right: 2px solid #6c757d; 
+    }
+    .values { 
+        font-size: 15px; 
+        font-weight: 600; 
+        color: #4b55ae;
+        margin-left: 8px; 
+    }
+    .valuess{ 
+        margin-left: 5px; 
+        display: inline-block; 
+        width: 230px; 
+        height: 10px; 
+        background: 
+        linear-gradient(90deg, rgb(36,104, 180), rgb(60,157, 194), rgb(151,218,168), rgb(198,231,181), rgb(238,247,217),
+        rgb(255,238,159), rgb(252,217,125), rgb(255,182,100), rgb(252,150,75), rgb(250,112,52), rgb(245,64,32), 
+        rgb(237,45,28), rgb(220,24,32), rgb(180,0,35));
+        position: relative; 
+        top: 6px;
+    }
+    .heightcheck, .covercheck{
+        display: inline-block;
+        margin-left: 5px;
+        .el-check-tag{
+            padding: 5px 8px;
+            margin-right: 3px;
+        }
+    }
+    .covercheck{
+        width: 380px;
+        margin-left: 5px;
+        .el-check-tag{
+            margin: 0 2px 3px 0;
+            margin-right: 5px;
+        }
+    }
+}
 
 /* --- Bottom Bar --- */
 .bottom-bar {