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

guonan

2025-05-06 ddf60f1de7a1632e5673806838aa1ef74fd3886b

 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>