tcctyn-ui/src/views/systemTemplate/forestFire/Toolbar/Toolbar.vue

<template>
    <div class="toolbar-box">
      <div class="toolbar-title" :class="{ 'open': isOpen }" :title="isOpen ? '收起工具栏' : '展开工具栏'" @click="isOpen = !isOpen">
        <span>工具栏</span>
        <el-icon v-if="isOpen" style="font-size: 18px;"><DArrowRight /></el-icon>
        <el-icon v-if="!isOpen" style="font-size: 28px;"><DArrowLeft /></el-icon>
      </div>
      <div class="toolbar-content">
        <div v-if="isOpen" class="toolbar-item" v-for="(item, index) in options" :key="index" :title="item.label" @click="bus.emit(`toolbar_${item.name}`, params)">
          <img :src="item.icon" alt="" />
          <span class="toolbar-label">{{ item.label }}</span>
        </div>
      </div>
    </div>
</template>

<script setup>
import * as Cesium from 'cesium';

import { useDrawTool } from '@/components/CesiumMap/mixins/useDrawTool';
import { useEventBus } from '@/components/CesiumMap/mixins/useEventBus';
import { useMeasureTool } from '@/components/CesiumMap/mixins/useMeasureTool';
import { 
  drawLocation,
	drawPolyline,
	drawPolygon,
	drawCurvePolygon,
	drawStraightArrow,
	drawWideArrow,
	drawAttackArrow,
	drawDoubleArrow,
	drawMeasureDistance,
	drawMeasureArea
} from './baseDraw'
import {
  drawWatersource,
  drawWarehouse
} from './forestFireDraw'

import toolbarLocationIcon from '@/assets/icons/toolbar_location.png';
import toolbarPolylineIcon from '@/assets/icons/toolbar_polyline.png';
import toolbarPolygonIcon from '@/assets/icons/toolbar_polygon.png';
import toolbarCurvePolygonIcon from '@/assets/icons/toolbar_curve_polygon.png';
import toolbarStraightArrowIcon from '@/assets/icons/toolbar_straight_arrow.png';
import toolbarWideArrowIcon from '@/assets/icons/toolbar_wide_arrow.png';
import toolbarAttackArrowIcon from '@/assets/icons/toolbar_attack_arrow.png';
import toolbarDoubleArrowIcon from '@/assets/icons/toolbar_double_arrow.png';
import toolbarMeasureDistanceIcon from '@/assets/icons/toolbar_measure_distance.png';
import toolbarMeasureAreaIcon from '@/assets/icons/toolbar_measure_area.png';
import toolbarWarehouseIcon from '@/assets/icons/toolbar_warehouse.png';
import toolbarWatersourceIcon from '@/assets/icons/toolbar_watersource.png';
import toolbarClearIcon from '@/assets/icons/toolbar_clear.png';


const props = defineProps({
  viewer: {
    default: null
  }
})

// 初始化地图实例
let viewer = null
let drawTool = null
let measureTool = null
let bus = null
let toolbarLayer = null
let primitiveList = []
let params = {}
const isOpen = ref(false)
const options = ref([{
  name: 'location',
  label: '位置',
  icon: toolbarLocationIcon
}, {
  name: 'polyline',
  label: '线',
  icon: toolbarPolylineIcon
}, {
  name: 'polygon',
  label: '面',
  icon: toolbarPolygonIcon
}, {
  name: 'curvePolygon',
  label: '曲面',
  icon: toolbarCurvePolygonIcon
}, {
  name: 'straightArrow',
  label: '直箭头',
  icon: toolbarStraightArrowIcon
}, {
  name: 'wideArrow',
  label: '宽箭头',
  icon: toolbarWideArrowIcon
}, {
  name: 'attackArrow',
  label: '攻击箭头',
  icon: toolbarAttackArrowIcon
}, {
  name: 'doubleArrow',
  label: '双箭头',
  icon: toolbarDoubleArrowIcon
}, {
  name: 'measureDistance',
  label: '测距',
  icon: toolbarMeasureDistanceIcon
}, {
  name: 'measureArea',
  label: '测面',
  icon: toolbarMeasureAreaIcon
}, {
  name: 'warehouse',
  label: '仓库',
  icon: toolbarWarehouseIcon
}, {
  name: 'watersource',
  label: '水源',
  icon: toolbarWatersourceIcon
}, {
  name: 'clear',
  label: '清除',
  icon: toolbarClearIcon
}])

// 清除工具栏上的所有绘制实体
const toolbarClear = () => {
  if (!viewer || !toolbarLayer) return;
  
  // 清除所有绘制的实体
  toolbarLayer.entities.removeAll();
  // 清除所有绘制的图元
  for (let index = primitiveList.length - 1; index >= 0; index--) {
    const p = primitiveList[index];
    if(viewer.scene.primitives.contains(p)) {
      viewer.scene.primitives.remove(p);
      primitiveList.splice(index, 1);
    }
  }
  measureTool?.clear();
  
  // 清除当前测量
  if (measureTool) {
    measureTool.abort();
  }
  
  // 清除当前绘制
  if (drawTool) {
    drawTool.abort();
  }
};

watch(() => props.viewer, (v) => {
  if (v) {
    viewer = v;
    
    // 添加绘制图层
    toolbarLayer = new Cesium.CustomDataSource('toolbarLayer');
    viewer.dataSources.add(toolbarLayer);

    drawTool = useDrawTool(viewer);
    measureTool = useMeasureTool(viewer);
    // 绑定事件
    params = {
      drawTool,
      measureTool,
      viewer,
      toolbarLayer,
      primitiveList,
    }
    bus = useEventBus(viewer);
    bus.on('toolbar_location', drawLocation);
    bus.on('toolbar_polyline', drawPolyline);
    bus.on('toolbar_polygon', drawPolygon);
    bus.on('toolbar_curvePolygon', drawCurvePolygon);
    bus.on('toolbar_straightArrow', drawStraightArrow);
    bus.on('toolbar_wideArrow', drawWideArrow);
    bus.on('toolbar_attackArrow', drawAttackArrow);
    bus.on('toolbar_doubleArrow', drawDoubleArrow);
    bus.on('toolbar_measureDistance', drawMeasureDistance);
    bus.on('toolbar_measureArea', drawMeasureArea);
    bus.on('toolbar_watersource', drawWatersource);
    bus.on('toolbar_warehouse', drawWarehouse);
    bus.on('toolbar_clear', toolbarClear);
  }
}, { immediate: true });

</script>

<style lang="scss" scoped>
.toolbar-box {
  .toolbar-title {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    color: #8EF8FF;
    background-color: rgba(7, 111, 111, 0.7);
    padding: 4px;
    border-radius: 4px;
    cursor: pointer;
    margin: 0 4px 4px 0;

    &.open {
      flex-direction: row;
      align-items: end;
    }
  }
}
.toolbar-content {
  max-height: 420px;
  font-size: 12px;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  // justify-content: space-around;
  
  .toolbar-item {
    width: 48px;
    height: 48px;
    color: #8EF8FF;
    background-color: rgba(7, 111, 111, 0.7);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin: 0 4px 4px 0;
    border-radius: 4px;
    cursor: pointer;

    &:hover {
      background-color: rgba(255, 215, 0, 0.5);
    }
    .toolbar-label {
      width: 100%;
      text-align: center;
      text-overflow: ellipsis;
      overflow: hidden;
      word-break: break-all;
      white-space: nowrap;
    }
  }
}
</style>