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

guonan

2025-06-17 be9c1145fc79165142fbe29aacb04dd8e34dd23f

 src/utils/area.js

@@ -1,112 +1,116 @@
let areaPrimitives = []
let areaDataSource = []

export function loadAreaPolygon(url, isPolluted = false) {
   let color = new Cesium.Color(1.0, 0.0, 0.0, 0.1)
/**
 * 将避险场所数据转为 GeoJSON FeatureCollection
 */
export function convertToGeoJson(data, offset = 0.0001) {
   const features = data.map((item) => {
      const lon = parseFloat(item.lon);
      const lat = parseFloat(item.lat);

      // 构造一个小正方形区域（5米左右）
      const coordinates = [
         [
            [lon, lat],
            [lon + offset, lat],
            [lon + offset, lat - offset],
            [lon, lat - offset],
            [lon, lat],
         ],
      ];

      return {
         type: "Feature",
         properties: {
            id: item.safeHavenId,
            name: item.safeHavenName,
            locationInfo: item.locationInfo,
            area: item.area,
            safeHavenType: item.safeHavenType,
            accommodatePersonNum: item.accommodatePersonNum,
            planResettlementPersonNum: item.planResettlementPersonNum,
            materialReserve: item.materialReserve,
            remark: item.remark,
         },
         geometry: {
            type: "MultiPolygon",
            coordinates: [coordinates],
         },
      };
   });

   return {
      type: "FeatureCollection",
      name: "emergency_area",
      crs: {
         type: "name",
         properties: {
            name: "urn:ogc:def:crs:OGC:1.3:CRS84",
         },
      },
      features,
   };
}


export function loadAreaPolygon(geoJsonData, isPolluted = false) {
   let color = new Cesium.Color(1.0, 0.0, 0.0, 0.1);
   if (isPolluted) {
      color = Cesium.Color.GREEN
      color = Cesium.Color.GREEN;
   }

   // 使用 GeoJsonDataSource 加载 GeoJSON 数据
   const dataSourcePromise = Cesium.GeoJsonDataSource.load(url, {
   const dataSourcePromise = Cesium.GeoJsonDataSource.load(geoJsonData, {
      clampToGround: true,
   })
   });

   // 获取 GeoJSON 中的第一个 Polygon feature
   return dataSourcePromise.then(function (dataSource) {
      viewer.dataSources.add(dataSource)
      // console.log("dataSource", dataSource)
      // 获取 GeoJSON 中的第一个 Polygon feature
      areaDataSource.push(dataSource)
      viewer.dataSources.add(dataSource);
      areaDataSource.push(dataSource);

      // const polygonEntity = dataSource.entities.values[0]
      // let areaPrimitive = createAreaPolygon(polygonEntity, color)
      // areaPrimitives.push(areaPrimitive)

      // return areaPrimitive

      const polygonEntity = dataSource.entities.values
      // console.log("polygonEntity", polygonEntity)
      const distanceDisplayCondition = new Cesium.DistanceDisplayCondition(1000, 50000000)
      const polygonEntity = dataSource.entities.values;
      const distanceDisplayCondition = new Cesium.DistanceDisplayCondition(1000, 50000000);
      polygonEntity.forEach(entity => {
         // console.log("entity", entity)
         entity.polygon.material = new Cesium.ColorMaterialProperty(color);

         entity.polygon.material = new Cesium.ColorMaterialProperty(
            // Cesium.Color.LIGHTSTEELBLUE.withAlpha(0.2)
            color
            // new Cesium.Color.fromCssColorString("#0f2636b3")
            // Cesium.Color.fromRandom({
            //    alpha: 0.5,
            //    minimumAlpha: 0.2,
            //    maximumAlpha: 0.9,
            // })
         )
         const properties = entity.properties;
         const fullname = properties.name.getValue();

         // entity.polygon.distanceDisplayCondition = distanceDisplayCondition
         const positions = entity.polygon.hierarchy._value.positions;

         const properties = entity.properties
         const fullname = properties.name.getValue()

         const positions = entity.polygon.hierarchy._value.positions

         // entity.position = positions
         entity.label = {
            // 文本。支持显式换行符“ \ n”
            text: fullname || "默认标签",
            // 字体样式，以CSS语法指定字体
            font: "20pt Source Han Sans CN",
            // 字体颜色

            fillColor: Cesium.Color.WHITE,
            // 背景颜色
            backgroundColor: Cesium.Color.BLACK.withAlpha(0.8),
            // 是否显示背景颜色
            showBackground: false,
            // 字体边框
            outline: true,
            // 字体边框颜色
            outlineColor: Cesium.Color.WHITE,
            // 字体边框尺寸
            outlineWidth: 0,
            // 应用于图像的统一比例。比例大于会1.0放大标签，而比例小于会1.0缩小标签。
            scale: 1.0,
            scaleByDistance: new Cesium.NearFarScalar(1.5e2, 1.0, 1.5e7, 0.5),
            // 设置样式：FILL：填写标签的文本，但不要勾勒轮廓；OUTLINE：概述标签的文本，但不要填写；FILL_AND_OUTLINE：填写并概述标签文本。
            style: Cesium.LabelStyle.FILL_AND_OUTLINE,
            // 相对于坐标的水平位置
            verticalOrigin: Cesium.VerticalOrigin.CENTER,
            // 相对于坐标的水平位置
            horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
            // 该属性指定标签在屏幕空间中距此标签原点的像素偏移量
            pixelOffset: new Cesium.Cartesian2(0, 0),
            // pixelOffset: new Cesium.Cartesian2(0, 0),
            // 显示在距相机的距离处的属性，多少区间内是可以显示的
            // distanceDisplayCondition: distanceDisplayCondition,
            // : new Cesium.DistanceDisplayCondition(0, 50000),
            heightReference: Cesium.HeightReference.RELATIVE_TO_GROUND,
            disableDepthTestDistance: Number.POSITIVE_INFINITY,
            // 是否显示
            show: true,
         }
         };
         entity.polyline = {
            positions: positions,
            width: 2,
            material: new Cesium.ColorMaterialProperty(
               Cesium.Color.YELLOW
               // Cesium.Color.fromRandom({
               //    alpha: 0.5,
               //    minimumAlpha: 0.2,
               //    maximumAlpha: 0.9,
               // })
            ),
            material: new Cesium.ColorMaterialProperty(Cesium.Color.YELLOW),
            clampToGround: true,
            // distanceDisplayCondition: distanceDisplayCondition,
         }
         };

         viewer.entities.add(entity)
      })
         viewer.entities.add(entity);
      });

      return polygonEntity
   })
      return polygonEntity;
   });
}
function createAreaPolygon(polygonEntity, color, height) {
   if (!polygonEntity) return
@@ -140,29 +144,29 @@
}

export function clearAreaPolygon() {
    // 1. 清除通过 viewer.entities 添加的实体
    if (Array.isArray(areaDataSource)) {
        areaDataSource.forEach(dataSource => {
            // 移除数据源中的所有实体
            dataSource.entities.values.forEach(entity => {
                viewer.entities.remove(entity);
            });
            // 移除数据源本身
            viewer.dataSources.remove(dataSource);
        });
        areaDataSource = [];
    }
   // 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 = [];
    }
   // 2. 清除通过 viewer.scene.primitives 添加的图元
   if (Array.isArray(areaPrimitives)) {
      areaPrimitives.forEach(primitive => {
         viewer.scene.primitives.remove(primitive);
      });
      areaPrimitives = [];
   }

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

export function initAreaLine() {
@@ -236,3 +240,4 @@
   })
   viewer.dataSources.add(dataSourcePromise)
}