修改选中区域flyTo以及标红；避险场所面片未清除；存储方案模拟区域

guonan

2025-05-06 ddf60f1de7a1632e5673806838aa1ef74fd3886b

修改选中区域flyTo以及标红；避险场所面片未清除；存储方案模拟区域

 public/js/config.js

@@ -1,2 +1 @@
const BASE_URL = "http://192.168.56.107:8077"
console.log('config.js 被加载', new Date().toISOString());
const BASE_URL = "http://192.168.56.107:8088"

 src/api/requestTR.js

@@ -20,7 +20,6 @@
  },
});

console.log('当前 BaseUrl:', API_URL);
// 请求拦截器
// instance.interceptors.request.use(
//   (config) => {

 src/store/simAPI.js

@@ -80,7 +80,7 @@
                })
            }
            console.log(params)
            const res = await createSimData(params)
            // const res = await createSimData(params)
            ElMessage.success('方案保存成功')
            // return res
        } catch (error) {

 src/utils/area.js

@@ -140,17 +140,29 @@
}

export function clearAreaPolygon() {
    if (Array.isArray(areaPrimitives)) {
        areaPrimitives.forEach(item => {
            viewer.scene.primitives.remove(item)
        })
        areaPrimitives = []
    }
    if (Array.isArray(areaDataSource)) {
        areaDataSource.forEach(dataSource => {
            dataSource.show = false
        })
    }
    // 1. 清除通过 viewer.entities 添加的实体
    if (Array.isArray(areaDataSource)) {
        areaDataSource.forEach(dataSource => {
            // 移除数据源中的所有实体
            dataSource.entities.values.forEach(entity => {
                viewer.entities.remove(entity);
            });
            // 移除数据源本身
            viewer.dataSources.remove(dataSource);
        });
        areaDataSource = [];
    }

    // 2. 清除通过 viewer.scene.primitives 添加的图元
    if (Array.isArray(areaPrimitives)) {
        areaPrimitives.forEach(primitive => {
            viewer.scene.primitives.remove(primitive);
        });
        areaPrimitives = [];
    }

    // 3. 强制场景重绘
    viewer.scene.requestRender();
}

export function initAreaLine() {

 src/views/GisView.vue

@@ -16,6 +16,8 @@
import { isVisibleDistance } from "@/utils/customEntity";
import { getDistrictCount, getDistrictCountByCity } from "@/api/index";
import { useRoute } from "vue-router";
import { EventBus } from "@/eventBus"; // 引入事件总线

const route = useRoute();
let handler = null;
function initMap() {
@@ -37,7 +39,6 @@
  // 3. 设置当前时间并锁定
  earthCtrl.viewer.clock.currentTime = julianDate;


  //显示fps
  earthCtrl.showFPS = true;
  earthCtrl.factory.createImageryLayer({
@@ -54,6 +55,124 @@
  // viewer.scene.globe.depthTestAgainstTerrain = false;
}

const MULTIPOLYGON_COORDS = ref([]);
let previousEntities = []; // 用于存储之前创建的实体
const flyToHeight = ref(null);

// 监听新建方案选择的区域范围
EventBus.on("select-geom", ({ geom, flyHeight }) => {
  flyToHeight.value = flyHeight;
  const coordsStr = geom
    .replace("MULTIPOLYGON(((", "") // 去掉开头
    .replace(")))", ""); // 去掉结尾

  // 分割成 ["lon lat", "lon lat", ...]
  const coordPairs = coordsStr.split(",");

  // 转换为 [[[lon, lat], [lon, lat], ...]] 格式
  MULTIPOLYGON_COORDS.value = [
    coordPairs.map((pair) => {
      const [lon, lat] = pair.trim().split(" ").map(Number);
      return [lon, lat];
    }),
  ];

  // 检查是否是空多边形,如果是空，则去掉面片颜色，并飞回初始位置
  if (geom === "MULTIPOLYGON EMPTY") {
    clearPreviousEntities();
    flyToHomeView();
    return; // 不执行后续操作
  }

  // 清除之前的所有实体
  clearPreviousEntities();
  // 选中区域标色
  addCustomPolygon();
});

// 清除之前的所有实体
function clearPreviousEntities() {
  previousEntities.forEach((entity) => {
    viewer.entities.remove(entity);
  });
  previousEntities = [];
}

// 计算选中区域中心点
function calculateCenter(coordinates) {
  const lons = coordinates.flat().map((coord) => coord[0]);
  const lats = coordinates.flat().map((coord) => coord[1]);
  return {
    lon: (Math.min(...lons) + Math.max(...lons)) / 2,
    lat: (Math.min(...lats) + Math.max(...lats)) / 2,
  };
}

function convertToGeoJson(coords) {
  return {
    type: "Feature",
    id: 0,
    bbox: calculateCenter(MULTIPOLYGON_COORDS.value), // 可选
    properties: {
      center: calculateCenter(MULTIPOLYGON_COORDS.value), // 第一个点作为 center
      centroid: MULTIPOLYGON_COORDS.value[0][0], // 可选
      level: "district",
      code: 123456,
      districtCount: 0,
    },
    geometry: {
      type: "MultiPolygon",
      coordinates: [coords], // 包装成 MultiPolygon
    },
  };
}

function addCustomPolygon() {
  // 将 MULTIPOLYGON_COORDS.value 转换为 GeoJSON 格式
  const geoJson = convertToGeoJson(MULTIPOLYGON_COORDS.value);
  const center = geoJson.properties.center;

  // 创建多边形实体
  const polygonEntity = viewer.entities.add({
    // name: "自定义区域",
    polygon: {
      hierarchy: Cesium.Cartesian3.fromDegreesArray(
        geoJson.geometry.coordinates[0][0].flat()
      ),
      material: Cesium.Color.RED.withAlpha(0.3), // 半透明红色填充
      outline: true,
      outlineColor: Cesium.Color.RED, // 红色边框
      outlineWidth: 5,
      clampToGround: true, // 贴地显示
    },
  });
  previousEntities.push(polygonEntity);

  // 飞向中心点
  viewer.camera.flyTo({
    destination: Cesium.Cartesian3.fromDegrees(
      center.lon,
      center.lat,
      flyToHeight.value
    ), // 提高到 100000米高度
    orientation: {
      heading: Cesium.Math.toRadians(0), // 正北方向
      pitch: Cesium.Math.toRadians(-90), // 向下倾斜90度（垂直俯视）
      roll: 0.0,
    },
  });

  console.log(
    flyToHeight.value,
    "flyToHeight.value flyToHeight.value flyToHeight.value "
  );
}

EventBus.on("close-selectArea", () => {
  clearPreviousEntities();
  flyToHomeView();
});

function addCityPolygon() {
  const url = `/json/110000.geo.json`;
  let wallLayer = earthCtrl.factory.createTrailWallLayer({
@@ -67,8 +186,8 @@
  });
  return dataSourcePromise.then(function (dataSource) {
    viewer.dataSources.add(dataSource);
    // 所有的数据
    const polygonEntity = dataSource.entities.values;
    // console.log("polygonEntity", polygonEntity)
    const distanceDisplayCondition = new Cesium.DistanceDisplayCondition(
      1000,
      50000000
@@ -327,6 +446,7 @@

onMounted(() => {
  initMap();
  // 在你的初始化代码中调用这个函数
  addCityPolygon();
  initHandler();
  // initView()
@@ -340,6 +460,8 @@
});
onUnmounted(() => {
  removeCameraChange();
  EventBus.off("select-geom");
  EventBus.off("close-selectArea");
});
</script>


 src/views/left/CitySim.vue

@@ -59,6 +59,7 @@
          v-if="simStore.selectTab == '重点区域仿真'"
        >
          <el-select
            @change="changeGeom"
            v-model="forms.geom"
            placeholder="Select"
            style="max-width: 600px"
@@ -141,6 +142,7 @@
import { getRegionData } from "@/api/trApi";
import { storeToRefs } from "pinia";
import dayjs from "dayjs";
import { EventBus } from "@/eventBus"; // 引入事件总线

const simStore = SimAPIStore();
const { selectTab } = storeToRefs(simStore);
@@ -197,9 +199,17 @@
  hours: null,
});

const flyHeight = ref(100000);

// 将选中区域传递给gisView文件，做标红flyTo显示
const changeGeom = (val) => {
  console.log(val,'aaaaaaaaaaaaaaa')
}
  if (selectTab.value == "行政区划仿真") {
    flyHeight.value = 100000;
  } else {
    flyHeight.value = 5000;
  }
  EventBus.emit("select-geom", { geom: val.value, flyHeight: flyHeight.value });
};

const { calculateHoursDifference } = inject("calculateHours");

@@ -209,12 +219,13 @@

const addSimCheme = async () => {
  await simStore.addSimCheme(forms);
  resetForm();
  EventBus.emit("close-selectArea");
};

// 重置表单
const resetForm = () => {
  forms.geom = "";
  forms.eares = "孙胡沟";
  forms.rainfall = null;
  forms.duration = null;
  forms.intensity = null;

 src/views/left/KGSim.vue

@@ -16,7 +16,7 @@
          v-for="item in filteredOptions"
          :key="item.value"
          :label="item.label"
          :value="item.value"
          :value="item"
        />
      </el-select>
    </div>
@@ -54,6 +54,7 @@
import PredictiveSimulation from "./KGSimOption/PredictiveSimulation.vue";
import RealTimeSimulation from "./KGSimOption/RealTimeSimulation.vue";
import { getRegionData } from "@/api/trApi";
import { EventBus } from "@/eventBus"; // 引入事件总线

const selectedSimulation = ref("历史模拟");
const selectedArea = ref(); // 选中的区域
@@ -67,9 +68,9 @@
      0,
      importGOptions.length,
      ...res.data.map((item) => ({
        id:item.id,
        id: item.id,
        value: item.geom,
        label: item.name
        label: item.name,
      }))
    );
  });
@@ -90,8 +91,12 @@

// 处理选项选择事件
const handleSelectChange = (value) => {
  EventBus.emit("select-geom", { geom: value.value, flyHeight: 8000 });
  console.log("选中的值：", value); // 打印选中的值
  console.log("当前选中的完整数据：", importGOptions.find((item) => item.value === value)); // 打印完整的选中数据
  console.log(
    "当前选中的完整数据：",
    importGOptions.find((item) => item.value === value)
  ); // 打印完整的选中数据
};

const handleStart = () => {
@@ -144,4 +149,4 @@
:deep(.el-input__inner) {
  color: #fff; /* 让文字颜色跟随父级 */
}
</style>
</style>

 src/views/left/KGSimOption/HistorySimulation.vue

@@ -120,6 +120,7 @@
import { useSimStore } from "@/store/simulation.js"; // 引入 Store
import { getRainfallData } from "@/api/hpApi.js";
import { SimAPIStore } from "@/store/simAPI";
import { EventBus } from "@/eventBus"; // 引入事件总线

// 获取 Store 实例
const simStore = SimAPIStore();
@@ -138,7 +139,7 @@
// 定义 Props
const props = defineProps({
  selectedArea: {
    type: String,
    type: Object,
    required: true,
  },
});
@@ -193,6 +194,7 @@
    history: rainfallHistory.value,
  };
  await simStore.addSimCheme(forms);
  EventBus.emit("close-selectArea");
};

// 关闭保存方案对话框

 src/views/left/KGSimOption/PredictiveSimulation.vue

@@ -112,6 +112,8 @@
import { useSimStore } from "@/store/simulation.js"; // 引入 Store
import { SimAPIStore } from "@/store/simAPI";
import { getRainfallData } from "@/api/hpApi";
import { EventBus } from "@/eventBus"; // 引入事件总线


onMounted(() => {
  getRain();
@@ -133,7 +135,7 @@
// 定义 Props
const props = defineProps({
  selectedArea: {
    type: String,
    type: Object,
    required: true,
  },
});
@@ -203,6 +205,8 @@
    prediction: forms.prediction,
  };
  await simStore.addSimCheme(params);
  EventBus.emit("close-selectArea");

};

// 打开方案

 src/views/left/KGSimOption/RealTimeSimulation.vue

@@ -85,6 +85,7 @@
import { ElMessage } from "element-plus";
import { initeWaterPrimitiveView } from "@/utils/water";
import { SimAPIStore } from "@/store/simAPI";
import { EventBus } from "@/eventBus"; // 引入事件总线

// 获取 Store 实例
const simStore = SimAPIStore();
@@ -123,7 +124,7 @@
// 接收父组件传递的 props
const props = defineProps({
  selectedArea: {
    type: String,
    type: Object,
    required: true,
  },
});
@@ -249,6 +250,7 @@
    ],
  };
  await simStore.addSimCheme(forms);
  EventBus.emit("close-selectArea");
};

// 关闭保存方案对话框

 src/views/left/Simulation.vue

@@ -28,7 +28,8 @@
import { ref, defineEmits, provide } from "vue";
import citySim from "./CitySim.vue";
import kgSim from "./KGSim.vue";
import dayjs from 'dayjs';
import dayjs from "dayjs";
import { EventBus } from "@/eventBus"; // 引入事件总线

import { SimAPIStore } from "@/store/simAPI";

@@ -51,6 +52,7 @@
// 返回上一级
const goBack = () => {
  emits("back", clickValue.value);
  EventBus.emit("close-selectArea");
};

// 计算累计时长

 src/views/mnfz.vue

@@ -33,6 +33,8 @@
import { createPoint, geomToGeoJSON } from "@/utils/map.js";
import { loadAreaPolygon, clearAreaPolygon } from "@/utils/area";

import colors from "@/assets/img/left/colors3.png";

import danger from "@/assets/img/left/danger.png";
import { checkedKeys } from "@/store/index";

@@ -191,6 +193,8 @@
        // 如果有 clear 方法，调用 clear
        entity.clear();
      } else if (entity && earthCtrl && earthCtrl.coreMap) {
        // 清除避险点绿色面片
        clearAreaPolygon();
        // 如果是 Cesium 实体，使用 coreMap.entities.remove 移除
        earthCtrl.coreMap.entities.remove(entity);
      }
@@ -199,14 +203,14 @@
  }
}

// 避险路线
///////////////////////////// 流光线避险路线/////////////////////////////
let pathLayer = null; // 存储创建的图层
function showLine() {
  // 创建新图层
  pathLayer = earthCtrl.factory.createPathLayer({
    url: "/json/line.json",
    color: "#0033FF",
    width: 15.0,
    color: "#008500",
    width: 12.0,
    pointColor: "#FFFFFF",
    speed: 2,
    far: 50000,
@@ -226,10 +230,201 @@
  //   earthCtrl.coreMap.entities.remove(item);
  // }
  // });
  // pathLayer = [];
  pathLayer = null;
}
///////////////////////////// 流光线避险路线/////////////////////////////
///////////////////////////// 箭头版避险路线/////////////////////////////
// let TrailLine = [];
// async function showLine() {
//   const position1 = [
//     {
//       x: -2172867.1941179745,
//       y: 4339567.67446477,
//       z: 4125575.4386990573,
//     },
//     {
//       x: -2172867.1941179745,
//       y: 4339567.67446477,
//       z: 4125575.4386990573,
//     },
//     {
//       x: -2172700.396781143,
//       y: 4339454.037139385,
//       z: 4125736.906847591,
//     },
//     {
//       x: -2172744.4001612393,
//       y: 4339361.421455601,
//       z: 4125804.324253885,
//     },
//     {
//       x: -2172824.3311673277,
//       y: 4339274.56533081,
//       z: 4125844.432999503,
//     },
//     {
//       x: -2172822.298957661,
//       y: 4339226.700024104,
//       z: 4125896.451233209,
//     },
//     {
//       x: -2172776.0573917977,
//       y: 4339194.843872361,
//       z: 4125947.9581145854,
//     },
//     {
//       x: -2172755.2828807314,
//       y: 4339149.410126468,
//       z: 4125995.9286539108,
//     },
//     {
//       x: -2172660.9533022284,
//       y: 4339085.401362197,
//       z: 4126101.3750262205,
//     },
//     {
//       x: -2172613.460204307,
//       y: 4339073.342332504,
//       z: 4126134.479399525,
//     },
//     {
//       x: -2172583.664140033,
//       y: 4339085.533980615,
//       z: 4126140.3272964833,
//     },
//     {
//       x: -2172348.977405535,
//       y: 4338967.122025027,
//       z: 4126358.7532469626,
//     },
//     {
//       x: -2172276.019363938,
//       y: 4338943.999121099,
//       z: 4126416.339696519,
//     },
//     {
//       x: -2172178.064812976,
//       y: 4338928.9482959965,
//       z: 4126475.798078439,
//     },
//     {
//       x: -2172171.5451145098,
//       y: 4338941.186930828,
//       z: 4126466.425301899,
//     },
//     {
//       x: -2172177.9565195283,
//       y: 4338940.424956708,
//       z: 4126463.8688932694,
//     },
//   ];
//   const position2 = [
//     {
//       x: -2171569.1995107993,
//       y: 4338474.198855222,
//       z: 4127198.938949332,
//     },
//     {
//       x: -2171596.1458028457,
//       y: 4338508.014766663,
//       z: 4127160.0148374927,
//     },
//     {
//       x: -2171663.8877153755,
//       y: 4338521.115613981,
//       z: 4127111.758040112,
//     },
//     {
//       x: -2171815.8899659193,
//       y: 4338612.264105235,
//       z: 4126950.0428421027,
//     },
//     {
//       x: -2171839.2819730053,
//       y: 4338700.186548507,
//       z: 4126845.712987762,
//     },
//     {
//       x: -2171792.4015423204,
//       y: 4338769.135301243,
//       z: 4126802.7938519563,
//     },
//     {
//       x: -2171943.7495626938,
//       y: 4338851.9854133595,
//       z: 4126649.5658632508,
//     },
//     {
//       x: -2172026.1490882114,
//       y: 4338896.137127666,
//       z: 4126571.6284971433,
//     },
//     {
//       x: -2172182.2854437083,
//       y: 4338931.410179759,
//       z: 4126471.0308961133,
//     },
//     {
//       x: -2172175.3377184337,
//       y: 4338941.338674108,
//       z: 4126464.288707359,
//     },
//     {
//       x: -2172175.3377184337,
//       y: 4338941.338674108,
//       z: 4126464.288707359,
//     },
//   ];
//   // 定义一个函数来创建轨迹线
//   function createTrailLine(positions, color = "#ffffff") {
//     let LineInterpolation = earthCtrl.core.LineInterpolation(
//       earthCtrl.coreMap,
//       {
//         positions: positions,
//         num: 50,
//         getHeight: true,
//       }
//     );

//     let min = LineInterpolation.height;
//     let max = min.map((item) => item + 35);

//     console.log(min, max);

//     let _TrailLine = earthCtrl.factory.createTrailLineWall(
//       LineInterpolation.positions,
//       {
//         maximumHeights: max,
//         minimumHeights: min,
//         color: color, // 线颜色
//         url: colors, // 如果没有设置 colors，请用纯色或删除此行
//       }
//     );
//     TrailLine.push(_TrailLine);
//   }

//   // 分别创建两条轨迹线
//   createTrailLine(position1, "#ff0000"); // 红色轨迹
//   createTrailLine(position2, "#0000ff"); // 蓝色轨迹
// }
// // 清除轨迹线对象
// function clearTrailLine() {
//   TrailLine.forEach((item, index) => {
//     if (item && typeof item.deleteObject === "function") {
//       item.deleteObject();
//     } else if (item && typeof item.clear === "function") {
//       item.clear();
//     } else if (item && earthCtrl && earthCtrl.coreMap) {
//       earthCtrl.coreMap.entities.remove(item);
//     }
//   });
//   TrailLine = [];
// }
///////////////////////////// 箭头版避险路线/////////////////////////////

function timeUpdate(percentage) {
  if (percentage > 99) {
  console.log(percentage, "ppppppppppp");
  if (percentage > 99.9) {
    if (showDebuffDetail.value) {
      return;
    }

 vue.config.js

@@ -21,8 +21,8 @@
    hot: true,
    proxy: {
      '/api': {
        // target: 'http://192.168.56.107:8077',
        target: 'http://192.168.1.104:8078',
        target: 'http://192.168.56.107:8088',
        // target: 'http://192.168.1.104:8078',
        changeOrigin: true,
        // pathRewrite: {
        //   '^/api': ''