| | |
| | | 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" |
| | | ]; |
| | | |
| | | const levelCount = colorStops.length; |
| | | const minAllowed = 0.01; // 最小允许值 |
| | | const threshold = 1; // 小值与大值分界点 |
| | | |
| | | let effectiveMin = Math.max(minFlowRate, minAllowed); // 最小不能小于 0.01 |
| | | |
| | | const waterHeightLevels = []; |
| | | |
| | | // 分两段构造高度数组 |
| | | for (let i = 0; i < levelCount; i++) { |
| | | let ratio = i / (levelCount - 1); // 0 ~ 1 |
| | | |
| | | let height; |
| | | if (ratio <= 0.5) { |
| | | // 前半段:低值区域,使用强指数增长,从 effectiveMin 到 threshold |
| | | const localRatio = ratio * 2; // 映射到 0~1 |
| | | const expRatio = Math.pow(localRatio, 2); // 更强调低值区域密度 |
| | | height = effectiveMin + (threshold - effectiveMin) * expRatio; |
| | | } else { |
| | | // 后半段:高值区域,从 threshold 到 maxFlowRate,使用指数增长 |
| | | const localRatio = (ratio - 0.5) * 2; // 映射到 0~1 |
| | | const expBase = Math.exp(Math.log(maxFlowRate / threshold) / 1); |
| | | height = threshold * Math.pow(expBase, localRatio); |
| | | } |
| | | |
| | | waterHeightLevels.push({ |
| | | height: parseFloat(height.toFixed(2)), // 保留两位小数 |
| | | color: colorStops[i] |
| | | }); |
| | | } |
| | | |
| | | waterLegendData.value = waterHeightLevels; |
| | | console.log(waterLegendData.value, '图例数据'); |
| | | |
| | | // 创建图层 |
| | | water = earthCtrl.simulate.createWaterSimulateLayer({ |
| | | baseUrl, |
| | | interval, |
| | | color: new SmartEarth.Cesium.Color.fromCssColorString("#D4F2E7"), |
| | | color: SmartEarth.Cesium.Color.fromCssColorString("#D4F2E7"), |
| | | loop: false, |
| | | callback: timeCallback, |
| | | 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}` |
| | | ); |
| | | } |
| | | /** |