feat:填充色

张含笑

2025-11-07 5dccbfc0221fee15aac6bf93479f05c34eb45fd1

feat:填充色

 src/views/layerManagement/index.vue

@@ -174,8 +174,6 @@
};
// 点击显示区域
const handleCoverDataUpdate = data => {
console.log('data',data);

  selectDataList.value = data;
  if (selectDataList.value.length > 0) {
    loadDataToMap(selectDataList.value);
@@ -184,9 +182,11 @@
  }
};
const loadDataToMap = dataList => {
console.log('dataList',dataList);

  if (!viewer) return;
  viewer.entities.removeAll();
  // 存储所有有效坐标，用于后续定位
  // 存储所有有效坐标
  tbJwdList = [];
  dataList.forEach(item => {
    let positions = parseGeoDataToPositions(item.geo_data, item.altitude);
@@ -194,11 +194,36 @@
      console.warn(`数据 ${item.name} 坐标点不足，无法绘制`);
      return;
    }
   
    tbJwdList.push(...positions);
    let degreesArray = [];
    positions.forEach(pos => {
      degreesArray.push(pos.lng, pos.lat, pos.height);
    });
     const colorMap = {
    1: Cesium.Color.fromCssColorString('#00ff06').withAlpha(0.5), // 绿色（填充色）
    2: Cesium.Color.fromCssColorString('#ff0000').withAlpha(0.5), // 红色（填充色）
    3: Cesium.Color.fromCssColorString('#00ffea').withAlpha(0.5), // 青色（填充色）
    // 边框色：去掉透明度，保持纯色
    border1: Cesium.Color.fromCssColorString('#00ff06'),
    border2: Cesium.Color.fromCssColorString('#ff0000'),
    border3: Cesium.Color.fromCssColorString('#00ffea'),
  };
   const fillColor = item.category_id === 1 
      ? colorMap[1] 
      : item.category_id === 2 
        ? colorMap[2] 
        : item.category_id === 3 
          ? colorMap[3] 
          : Cesium.Color.YELLOW.withAlpha(0.5);
    
    const borderColor = item.category_id === 1 
      ? colorMap.border1 
      : item.category_id === 2 
        ? colorMap.border2 
        : item.category_id === 3 
          ? colorMap.border3 
          : Cesium.Color.YELLOW;
    viewer.entities.add({
      id: `polygon_${item.id}`,
      customType: 'fence_polygon',
@@ -207,9 +232,9 @@
        hierarchy: new Cesium.PolygonHierarchy(
          Cesium.Cartesian3.fromDegreesArrayHeights(degreesArray)
        ),
        material: Cesium.Color.YELLOW.withAlpha(0.5), // 填充色
        material:fillColor, // 填充色
        outline: true, // 显示边框
        outlineColor: Cesium.Color.YELLOW, // 边框色
        outlineColor: borderColor, // 边框色
        outlineWidth: 2, // 边框宽度
        clampToGround: true, // 贴地显示
      },
@@ -217,7 +242,7 @@
      polyline: {
        positions: Cesium.Cartesian3.fromDegreesArrayHeights(degreesArray),
        width: 2,
        material: Cesium.Color.YELLOW,
        material:borderColor,
        clampToGround: true,
      },
      zIndex: 99, // 层级，确保在其他图层上方显示