1

wangjuncheng

2025-06-06 7217e02e098b94e421b5a85ec13e0cd2ed35fbeb

 src/utils/water.js

@@ -1,5 +1,8 @@
import { cartesianToXY } from "@/utils/map";

import { useSimStore } from "@/store/simulation";
import { storeToRefs } from "pinia";
const simStore = useSimStore();
const { waterLegendData } = storeToRefs(simStore);
let water = null;

/**
@@ -21,29 +24,54 @@
 * @param {boolean} options.colorRender - 是否启用颜色渲染
 */
export function createWaterPrimitive(options = {}) {
  const { baseUrl = "/simu/c2h1dc", interval = 1000, colorRender = true } = options;
  const {
    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,
    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" },
    ],
    colorRender, // 控制是否启用颜色渲染
    alphaByDepth: -0.3,
    waterHeightLevels,
    colorRender,
  });

  console.log(`Water simulation started with baseUrl: ${baseUrl}, interval: ${interval}ms, colorRender: ${colorRender}`);
  console.log(
    `仿真模拟参数：请求路径 ${baseUrl}, 帧间间隔 ${interval}ms, 是否开启专题渲染 ${colorRender},图例参数${waterHeightLevels}`
  );
}
/**
 * 初始化水体模拟视图
@@ -62,7 +90,7 @@
    },
  };
  viewer.scene.camera.flyTo(view);
  console.log("Camera view initialized for water simulation.");
  // console.log("Camera view initialized for water simulation.");
}

/**
@@ -71,7 +99,7 @@
export function pauseWaterSimulation() {
  if (water) {
    water.pause();
    console.log("Water simulation paused.");
    console.log("暂停仿真");
  } else {
    console.warn("No water simulation to pause.");
  }
@@ -83,7 +111,7 @@
export function resumeWaterSimulation() {
  if (water) {
    water.resume();
    console.log("Water simulation resumed.");
    console.log("继续仿真");
  } else {
    console.warn("No water simulation to resume.");
  }
@@ -101,9 +129,10 @@
      console.warn("No timestamps available for water simulation.");
      return;
    }

    const idx = Math.floor(Math.random() * imageList.length);
    console.log(`Jumping to timestamp: count:[${imageList.length}], index:[${closestIndex}]`);
    // const idx = Math.floor(Math.random() * imageList.length); //随机索引跳转，实际中用不到，只用作演示
    console.log(
      `Jumping to timestamp: count:[${imageList.length}], index:[${closestIndex}]`
    );
    water.setTime(imageList[closestIndex]);
  } else {
    console.warn("No water simulation to set time for.");
@@ -117,7 +146,7 @@
export function toggleWaterColorRender(enabled) {
  if (water) {
    water.colorRender = enabled;
    console.log(`Water color render set to: ${enabled}`);
    console.log(`是否开启专题渲染 ${enabled}`);
  } else {
    console.warn("No water simulation to toggle color rendering.");
  }
@@ -129,4 +158,4 @@
 */
function timeCallback(timeStamp) {
  // console.log(`Current timestamp: ${timeStamp}`);
}
}