| | |
| | | import { cartesianToXY } from "@/utils/map"; |
| | | |
| | | import { useSimStore } from "@/store/simulation"; |
| | | import { storeToRefs } from "pinia"; |
| | | const simStore = useSimStore(); |
| | | const { waterLegendData } = storeToRefs(simStore); |
| | | let water = null; |
| | | |
| | | /** |
| | |
| | | baseUrl = "/simu/c2h1dc", |
| | | interval = 1000, |
| | | colorRender = true, |
| | | minFlowRate = 0.1, // 新增参数 |
| | | maxFlowRate = 12 // 新增参数 |
| | | } = options; |
| | | |
| | | // 定义水深颜色映射的色标 |
| | | const colorStops = [ |
| | | "#09a2dc", "#58c196", "#bedf74", "#d7f06e", |
| | | "#ffe930", "#fdd10a", "#feb652", "#fd7f06", |
| | | "#fe2b07", "#4d0a08" |
| | | ]; |
| | | // 构造 waterHeightLevels:从 min 到 max 使用指数增长,确保小值区域更密集 |
| | | const levelCount = colorStops.length; // 保持和颜色数量一致 |
| | | const waterHeightLevels = []; |
| | | // 指数增长公式:y = base^x |
| | | const base = Math.exp(Math.log(maxFlowRate / minFlowRate) / (levelCount - 1)); |
| | | for (let i = 0; i < levelCount; i++) { |
| | | const ratio = i / (levelCount - 1); // 0 ~ 1 |
| | | // 使用指数插值,保证低值区域更密集 |
| | | const height = minFlowRate * Math.pow(base, i); |
| | | const color = colorStops[i]; |
| | | |
| | | waterHeightLevels.push({ |
| | | height: height.toFixed(2), // 可选:保留两位小数 |
| | | color |
| | | }); |
| | | } |
| | | waterLegendData.value = waterHeightLevels |
| | | console.log(waterLegendData.value,'图里数据'); |
| | | |
| | | // 创建图层 |
| | | water = earthCtrl.simulate.createWaterSimulateLayer({ |
| | | baseUrl, |
| | | interval, |
| | | color: new SmartEarth.Cesium.Color.fromCssColorString("#D4F2E7"), |
| | | loop: false, |
| | | callback: timeCallback, |
| | | alphaByDepth: -0.3, //深度衰减,值越大,水面越透明. |
| | | waterHeightLevels: [ |
| | | { height: 0.5, color: "#09a2dc" }, |
| | | { height: 1.0, color: "#58c196" }, |
| | | { height: 1.5, color: "#bedf74" }, |
| | | { height: 2.0, color: "#d7f06e" }, |
| | | { height: 2.5, color: "#ffe930" }, |
| | | { height: 3.0, color: "#fdd10a" }, |
| | | { height: 4.0, color: "#feb652" }, |
| | | { height: 5.0, color: "#fd7f06" }, |
| | | { height: 10.0, color: "#fe2b07" }, |
| | | { height: 30.0, color: "#4d0a08" }, |
| | | ], |
| | | colorRender, // 控制是否启用颜色渲染 |
| | | alphaByDepth: -0.3, |
| | | waterHeightLevels, |
| | | colorRender, |
| | | }); |
| | | |
| | | console.log( |
| | | `仿真模拟参数: 请求路径 ${baseUrl}, 帧间间隔 ${interval}ms, 是否开启专题渲染 ${colorRender}` |
| | | `仿真模拟参数:请求路径 ${baseUrl}, 帧间间隔 ${interval}ms, 是否开启专题渲染 ${colorRender},图例参数${waterHeightLevels}` |
| | | ); |
| | | } |
| | | /** |