wangjuncheng
7 天以前 bf0eb543e2deab8a1629dd2a46f8e1cd191531e1
src/views/mnfz.vue
@@ -12,7 +12,9 @@
    :waterSimulateParams="waterSimulateParams"
    @playbackFinished="playbackFinished"
    @end="endSimulate"
    @isColorRender="isColorRender"
  />
  <LegendMNFZ class="legend" v-if="isShowLegend"></LegendMNFZ>
  <DebuffDetail
    v-if="showDebuffDetail"
    @open="openDetail"
@@ -25,13 +27,18 @@
import { EventBus } from "@/eventBus"; // 引入事件总线
import { ref, onMounted, onUnmounted, provide } from "vue";
import TimeLine from "@/components/menu/TimeLine.vue";
import LegendMNFZ from "@/components/tools/Legend_mnfz.vue";
import Left from "./left/Left.vue";
import echartInfo from "@/components/monifangzhen/echartInfo.vue";
import DebuffDetail from "@/components/tools/DebuffDetail.vue";
import DebuffTable from "@/components/tools/DebuffTable.vue";
import { getMaxInfluenceArea } from "@/api/index";
import { createPoint, geomToGeoJSON } from "@/utils/map.js";
import { loadAreaPolygon, clearAreaPolygon } from "@/utils/area";
import {
  loadAreaPolygon,
  clearAreaPolygon,
  convertToGeoJson,
} from "@/utils/area";
import colors from "@/assets/img/left/colors3.png";
@@ -40,6 +47,7 @@
import { useSimStore } from "@/store/simulation";
import { storeToRefs } from "pinia";
import { getSafePoint } from "@/api/hpApi";
const simStore = useSimStore();
const { rightRiverShow } = storeToRefs(simStore);
@@ -49,6 +57,7 @@
const showDebuffTable = ref(false);
const isDynamicMode = ref(false);
const isFinish = ref(true);
const isShowLegend = ref(false);
const treeMap = new Map();
@@ -59,7 +68,6 @@
});
function startSimulate(form) {
  // console.log("form", form);
  showWaterSimulate.value = true;
  rightRiverShow.value = true;
  waterSimulateParams.value = form;
@@ -70,8 +78,8 @@
  clearTrailLine();
  removeEmergencyPoints();
  removeDataSources();
  showWaterSimulate.value = false;
  setTimeout(() => {
    showWaterSimulate.value = false;
    isDynamicMode.value = false;
    // 清除威胁对象表格内容
    EventBus.emit("reset-table");
@@ -134,53 +142,71 @@
  });
  dataSources.length = 0;
}
// 避险场所,绿色富文本
function addTetrahedron(visible) {
  const emergencyAreaList = [];
  //  这里是添加避险场所底层面片
  loadAreaPolygon("/json/emergency_area.geojson", true).then((entities) => {
    emergencyAreaList.push(...entities);
  });
  // console.log('polygon', polygon);
  let list = [
    {
      name: "尹建华家",
      longitude: 116.593517,
      latitude: 40.568391,
      altitude: 528.45,
    },
    // {
    //   name: "范振江家",
    //   longitude: 116.591059,
    //   latitude: 40.574068,
    //   altitude: 528,
    // },
    // {
    //   name: "后坡",
    //   longitude: 116.597975,
    //   latitude: 40.558199,
    //   altitude: 528,
    // },
  ];
  // 这里是添加避险场所富文本高亮显示
  list.forEach((item) => {
    let point = earthCtrl.factory.createRichTextPoint(
      "避险场所",
      [item.longitude, item.latitude, item.altitude - 10],
      {
        distanceDisplayCondition:
          new SmartEarth.Cesium.DistanceDisplayCondition(0, 2000),
        fontColor: "#ffffff",
        fontSize: 20,
      },
      "0"
// 避险场所,绿色富文本
async function addTetrahedron(visible) {
  const emergencyAreaList = [];
  try {
    let codesToFetch = [];
    // 判断当前选择区域是否为“区”
    if (simStore.selectedScheme.areaName.includes("区")) {
      // 从 simStore.townCodeAll 中拿到该区下的所有乡镇 code
      const townList = simStore.townCodeAll[simStore.selectedScheme.areaName];
      // 假设 townList 是一个数组,里面每个元素有 .code 字段
      if (Array.isArray(townList)) {
        codesToFetch = townList.map((item) => item.code);
      } else {
        console.warn("未找到对应的乡镇列表");
        return;
      }
    } else {
      // 不是“区”,就使用默认 code
      codesToFetch = ["110116110218"];
    }
    // 并发请求所有 code 的避险点数据
    const allRes = await Promise.all(
      codesToFetch.map((code) => getSafePoint(code))
    );
    console.log("point", point);
    emergencyAreaList.push(point);
  });
  treeMap.set("避险场所", emergencyAreaList);
    // 合并结果(假设每个 res.data 是一个数组)
    const allSafePoints = allRes.flatMap((res) => res.data);
    // 转换为 GeoJSON(如果每个 data 都需要单独处理)
    const geoJsonData = convertToGeoJson(allSafePoints);
    // 加载底层面片(多边形)
    const polygonEntities = await loadAreaPolygon(geoJsonData, true);
    emergencyAreaList.push(...polygonEntities);
    // 添加绿色富文本标注
    const textPromises = allSafePoints.map(async (item) => {
      const point = earthCtrl.factory.createRichTextPoint(
        "避险场所",
        [item.lon, item.lat, 540],
        {
          distanceDisplayCondition:
            new SmartEarth.Cesium.DistanceDisplayCondition(0, 2000),
          fontColor: "#fff",
          fontSize: 20,
        },
        "0"
      );
      emergencyAreaList.push(point);
    });
    await Promise.all(textPromises);
    // 将结果保存到 treeMap
    treeMap.set("避险场所", emergencyAreaList);
  } catch (error) {
    console.error("加载避险场所失败:", error);
  }
}
// 删除避险场所的富文本实体
function removeEmergencyPoints() {
  const emergencyAreaList = treeMap.get("避险场所"); // 获取存储的避险场所实体列表
@@ -295,7 +321,7 @@
    url: "/json/line.json",
    color: "#00FF00",
    width: 12.0,
    pointColor: "#73FFA7",
    pointColor: "#FFFF73",
    speed: 2,
    far: 50000,
  });
@@ -538,6 +564,10 @@
function playbackFinished(val) {
  isFinish.value = val;
}
function isColorRender(val) {
  // console.log('这里打印是否显示水位图例的值:',val);
  isShowLegend.value = val;
}
// 定义全局变量存储当前正在闪动的面片
let flashingPolygon = null;
@@ -645,4 +675,12 @@
</script>
<style lang="less" scoped>
@import url("../assets/css/home.css");
.legend {
  // background: url("@/assets/img/right/rightbg.png");
  color: white;
  position: fixed;
  bottom: 6%;
  right: 20%;
  z-index: 3333;
}
</style>