tcctyn-ui/src/views/systemTemplate/forestFire/Toolbar/forestFireDraw.js

import * as Cesium from 'cesium'
import DialogPropertyGrid from '../DialogPropertyGrid';
import { setPropertyData } from '../DialogPropertyGrid/property';
import FeatureGroundPrimitive from '@/components/CesiumMap/FeatureGroundPrimitive';
import { getDistance, getArea, getBoundingCenterCoordinate, getBoundingCenter } from '@/components/CesiumMap/mixins/useMeasureTool';
import { parseTime } from '@/utils/ruoyi';

import fireWarningIcon from '@/assets/icons/fire_warning.png';
import fireRangerIcon from '@/assets/icons/fire_ranger.png';
import firePtzIcon from '@/assets/icons/fire_ptz.png';
import fireBayonetIcon from '@/assets/icons/fire_bayonet.png';
import fireAirportIcon from '@/assets/icons/fire_airport.png';
import fireHotIcon from '@/assets/icons/fire_hot.png';
import fireWarehouseIcon from '@/assets/icons/fire_warehouse.png';

// 绘制火情点
const drawWarning = (options) => {
  const { drawTool, measureTool, toolbarLayer } = options;
  if(!drawTool) {
    console.error('绘制工具未初始化');
    return;
  }

  drawTool.abort();
  measureTool.abort();
  drawTool.drawPoint().then((position) => {
    // 计算中心点坐标
    const center = Cesium.Cartographic.fromCartesian(position);
    // 获取当前时间
    const time = new Date()
    
    const entity = toolbarLayer?.entities.add({
      position,
      billboard: {
        image: fireWarningIcon,
        verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
        pixelOffset: new Cesium.Cartesian2(0, 18), // 可选偏移
      },
      label: {
        text: '',
        font: '14px sans-serif',
        pixelOffset: new Cesium.Cartesian2(0, 18 - 96 - 6),
        verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
        heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
        showBackground: true,
        backgroundColor : Cesium.Color.fromBytes(255, 0, 0).withAlpha(0.4),
        backgroundPadding: new Cesium.Cartesian2(8, 4),
      },
      properties: {
        __type: 'warning',
        longitude: Cesium.Math.toDegrees(center.longitude).toFixed(6),
        latitude: Cesium.Math.toDegrees(center.latitude).toFixed(6),
        discoveryTime: parseTime(time),
      }
    });
    // 编辑属性
    DialogPropertyGrid.show(entity, (data) => {
      // 更新实体属性
      setPropertyData(data, entity);
      // 调用接口
    });
  });
};

// 绘制巡护路线
const drawTrack = (options) => {
  const { drawTool, measureTool, toolbarLayer } = options;
  if(!drawTool) {
    console.error('绘制工具未初始化');
    return;
  }

  drawTool.abort();
  measureTool.abort();
  drawTool.drawPolyline().then((positions) => {
    // 计算中心点坐标
    const position = getBoundingCenter(positions, 100);
    
    const entity = toolbarLayer?.entities.add({
      position,
      polyline: {
        positions,
        width: 8,
        material: Cesium.Color.fromCssColorString('#DCE057'),
        clampToGround: true,
      },
      label: {
        text: '',
        font: '14px Sans-Serif',
        fillColor: Cesium.Color.fromCssColorString('#DCE057'),
        outlineColor: Cesium.Color.fromCssColorString('#FFFFFF'),
        outlineWidth: 2,
        style: Cesium.LabelStyle.FILL_AND_OUTLINE,
        pixelOffset: new Cesium.Cartesian2(0, -5),
        verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
        heightReference: Cesium.HeightReference.RELATIVE_TO_GROUND,
      },
      properties: {
        __type: 'track',
        length: getDistance(positions).toFixed(2),
      }
    });
    // 编辑属性
    DialogPropertyGrid.show(entity, (data) => {
      // 更新实体属性
      setPropertyData(data, entity);
      // 调用接口
    });
  });
};

// 绘制护林员（点）
const drawRanger = (options) => {
  const { drawTool, measureTool, toolbarLayer } = options;
  if(!drawTool) {
    console.error('绘制工具未初始化');
    return;
  }

  drawTool.abort();
  measureTool.abort();
  drawTool.drawPoint().then((position) => {
    // 计算中心点坐标
    const center = Cesium.Cartographic.fromCartesian(position);
    
    const entity = toolbarLayer?.entities.add({
      position,
      billboard: {
        image: fireRangerIcon,
        verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
        pixelOffset: new Cesium.Cartesian2(0, 18), // 可选偏移
      },
      label: {
        text: '',
        font: '14px sans-serif',
        pixelOffset: new Cesium.Cartesian2(0, 18 - 96 - 6),
        verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
        heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
        showBackground: true,
        backgroundColor : Cesium.Color.fromBytes(155, 206, 255).withAlpha(0.15),
        backgroundPadding: new Cesium.Cartesian2(8, 4),
      },
      properties: {
        __type: 'ranger',
        longitude: Cesium.Math.toDegrees(center.longitude).toFixed(6),
        latitude: Cesium.Math.toDegrees(center.latitude).toFixed(6),
      }
    });
    // 编辑属性
    DialogPropertyGrid.show(entity, (data) => {
      // 更新实体属性
      setPropertyData(data, entity);
      // 调用接口
    });
  });
};

// 绘制云台（点）
const drawPtz = (options) => {
  const { drawTool, measureTool, toolbarLayer } = options;
  if(!drawTool) {
    console.error('绘制工具未初始化');
    return;
  }

  drawTool.abort();
  measureTool.abort();
  drawTool.drawPoint().then((position) => {
    // 计算中心点坐标
    const center = Cesium.Cartographic.fromCartesian(position);
    
    const entity = toolbarLayer?.entities.add({
      position,
      billboard: {
        image: firePtzIcon,
        verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
        pixelOffset: new Cesium.Cartesian2(0, 18), // 可选偏移
      },
      label: {
        text: '',
        font: '14px sans-serif',
        pixelOffset: new Cesium.Cartesian2(0, 18 - 96 - 6),
        verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
        heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
        showBackground: true,
        backgroundColor : Cesium.Color.fromBytes(35, 206, 235).withAlpha(0.45),
        backgroundPadding: new Cesium.Cartesian2(8, 4),
      },
      properties: {
        __type: 'ptz',
        longitude: Cesium.Math.toDegrees(center.longitude).toFixed(6),
        latitude: Cesium.Math.toDegrees(center.latitude).toFixed(6),
      }
    });
    // 编辑属性
    DialogPropertyGrid.show(entity, (data) => {
      // 更新实体属性
      setPropertyData(data, entity);
      // 调用接口
    });
  });
};

// 绘制卡口（点）
const drawBayonet = (options) => {
  const { drawTool, measureTool, toolbarLayer } = options;
  if(!drawTool) {
    console.error('绘制工具未初始化');
    return;
  }

  drawTool.abort();
  measureTool.abort();
  drawTool.drawPoint().then((position) => {
    // 计算中心点坐标
    const center = Cesium.Cartographic.fromCartesian(position);
    
    const entity = toolbarLayer?.entities.add({
      position,
      billboard: {
        image: fireBayonetIcon,
        verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
        pixelOffset: new Cesium.Cartesian2(0, 18), // 可选偏移
      },
      label: {
        text: '',
        font: '14px sans-serif',
        pixelOffset: new Cesium.Cartesian2(0, 18 - 96 - 6),
        verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
        heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
        showBackground: true,
        backgroundColor : Cesium.Color.fromBytes(233, 189, 128).withAlpha(0.45),
        backgroundPadding: new Cesium.Cartesian2(8, 4),
      },
      properties: {
        __type: 'bayonet',
        longitude: Cesium.Math.toDegrees(center.longitude).toFixed(6),
        latitude: Cesium.Math.toDegrees(center.latitude).toFixed(6),
      }
    });
    // 编辑属性
    DialogPropertyGrid.show(entity, (data) => {
      // 更新实体属性
      setPropertyData(data, entity);
      // 调用接口
    });
  });
};

// 绘制热点
const drawHot = (options) => {
  const { drawTool, measureTool, toolbarLayer } = options;
  if(!drawTool) {
    console.error('绘制工具未初始化');
    return;
  }

  drawTool.abort();
  measureTool.abort();
  drawTool.drawPoint().then((position) => {
    // 计算中心点坐标
    const center = Cesium.Cartographic.fromCartesian(position);
    
    const entity = toolbarLayer?.entities.add({
      position,
      billboard: {
        image: fireHotIcon,
        verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
        pixelOffset: new Cesium.Cartesian2(0, 18), // 可选偏移
      },
      label: {
        text: '',
        font: '14px sans-serif',
        pixelOffset: new Cesium.Cartesian2(0, 18 - 96 - 6),
        verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
        heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
        showBackground: true,
        backgroundColor : Cesium.Color.fromBytes(255, 0, 0).withAlpha(0.4),
        backgroundPadding: new Cesium.Cartesian2(8, 4),
      },
      properties: {
        __type: 'hot',
        longitude: Cesium.Math.toDegrees(center.longitude).toFixed(6),
        latitude: Cesium.Math.toDegrees(center.latitude).toFixed(6),
      }
    });
    // 编辑属性
    DialogPropertyGrid.show(entity, (data) => {
      // 更新实体属性
      setPropertyData(data, entity);
      // 调用接口
    });
  });
};

// 绘制无人机机场（点）
const drawAirport = (options) => {
  const { drawTool, measureTool, toolbarLayer } = options;
  if(!drawTool) {
    console.error('绘制工具未初始化');
    return;
  }

  drawTool.abort();
  measureTool.abort();
  drawTool.drawPoint().then((position) => {
    // 计算中心点坐标
    const center = Cesium.Cartographic.fromCartesian(position);
    
    const entity = toolbarLayer?.entities.add({
      position,
      billboard: {
        image: fireAirportIcon,
        verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
        pixelOffset: new Cesium.Cartesian2(0, 18), // 可选偏移
      },
      label: {
        text: '',
        font: '14px sans-serif',
        pixelOffset: new Cesium.Cartesian2(0, 18 - 96 - 6),
        verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
        heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
        showBackground: true,
        backgroundColor : Cesium.Color.fromBytes(164, 255, 147).withAlpha(0.4),
        backgroundPadding: new Cesium.Cartesian2(8, 4),
      },
      properties: {
        __type: 'airport',
        longitude: Cesium.Math.toDegrees(center.longitude).toFixed(6),
        latitude: Cesium.Math.toDegrees(center.latitude).toFixed(6),
      }
    });
    // 编辑属性
    DialogPropertyGrid.show(entity, (data) => {
      // 更新实体属性
      setPropertyData(data, entity);
      // 调用接口
    });
  });
};

// 绘制水源地（面）
const drawWatersource = (options) => {
  const { drawTool, measureTool, viewer, primitiveList } = options;
  if(!drawTool) {
    console.error('绘制工具未初始化');
    return;
  }

  drawTool.abort();
  measureTool.abort();
  drawTool.drawPolygon().then((positions) => {
    // 计算中心点坐标
    const center = getBoundingCenterCoordinate(positions);

    // // 添加水源地实体
    // const entity = toolbarLayer?.entities.add({
    //   // polyline: {
    //   //   positions:[...positions, positions[0]], // 闭合多边形
    //   //   width: 2,
    //   //   material: Cesium.Color.BLUE,
    //   // },
    //   polygon: {
    //     hierarchy: positions,
    //     material: riverMaterial,
    //     // material: Cesium.Color.BLUE.withAlpha(0.5),
    //   },
    //   properties: {
    //     __type: 'watersource',
    //     name: '',
    //     area: getArea(positions).toFixed(2), // 面积
    //     longitude: center[0].toFixed(6),
    //     latitude: center[1].toFixed(6),
    //     volume: 0 // 储水量，默认0
    //   }
    // });

    const waterMaterial = new Cesium.Material({
      fabric: {
        type: 'Water',
        uniforms: {
          normalMap: Cesium.buildModuleUrl('Assets/Textures/waterNormals.jpg'),
          baseWaterColor: new Cesium.Color(
            64 / 255.0,
            157 / 255.0,
            253 / 255.0,
            0.6
          ),
          // blendColor: new Cesium.Color(0.0, 0.5, 1.0, 1.0),
          // frequency: 10.0,
          // animationSpeed: 0.05,
          // amplitude: 10,
          // specularIntensity: 0.5,
          // alpha: 0.1
          frequency: 1000.0,
          animationSpeed: 0.1,
          amplitude: 10,
          specularIntensity: 1.5,
        }
      }
    });

    const waterPrimitive = new FeatureGroundPrimitive({
      geometryInstances: new Cesium.GeometryInstance({
        geometry: new Cesium.PolygonGeometry({
            polygonHierarchy: new Cesium.PolygonHierarchy(positions),
            vertexFormat: Cesium.EllipsoidSurfaceAppearance.VERTEX_FORMAT,
        })
      }),
      appearance: new Cesium.EllipsoidSurfaceAppearance({
        material: waterMaterial,
      })
    }, {
      __type: 'watersource',
      name: '',
      area: getArea(positions).toFixed(2), // 面积
      longitude: center[0].toFixed(6),
      latitude: center[1].toFixed(6),
      volume: 0 // 储水量，默认0
    });

    // 将 Primitive 添加到场景中
    viewer.scene.primitives.add(waterPrimitive);
    primitiveList.push(waterPrimitive);

    // 编辑属性
    DialogPropertyGrid.show(waterPrimitive, (data) => {
      // 更新实体属性
      setPropertyData(data, waterPrimitive);
      // 调用接口
    });
  });
};

// 绘制仓库（点）
const drawWarehouse = (options) => {
  const { drawTool, measureTool, toolbarLayer } = options;
  if(!drawTool) {
    console.error('绘制工具未初始化');
    return;
  }

  drawTool.abort();
  measureTool.abort();
  drawTool.drawPoint().then((position) => {
    // 计算中心点坐标
    const center = Cesium.Cartographic.fromCartesian(position);
    
    const entity = toolbarLayer?.entities.add({
      position,
      billboard: {
        image: fireWarehouseIcon,
        verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
        pixelOffset: new Cesium.Cartesian2(0, 18), // 可选偏移
      },
      label: {
        text: '',
        font: '14px sans-serif',
        pixelOffset: new Cesium.Cartesian2(0, 18 - 96 - 6),
        verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
        heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
        showBackground: true,
        backgroundColor : Cesium.Color.fromBytes(155, 206, 255).withAlpha(0.4),
        backgroundPadding: new Cesium.Cartesian2(8, 4),
      },
      properties: {
        __type: 'warehouse',
        name: '',
        longitude: Cesium.Math.toDegrees(center.longitude).toFixed(6),
        latitude: Cesium.Math.toDegrees(center.latitude).toFixed(6),
      }
    });
    // 编辑属性
    DialogPropertyGrid.show(entity, (data) => {
      // 更新实体属性
      setPropertyData(data, entity);
      // 调用接口
    });
  });
};

// 绘制林区道路
const drawRoad = (options) => {
  const { drawTool, measureTool, toolbarLayer } = options;
  if(!drawTool) {
    console.error('绘制工具未初始化');
    return;
  }

  drawTool.abort();
  measureTool.abort();
  drawTool.drawPolyline().then((positions) => {
    // 计算中心点坐标
    const position = getBoundingCenter(positions, 100);
    
    const entity = toolbarLayer?.entities.add({
      position,
      polyline: {
        positions,
        width: 5,
        material: new Cesium.PolylineOutlineMaterialProperty({
          color: Cesium.Color.fromCssColorString('#fecd78'),
          outlineColor: Cesium.Color.fromCssColorString('#d29661'),
          outlineWidth: 2,
        }),
        clampToGround: true,
      },
      label: {
        text: '',
        font: '14px Sans-Serif',
        fillColor: Cesium.Color.fromCssColorString('#fecd78'),
        outlineColor: Cesium.Color.fromCssColorString('#FFFFFF'),
        outlineWidth: 2,
        style: Cesium.LabelStyle.FILL_AND_OUTLINE,
        pixelOffset: new Cesium.Cartesian2(0, -5),
        verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
        heightReference: Cesium.HeightReference.RELATIVE_TO_GROUND,
      },
      properties: {
        __type: 'road',
        length: getDistance(positions).toFixed(2),
      }
    });
    // 编辑属性
    DialogPropertyGrid.show(entity, (data) => {
      // 更新实体属性
      setPropertyData(data, entity);
      // 调用接口
    });
  });
};

// 绘制重点区域（面）
const drawKeyarea = (options) => {
  const { drawTool, measureTool, toolbarLayer } = options;
  if(!drawTool) {
    console.error('绘制工具未初始化');
    return;
  }

  drawTool.abort();
  measureTool.abort();
  drawTool.drawPolygon().then((positions) => {
    // 计算中心点坐标
    const center = getBoundingCenterCoordinate(positions);

    // 添加实体
    const entity = toolbarLayer?.entities.add({
      position: Cesium.Cartesian3.fromDegrees(center[0], center[1], 100),
      label: {
        text: '',
        font: '14px Sans-Serif',
        fillColor: Cesium.Color.RED,
        outlineColor: Cesium.Color.fromCssColorString('#FFFFFF'),
        outlineWidth: 2,
        style: Cesium.LabelStyle.FILL_AND_OUTLINE,
        pixelOffset: new Cesium.Cartesian2(0, -5),
        verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
        heightReference: Cesium.HeightReference.RELATIVE_TO_GROUND,
      },
      polyline: {
        positions:[...positions, positions[0]], // 闭合多边形
        width: 2,
        material: Cesium.Color.RED,
        clampToGround: true,
      },
      polygon: {
        hierarchy: positions,
        material: Cesium.Color.RED.withAlpha(0.3),
        heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
      },
      properties: {
        __type: 'keyarea',
        area: getArea(positions).toFixed(2), // 面积
        longitude: center[0].toFixed(6),
        latitude: center[1].toFixed(6),
      }
    });

    // 编辑属性
    DialogPropertyGrid.show(entity, (data) => {
      // 更新实体属性
      setPropertyData(data, entity);
      // 调用接口
    });
  });
};

export {
  drawWarning,
  drawTrack,
  drawRanger,
  drawPtz,
  drawBayonet,
  drawAirport,
  drawHot,
  drawWarehouse,
  drawWatersource,
  drawRoad,
  drawKeyarea,
}