|
|
@@ -1,7 +1,7 @@
|
|
|
<template>
|
|
|
<div class="mapBox">
|
|
|
<div id="cesiumContainer" style="width: 100%; height: 100vh"></div>
|
|
|
- <div :class="!menuComTStyB ? 'menuComTSty' : 'menuComT'">
|
|
|
+ <div :class="!menuComTStyB ? 'menuComTSty' : 'menuComT'" v-if="0">
|
|
|
<menuCom
|
|
|
:showbasemap="false"
|
|
|
:showwindspeed="false"
|
|
|
@@ -37,11 +37,14 @@
|
|
|
<windHome :modelValItem="modelVal" />
|
|
|
</div>
|
|
|
<div class="spjk" v-if="showVideoMsg">
|
|
|
- <iframe
|
|
|
- src="https://www.bilibili.com/video/BV1421DYCELw?t=12.1"
|
|
|
+ <!-- <iframe
|
|
|
+ src="/public/static/windVideo.mp4"
|
|
|
frameborder="0"
|
|
|
style="width: 100%; height: 100%"
|
|
|
- ></iframe>
|
|
|
+ ></iframe> -->
|
|
|
+ <video ref="videoPlayer" controls width="95%">
|
|
|
+ <source src="/public/static/windVideo.mp4" type="video/mp4" />
|
|
|
+ </video>
|
|
|
</div>
|
|
|
<div class="gzck" v-if="showProblemMsg">
|
|
|
<windPro />
|
|
|
@@ -60,7 +63,8 @@
|
|
|
:modelVal="modelVal"
|
|
|
@showDia="showComDia"
|
|
|
/>
|
|
|
- <windView v-if="showWindDetail" @showDetail="menuComTSty" @backStations="backStations" />
|
|
|
+ <windView v-if="showWindDetail" :showWeather="showWeather" @coverOnChange="coverOnChange"
|
|
|
+ @showDetail="menuComTSty" @backStations="backStations" />
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
@@ -74,6 +78,10 @@ import comModelDialog from "@/components/comModelDialog.vue";
|
|
|
import windView from "./windView.vue";
|
|
|
import menuCom from "../menuCom.vue";
|
|
|
|
|
|
+import cloudJson from "/public/static/exportData/cloud/layer.json";
|
|
|
+import rainJson from "/public/static/exportData/rain/layer.json";
|
|
|
+import tempJson from "/public/static/exportData/tmp/layer.json";
|
|
|
+
|
|
|
// import bw from "@/assets/windimgs/fanSvg/bw.svg"
|
|
|
//风场展示图标
|
|
|
import fc from "@/assets/windimgs/fanSvg/fc.png"
|
|
|
@@ -81,8 +89,19 @@ import fc from "@/assets/windimgs/fanSvg/fc.png"
|
|
|
import hd from "@/assets/windimgs/fanSvg/hd.png"
|
|
|
//光伏电站展示图标
|
|
|
import gf from "@/assets/windimgs/fanSvg/gf.png"
|
|
|
+
|
|
|
+//故障
|
|
|
+import gz from "@/assets/windimgs/fanSvg/gz.svg"
|
|
|
//待机
|
|
|
import dj from "@/assets/windimgs/fanSvg/dj.svg"
|
|
|
+//检修
|
|
|
+import jx from "@/assets/windimgs/fanSvg/jx.svg"
|
|
|
+//限电
|
|
|
+import xd from "@/assets/windimgs/fanSvg/xd.svg"
|
|
|
+//离线
|
|
|
+import lx from "@/assets/windimgs/fanSvg/lx.svg"
|
|
|
+//受累
|
|
|
+import sl from "@/assets/windimgs/fanSvg/sl.svg"
|
|
|
//动图使用柱子和扇叶
|
|
|
import bwzhu from "@/assets/windimgs/fanSvg/bwzhu.svg"
|
|
|
import bwshan from "@/assets/windimgs/fanSvg/bwshan.png"
|
|
|
@@ -90,6 +109,9 @@ import bwshan from "@/assets/windimgs/fanSvg/bwshan.png"
|
|
|
import windHome from "@/components/windHome/index.vue";
|
|
|
import windPro from "@/components/windProDetail/windProblem.vue";
|
|
|
import ModelUnpack from "@/components/modelUnpack.vue";
|
|
|
+
|
|
|
+import { WindLayer } from "cesium-wind";
|
|
|
+import windGridData from "./windGridData.json";
|
|
|
export default {
|
|
|
components: {
|
|
|
comModelDialog,
|
|
|
@@ -102,6 +124,17 @@ export default {
|
|
|
data() {
|
|
|
return {
|
|
|
viewer: null,
|
|
|
+ windLayer: null, // 风场图
|
|
|
+ windLayerTimmer: null, // 风场图计时器
|
|
|
+ cloudImagesLayer: [], // 卫星云图
|
|
|
+ cloudLayer: null, // 卫星云图
|
|
|
+ cloudintervalId: null,
|
|
|
+ rainImagesLayer: [], // 降雨图
|
|
|
+ rainLayer: null, // 降雨图
|
|
|
+ rainintervalId: null, // 降雨图
|
|
|
+ tempImagesLayer: [], //温度图
|
|
|
+ temperatureLayer: null, //温度图
|
|
|
+ tempintervalId: null, //温度图
|
|
|
showcomModelDia: false,
|
|
|
modelVal: null,
|
|
|
menuComTStyB: false,
|
|
|
@@ -113,9 +146,11 @@ export default {
|
|
|
showVideoMsg: false,
|
|
|
showProblemMsg: false,
|
|
|
showModelMsg: false,
|
|
|
- showWindDetail: false,
|
|
|
+ showWindDetail: true,
|
|
|
allStationentitys: [],
|
|
|
- allWindEntitys: []
|
|
|
+ allWindEntitys: [],
|
|
|
+ showWeather: false,
|
|
|
+ urlTiles: "/public/static/tiles/{z}/{x}/{y}.jpg"
|
|
|
};
|
|
|
},
|
|
|
mounted() {
|
|
|
@@ -141,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: "影像地图",
|
|
|
});
|
|
|
@@ -153,7 +189,10 @@ export default {
|
|
|
viewer._cesiumWidget._creditContainer.style.display = "none";
|
|
|
// this.csceneElliposid(viewer)
|
|
|
this.viewer = viewer;
|
|
|
- this.showAllStation(viewer)
|
|
|
+ // 展示场站
|
|
|
+ // this.showAllStation(viewer)
|
|
|
+ // 展示风机
|
|
|
+ this.showWindFromStation(viewer)
|
|
|
this.initGeoJsonData()
|
|
|
},
|
|
|
// 初始化 geoJson 数据
|
|
|
@@ -291,9 +330,20 @@ export default {
|
|
|
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)
|
|
|
}
|
|
|
- } else {
|
|
|
- this.showAnimatewind(viewer, e)
|
|
|
}
|
|
|
});
|
|
|
this.resetWindViewport()
|
|
|
@@ -445,6 +495,7 @@ export default {
|
|
|
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)
|
|
|
}
|
|
|
});
|
|
|
// 创建事件处理器
|
|
|
@@ -483,7 +534,7 @@ export default {
|
|
|
rotation: new Cesium.CallbackProperty(function(time) {
|
|
|
// 每 3 秒转一圈（可调速度）
|
|
|
const seconds = time.secondsOfDay;
|
|
|
- const angle = Cesium.Math.toRadians((seconds % 3) * 360 / 3); // 每3秒一圈
|
|
|
+ const angle = Cesium.Math.toRadians((seconds % 3) * -360 / 3); // 每3秒一圈
|
|
|
return angle;
|
|
|
}, false),
|
|
|
// 确保绕中心旋转
|
|
|
@@ -763,15 +814,439 @@ export default {
|
|
|
},
|
|
|
// 重置风场中所有风机视角
|
|
|
resetWindViewport() {
|
|
|
- this.viewer.camera.flyTo({
|
|
|
- destination: Cesium.Cartesian3.fromDegrees(114.502778,35.326667, 20000),
|
|
|
- orientation: {
|
|
|
- heading: Cesium.Math.toRadians(0),
|
|
|
- pitch: Cesium.Math.toRadians(-90),
|
|
|
- roll: 0.0,
|
|
|
- },
|
|
|
- duration: 3.0,
|
|
|
+ // 目标位置：经度、纬度、高度
|
|
|
+ const targetLon = 114.502778;
|
|
|
+ const targetLat = 35.326667;
|
|
|
+ const targetHeight = 20000;
|
|
|
+
|
|
|
+ const draggableHeightTolerance = 10000; // 允许拖拽的高度范围：18,000 ~ 22,000
|
|
|
+ const minHeight = 10000; // 最低高度
|
|
|
+ const maxHeight = 800000; // 最高高度
|
|
|
+
|
|
|
+ const allowedOffsetDegrees = 0.2; // 允许拖拽的最大偏移（经纬度）
|
|
|
+
|
|
|
+ const minLon = targetLon - allowedOffsetDegrees;
|
|
|
+ const maxLon = targetLon + allowedOffsetDegrees;
|
|
|
+ const minLat = targetLat - allowedOffsetDegrees;
|
|
|
+ const maxLat = targetLat + allowedOffsetDegrees;
|
|
|
+
|
|
|
+ let that = this
|
|
|
+ that.viewer.camera.flyTo({
|
|
|
+ destination: Cesium.Cartesian3.fromDegrees(targetLon,targetLat, targetHeight),
|
|
|
+ orientation: {
|
|
|
+ heading: Cesium.Math.toRadians(0),
|
|
|
+ pitch: Cesium.Math.toRadians(-90),
|
|
|
+ roll: 0.0,
|
|
|
+ },
|
|
|
+ duration: 3.0,
|
|
|
+ complete: function () {
|
|
|
+ console.log('飞入完成，启用拖拽限制逻辑');
|
|
|
+ enableHeightBasedDragControl();
|
|
|
+ }
|
|
|
+ });
|
|
|
+ // ===== 控制逻辑：根据高度决定是否允许拖拽 =====
|
|
|
+ function enableHeightBasedDragControl() {
|
|
|
+ that.viewer.scene.preUpdate.addEventListener(function (scene, time) {
|
|
|
+ const camera = that.viewer.camera;
|
|
|
+ const posCartographic = camera.positionCartographic;
|
|
|
+
|
|
|
+ if (!posCartographic) return;
|
|
|
+
|
|
|
+ const currentHeight = posCartographic.height;
|
|
|
+ const currentLon = Cesium.Math.toDegrees(posCartographic.longitude);
|
|
|
+ const currentLat = Cesium.Math.toDegrees(posCartographic.latitude);
|
|
|
+
|
|
|
+ // === 第一步：限制相机高度不能超出 [10000, 100000] ===
|
|
|
+ if (currentHeight < minHeight) {
|
|
|
+ // 强制拉高到 minHeight，但保持当前水平视角
|
|
|
+ const newPos = Cesium.Cartesian3.fromDegrees(currentLon, currentLat, minHeight);
|
|
|
+ camera.setView({
|
|
|
+ destination: newPos,
|
|
|
+ orientation: {
|
|
|
+ heading: camera.heading,
|
|
|
+ pitch: camera.pitch,
|
|
|
+ roll: camera.roll
|
|
|
+ }
|
|
|
+ });
|
|
|
+ return; // 避免后续逻辑冲突
|
|
|
+ }
|
|
|
+
|
|
|
+ if (currentHeight > maxHeight) {
|
|
|
+ that.showWeather = true
|
|
|
+ const newPos = Cesium.Cartesian3.fromDegrees(currentLon, currentLat, maxHeight);
|
|
|
+ camera.setView({
|
|
|
+ destination: newPos,
|
|
|
+ orientation: {
|
|
|
+ heading: camera.heading,
|
|
|
+ pitch: camera.pitch,
|
|
|
+ roll: camera.roll
|
|
|
+ }
|
|
|
+ });
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ if (currentHeight < (maxHeight-1000)) {
|
|
|
+ that.showWeather = false
|
|
|
+ that.cancleAllLayer();
|
|
|
+ }
|
|
|
+
|
|
|
+ // === 第二步：判断是否在“可拖拽高度区间” ===
|
|
|
+ const isInDraggableRange =
|
|
|
+ currentHeight >= (targetHeight - draggableHeightTolerance) &&
|
|
|
+ currentHeight <= (targetHeight + draggableHeightTolerance);
|
|
|
+
|
|
|
+ if (isInDraggableRange) {
|
|
|
+ // ✅ 允许拖拽，但限制在指定范围内
|
|
|
+ const correctedLon = Cesium.Math.clamp(currentLon, minLon, maxLon);
|
|
|
+ const correctedLat = Cesium.Math.clamp(currentLat, minLat, maxLat);
|
|
|
+
|
|
|
+ if (Math.abs(correctedLon - currentLon) > 1e-8 ||
|
|
|
+ Math.abs(correctedLat - currentLat) > 1e-8) {
|
|
|
+ // 越界了，纠正位置，保留当前高度和视角
|
|
|
+ camera.setView({
|
|
|
+ destination: Cesium.Cartesian3.fromDegrees(correctedLon, correctedLat, currentHeight),
|
|
|
+ orientation: {
|
|
|
+ heading: camera.heading,
|
|
|
+ pitch: camera.pitch,
|
|
|
+ roll: camera.roll
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ // ❌ 不在可拖拽高度：禁止平移，强制回正到目标点
|
|
|
+ const correctedPosition = Cesium.Cartesian3.fromDegrees(
|
|
|
+ targetLon,
|
|
|
+ targetLat,
|
|
|
+ currentHeight // 保留当前缩放高度
|
|
|
+ );
|
|
|
+
|
|
|
+ camera.setView({
|
|
|
+ destination: correctedPosition,
|
|
|
+ orientation: {
|
|
|
+ heading: camera.heading,
|
|
|
+ pitch: camera.pitch,
|
|
|
+ roll: camera.roll
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+ },
|
|
|
+ coverOnChange(val) {
|
|
|
+ if (val.value === "风场") {
|
|
|
+ this.switchWindLayer(val.check);
|
|
|
+ } else if (val.value === "云层") {
|
|
|
+ this.switchCloudLayer(val.check);
|
|
|
+ } else if (val.value === "降雨") {
|
|
|
+ this.switchRainLayer(val.check);
|
|
|
+ } else if (val.value === "温度") {
|
|
|
+ this.switchTemperatureLayerr(val.check);
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 提供控制函数以便在需要时停止循环
|
|
|
+ stopCycling(intervalId) {
|
|
|
+ if (intervalId) {
|
|
|
+ clearInterval(intervalId);
|
|
|
+ intervalId = null;
|
|
|
+ console.log("循环已停止");
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 切换风场图显隐
|
|
|
+ switchWindLayer() {
|
|
|
+ this.viewer.scene.screenSpaceCameraController.enableZoom = true;
|
|
|
+ if (this.rainLayer || this.rainImagesLayer.length > 0) {
|
|
|
+ this.removeRainLayer();
|
|
|
+ this.stopCycling(this.rainintervalId);
|
|
|
+ }
|
|
|
+ if (this.cloudLayer || this.cloudImagesLayer.length > 0) {
|
|
|
+ this.removeCloudLayer();
|
|
|
+ this.stopCycling(this.cloudintervalId);
|
|
|
+ }
|
|
|
+ if (this.temperatureLayer || this.tempImagesLayer.length > 0) {
|
|
|
+ this.removeTemperatureLayer();
|
|
|
+ this.stopCycling(this.tempintervalId);
|
|
|
+ }
|
|
|
+ if (this.windLayer) {
|
|
|
+ this.removeWindLayer();
|
|
|
+ } else {
|
|
|
+ this.showWindLayer();
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 添加风场图
|
|
|
+ async showWindLayer() {
|
|
|
+ if (!this.windLayer) {
|
|
|
+ this.windLayer = new WindLayer(windGridData, {
|
|
|
+ particleSize: 2.0,
|
|
|
+ particleOpacity: 0.6,
|
|
|
+ particleSpeed: 0.01,
|
|
|
+ maxVelocity: 25,// 风速最大值（用于颜色映射和速度缩放）
|
|
|
+ minVelocity: 0, // 风速最小值阈值（低于此值不显示粒子）
|
|
|
+ colorScale: [
|
|
|
+ "rgb(36,104, 180)",
|
|
|
+ "rgb(60,157, 194)",
|
|
|
+ "rgb(128,205,193)",
|
|
|
+ "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)",
|
|
|
+ ],// 颜色强度缩放
|
|
|
+ frameRate: 15,
|
|
|
+ fadeOpacity: 0.995,
|
|
|
+ particleAge: 150,
|
|
|
+ maxAge: 60,
|
|
|
+ globalAlpha: 0.8,
|
|
|
+ velocityScale: 1 / 30,// 粒子移动速度缩放因子（控制动画快慢）
|
|
|
+ paths: 1000,
|
|
|
+ lineWidth: 2,
|
|
|
+ });
|
|
|
+ this.windLayer.addTo(this.viewer);
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ // 切换卫星云图显隐
|
|
|
+ switchCloudLayer(val) {
|
|
|
+ if (this.windLayer) {
|
|
|
+ this.removeWindLayer();
|
|
|
+ }
|
|
|
+ if (this.rainLayer || this.rainImagesLayer.length > 0) {
|
|
|
+ this.removeRainLayer();
|
|
|
+ this.stopCycling(this.rainintervalId);
|
|
|
+ }
|
|
|
+ if (this.temperatureLayer || this.tempImagesLayer.length > 0) {
|
|
|
+ this.removeTemperatureLayer();
|
|
|
+ this.stopCycling(this.tempintervalId);
|
|
|
+ }
|
|
|
+ if (!val || this.cloudLayer || this.cloudImagesLayer.length > 0) {
|
|
|
+ this.removeCloudLayer();
|
|
|
+ this.stopCycling(this.cloudintervalId);
|
|
|
+ } else {
|
|
|
+ this.showCloudLayer();
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 切换降雨图显隐
|
|
|
+ switchRainLayer() {
|
|
|
+ this.viewer.scene.screenSpaceCameraController.enableZoom = true;
|
|
|
+ if (this.windLayer) {
|
|
|
+ this.removeWindLayer();
|
|
|
+ }
|
|
|
+ if (this.cloudLayer || this.cloudImagesLayer.length > 0) {
|
|
|
+ this.removeCloudLayer();
|
|
|
+ this.stopCycling(this.cloudintervalId);
|
|
|
+ }
|
|
|
+ if (this.temperatureLayer || this.tempImagesLayer.length > 0) {
|
|
|
+ this.removeTemperatureLayer();
|
|
|
+ this.stopCycling(this.tempintervalId);
|
|
|
+ }
|
|
|
+ if (this.rainLayer || this.rainImagesLayer.length > 0) {
|
|
|
+ this.removeRainLayer();
|
|
|
+ this.stopCycling(this.rainintervalId);
|
|
|
+ } else {
|
|
|
+ this.showRainLayer();
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 切换温度图显隐
|
|
|
+ switchTemperatureLayerr() {
|
|
|
+ this.viewer.scene.screenSpaceCameraController.enableZoom = true;
|
|
|
+ if (this.windLayer) {
|
|
|
+ this.removeWindLayer();
|
|
|
+ }
|
|
|
+ if (this.cloudLayer || this.cloudImagesLayer.length > 0) {
|
|
|
+ this.removeCloudLayer();
|
|
|
+ this.stopCycling(this.cloudintervalId);
|
|
|
+ }
|
|
|
+ if (this.rainLayer || this.rainImagesLayer.length > 0) {
|
|
|
+ this.removeRainLayer();
|
|
|
+ this.stopCycling(this.rainintervalId);
|
|
|
+ }
|
|
|
+ if (this.temperatureLayer || this.tempImagesLayer.length > 0) {
|
|
|
+ this.removeTemperatureLayer();
|
|
|
+ this.stopCycling(this.tempintervalId);
|
|
|
+ } else {
|
|
|
+ this.showTemperatureLayer();
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 显示云图
|
|
|
+ showCloudLayer() {
|
|
|
+ const imageUrls = [];
|
|
|
+ cloudJson.forEach((it) => {
|
|
|
+ imageUrls.push("/public/static" + it.path);
|
|
|
});
|
|
|
+ this.showeveryTypeImagesLayer(
|
|
|
+ imageUrls,
|
|
|
+ this.cloudintervalId,
|
|
|
+ this.cloudImagesLayer
|
|
|
+ );
|
|
|
+ },
|
|
|
+ //显示降雨图
|
|
|
+ showRainLayer() {
|
|
|
+ const imageUrls = [];
|
|
|
+ rainJson.forEach((it) => {
|
|
|
+ imageUrls.push("/public/static" + it.path);
|
|
|
+ });
|
|
|
+ this.showeveryTypeImagesLayer(
|
|
|
+ imageUrls,
|
|
|
+ this.rainintervalId,
|
|
|
+ this.rainImagesLayer
|
|
|
+ );
|
|
|
+ this.csceneElliposid(this.viewer, "rain");
|
|
|
+ },
|
|
|
+ //显示温度图
|
|
|
+ showTemperatureLayer() {
|
|
|
+ const imageUrls = [];
|
|
|
+ tempJson.forEach((it) => {
|
|
|
+ imageUrls.push("/public/static" + it.path);
|
|
|
+ });
|
|
|
+ this.showeveryTypeImagesLayer(
|
|
|
+ imageUrls,
|
|
|
+ this.tempintervalId,
|
|
|
+ this.tempImagesLayer
|
|
|
+ );
|
|
|
+ this.csceneElliposid(this.viewer, "temp");
|
|
|
+ },
|
|
|
+ async showeveryTypeImagesLayer(imageUrls, intervalId, ImagesLayers) {
|
|
|
+ // 存储所有图片图层的数组
|
|
|
+ let imageLayers = [];
|
|
|
+ // 当前显示的图片索引
|
|
|
+ let currentImageIndex = -1; // 初始为-1，表示没有图片显示
|
|
|
+
|
|
|
+ // 创建所有图片图层并添加到Viewer，初始时全部隐藏
|
|
|
+ await imageUrls.forEach((url) => {
|
|
|
+ const provider = new Cesium.SingleTileImageryProvider({
|
|
|
+ url: url,
|
|
|
+ // url: URL.createObjectURL(url),
|
|
|
+ rectangle: Cesium.Rectangle.fromDegrees(-180.0, -90.0, 180.0, 90.0), // 全球覆盖
|
|
|
+ tileWidth: 1440, // 根据你的图片实际宽度修改
|
|
|
+ tileHeight: 721,
|
|
|
+ // 如果你的图片只覆盖特定区域，请修改rectangle参数
|
|
|
+ });
|
|
|
+ const Layer = this.viewer.imageryLayers.addImageryProvider(provider);
|
|
|
+ Layer.alpha = 0.8; // 透明度
|
|
|
+ Layer.brightness = 1; // 亮度
|
|
|
+ Layer.contrast = 1; // 对比度
|
|
|
+ Layer.show = false; // 初始隐藏
|
|
|
+ imageLayers.push(Layer);
|
|
|
+ ImagesLayers.push(Layer);
|
|
|
+ });
|
|
|
+ function showNextImage() {
|
|
|
+ // 隐藏当前图片
|
|
|
+ if (currentImageIndex >= 0 && currentImageIndex < imageLayers.length) {
|
|
|
+ imageLayers[currentImageIndex].show = false;
|
|
|
+ }
|
|
|
+
|
|
|
+ // 计算下一张图片的索引
|
|
|
+ currentImageIndex = (currentImageIndex + 1) % imageLayers.length;
|
|
|
+
|
|
|
+ // 显示下一张图片
|
|
|
+ imageLayers[currentImageIndex].show = true;
|
|
|
+ // imageLayers[currentImageIndex + 1].show = true;
|
|
|
+ console.log("当前显示图片: " + imageUrls[currentImageIndex]);
|
|
|
+ }
|
|
|
+
|
|
|
+ // 设置切换间隔（毫秒），例如每5秒切换一次
|
|
|
+ const intervalMs = 5000;
|
|
|
+ intervalId = setInterval(showNextImage, intervalMs);
|
|
|
+
|
|
|
+ // 初始显示第一张图片
|
|
|
+ showNextImage();
|
|
|
+ },
|
|
|
+ // 移除风场图
|
|
|
+ removeWindLayer() {
|
|
|
+ if (this.windLayer) {
|
|
|
+ // this.windLayer.destroy();
|
|
|
+ this.windLayer.remove();
|
|
|
+ this.windLayer = null;
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ // 移除卫星云图
|
|
|
+ removeCloudLayer() {
|
|
|
+ if (this.cloudLayer) {
|
|
|
+ this.tagMsg = null;
|
|
|
+ this.viewer.imageryLayers.remove(this.cloudLayer);
|
|
|
+ this.cloudLayer = null;
|
|
|
+ }
|
|
|
+ if (this.cloudImagesLayer.length > 0) {
|
|
|
+ this.cloudImagesLayer.forEach((it) => {
|
|
|
+ this.viewer.imageryLayers.remove(it);
|
|
|
+ });
|
|
|
+ this.cloudImagesLayer = [];
|
|
|
+ }
|
|
|
+
|
|
|
+ if (this.imageryProviderV) {
|
|
|
+ this.viewer.imageryLayers.remove(this.imageryProviderV);
|
|
|
+ this.imageryProviderV = null;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 移除降雨图
|
|
|
+ removeRainLayer() {
|
|
|
+ if (this.rainLayer) {
|
|
|
+ this.tagMsg = null;
|
|
|
+ this.viewer.imageryLayers.remove(this.rainLayer);
|
|
|
+ this.rainLayer = null;
|
|
|
+ this.setMapImageryProvider();
|
|
|
+ this.handlerAction.removeInputAction(
|
|
|
+ Cesium.ScreenSpaceEventType.LEFT_CLICK
|
|
|
+ );
|
|
|
+ }
|
|
|
+ if (this.rainImagesLayer.length > 0) {
|
|
|
+ this.rainImagesLayer.forEach((it) => {
|
|
|
+ this.viewer.imageryLayers.remove(it);
|
|
|
+ });
|
|
|
+ this.rainImagesLayer = [];
|
|
|
+ }
|
|
|
+
|
|
|
+ if (this.imageryProviderV) {
|
|
|
+ this.viewer.imageryLayers.remove(this.imageryProviderV);
|
|
|
+ this.imageryProviderV = null;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 移除温度图
|
|
|
+ removeTemperatureLayer() {
|
|
|
+ if (this.temperatureLayer) {
|
|
|
+ this.tagMsg = null;
|
|
|
+ this.viewer.imageryLayers.remove(this.temperatureLayer);
|
|
|
+ this.temperatureLayer = null;
|
|
|
+ this.setMapImageryProvider();
|
|
|
+ this.handlerAction.removeInputAction(
|
|
|
+ Cesium.ScreenSpaceEventType.LEFT_CLICK
|
|
|
+ );
|
|
|
+ }
|
|
|
+ if (this.tempImagesLayer.length > 0) {
|
|
|
+ this.tempImagesLayer.forEach((it) => {
|
|
|
+ this.viewer.imageryLayers.remove(it);
|
|
|
+ });
|
|
|
+ this.tempImagesLayer = [];
|
|
|
+ }
|
|
|
+ if (this.imageryProviderV) {
|
|
|
+ this.viewer.imageryLayers.remove(this.imageryProviderV);
|
|
|
+ this.imageryProviderV = null;
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ //取消所有图层加载
|
|
|
+ cancleAllLayer() {
|
|
|
+ if (this.windLayer) {
|
|
|
+ this.removeWindLayer();
|
|
|
+ }
|
|
|
+ if (this.rainLayer || this.rainImagesLayer.length > 0) {
|
|
|
+ this.removeRainLayer();
|
|
|
+ this.stopCycling(this.rainintervalId);
|
|
|
+ }
|
|
|
+ if (this.cloudLayer || this.cloudImagesLayer.length > 0) {
|
|
|
+ this.removeCloudLayer();
|
|
|
+ this.stopCycling(this.cloudintervalId);
|
|
|
+ }
|
|
|
+ if (this.temperatureLayer || this.tempImagesLayer.length > 0) {
|
|
|
+ this.removeTemperatureLayer();
|
|
|
+ this.stopCycling(this.tempintervalId);
|
|
|
+ }
|
|
|
},
|
|
|
switchLayer() {
|
|
|
this.$router.push({
|
|
|
@@ -781,6 +1256,7 @@ export default {
|
|
|
menuComTSty(val) {
|
|
|
this.menuComTStyB = val;
|
|
|
},
|
|
|
+
|
|
|
},
|
|
|
};
|
|
|
</script>
|
Koishi
