避险场所以及完善弹窗详情

guonan

2025-06-17 be9c1145fc79165142fbe29aacb04dd8e34dd23f

 src/views/mnfz.vue

@@ -34,7 +34,11 @@
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";

@@ -43,6 +47,7 @@

import { useSimStore } from "@/store/simulation";
import { storeToRefs } from "pinia";
import { getSafePoint } from "@/api/hpApi";
const simStore = useSimStore();
const { rightRiverShow } = storeToRefs(simStore);

@@ -139,51 +144,41 @@
  dataSources.length = 0;
}
// 避险场所，绿色富文本
function addTetrahedron(visible) {
async 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"
    );
    console.log("point", point);
    emergencyAreaList.push(point);
  });
  treeMap.set("避险场所", emergencyAreaList);
  try {
    const res = await getSafePoint();

    const geoJsonData = convertToGeoJson(res.data);

    // 加载底层面片（多边形）
    const polygonEntities = await loadAreaPolygon(geoJsonData, true);
    emergencyAreaList.push(...polygonEntities);

    // 添加绿色富文本标注
    const textPromises = res.data.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() {
@@ -542,9 +537,9 @@
function playbackFinished(val) {
  isFinish.value = val;
}
function isColorRender(val){
function isColorRender(val) {
  // console.log('这里打印是否显示水位图例的值：',val);
  isShowLegend.value = val
  isShowLegend.value = val;
}
// 定义全局变量存储当前正在闪动的面片
let flashingPolygon = null;
@@ -654,11 +649,11 @@
<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;
  // background: url("@/assets/img/right/rightbg.png");
  color: white;
  position: fixed;
  bottom: 6%;
  right: 20%;
  z-index: 3333;
}
</style>