guonan
2025-05-23 fef12378282c0a8cf44411b079ac20ad4f397817
src/views/GisView.vue
@@ -27,7 +27,7 @@
  // 1. 设置初始时间
  const date = new Date(2025, 3, 11, 12, 0, 0, 0);
  const julianDate = SmartEarth.Cesium.JulianDate.fromDate(date);
  const julianDate = SmartEarth.Cesium.JulianDate.fromDate(date);
  // earthCtrl.viewer.clock.currentTime = julianDate;
  // 2. 配置时钟选项,禁止自动推进时间
@@ -58,10 +58,13 @@
const MULTIPOLYGON_COORDS = ref([]);
let previousEntities = []; // 用于存储之前创建的实体
const flyToHeight = ref(null);
const ShowFill = ref(true);
// 监听新建方案选择的区域范围
EventBus.on("select-geom", ({ geom, flyHeight }) => {
EventBus.on("select-geom", ({ geom, flyHeight, shouldShowFill }) => {
  flyToHeight.value = flyHeight;
  ShowFill.value = shouldShowFill;
  console.log(ShowFill.value, "ShowFill.valueShowFill.value");
  const coordsStr = geom
    .replace("MULTIPOLYGON(((", "") // 去掉开头
    .replace(")))", ""); // 去掉结尾
@@ -87,7 +90,7 @@
  // 清除之前的所有实体
  clearPreviousEntities();
  // 选中区域标色
  addCustomPolygon();
  addCustomPolygon(ShowFill.value);
});
// 清除之前的所有实体
@@ -127,25 +130,27 @@
  };
}
function addCustomPolygon() {
function addCustomPolygon(ShowFill = true) {
  // 将 MULTIPOLYGON_COORDS.value 转换为 GeoJSON 格式
  const geoJson = convertToGeoJson(MULTIPOLYGON_COORDS.value);
  const center = geoJson.properties.center;
  // 创建多边形实体
  // 创建多边形实体,并根据 ShowFill 参数决定是否显示填充颜色
  const polygonEntity = viewer.entities.add({
    // name: "自定义区域",
    polygon: {
      hierarchy: Cesium.Cartesian3.fromDegreesArray(
        geoJson.geometry.coordinates[0][0].flat()
      ),
      material: Cesium.Color.RED.withAlpha(0.3), // 半透明红色填充
      material: ShowFill
        ? Cesium.Color.RED.withAlpha(0.3) // 半透明红色填充
        : new Cesium.ColorMaterialProperty(Cesium.Color.TRANSPARENT), // 如果不需要填充,则使用透明材质
      outline: true,
      outlineColor: Cesium.Color.RED, // 红色边框
      outlineWidth: 5,
      clampToGround: true, // 贴地显示
    },
  });
  previousEntities.push(polygonEntity);
  // 飞向中心点
@@ -154,14 +159,13 @@
      center.lon,
      center.lat,
      flyToHeight.value
    ), // 提高到 100000米高度
    ), // 提高到指定高度
    orientation: {
      heading: Cesium.Math.toRadians(0), // 正北方向
      pitch: Cesium.Math.toRadians(-90), // 向下倾斜90度(垂直俯视)
      roll: 0.0,
    },
  });
}
EventBus.on("close-selectArea", () => {
@@ -469,7 +473,7 @@
}
// // 修改指南针位置
/deep/ .compass {
    right: 128px !important;
    top: 112px;
  right: 128px !important;
  top: 112px;
}
</style>