cesium-map-object/ruoyi-ui/src/views/cesiumMap/DrawingToolbar.vue

<template>
  <div class="drawing-toolbar" v-if="drawDomClick">
    <div class="toolbar-icons">
      <div
        v-for="item in toolbarItems"
        :key="item.id"
        class="toolbar-item"
        :class="{ active: drawingMode === item.id }"
        @click="handleItemClick(item)"
        :title="item.name"
      >
        <svg-icon v-if="isSvgIcon(item.icon)" :icon-class="item.icon" class="toolbar-svg-icon" />
        <i v-else :class="item.icon"></i>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'DrawingToolbar',
  props: {
    drawDomClick: {
      type: Boolean,
      default: false
    },
    drawingMode: {
      type: String,
      default: null
    },
    hasEntities: {
      type: Boolean,
      default: false
    },
    toolMode: {
      type: String,
      default: 'airspace' // 'airspace' or 'ranging'
    }
  },
  data() {
    return {
      // 完整工具列表（空域模式，移除点和线）
      allToolbarItems: [
        { id: 'mouse', name: '鼠标', icon: 'cursor' },
        { id: 'polygon', name: '多边形空域', icon: 'el-icon-house' },
        { id: 'rectangle', name: '矩形空域', icon: 'jx' },
        { id: 'circle', name: '圆形空域', icon: 'circle' },
        { id: 'sector', name: '扇形空域', icon: 'sx' },
        { id: 'arrow', name: '箭头', icon: 'el-icon-right' },
        { id: 'text', name: '文本', icon: 'el-icon-document' },
        { id: 'image', name: '图片', icon: 'el-icon-picture-outline' },
        { id: 'locate', name: '定位', icon: 'el-icon-aim' },
        { id: 'clear', name: '清除', icon: 'el-icon-delete' },
        { id: 'import', name: '导入', icon: 'el-icon-upload' },
        { id: 'export', name: '导出', icon: 'el-icon-download' }
      ],
      // 测距模式工具列表
      rangingToolbarItems: [
        { id: 'mouse', name: '鼠标', icon: 'cursor' },
        { id: 'point', name: '点', icon: 'el-icon-location' },
        { id: 'line', name: '线', icon: 'el-icon-edit-outline' },
        { id: 'clear', name: '清除', icon: 'el-icon-delete' }
      ]
    }
  },
  computed: {
    toolbarItems() {
      if (this.toolMode === 'ranging') {
        return this.rangingToolbarItems;
      } else {
        return this.allToolbarItems;
      }
    }
  },
  methods: {
    /** 判断是否为本地 SVG 图标（非 Element 的 el-icon-* 类名） */
    isSvgIcon(icon) {
      return icon && typeof icon === 'string' && !icon.startsWith('el-icon-')
    },

    handleItemClick(item) {
      if (item.id === 'clear') {
        this.$emit('clear-all')
      } else if (item.id === 'export') {
        this.$emit('export-data')
      } else if (item.id === 'import') {
        this.$emit('import-data')
      } else if (item.id === 'locate') {
        this.$emit('locate')
      } else if (item.id === 'mouse') {
        this.$emit('toggle-drawing', null)
      } else {
        this.$emit('toggle-drawing', item.id)
      }
    }
  }
}
</script>

<style scoped>
.drawing-toolbar {
  position: absolute;
  top: 70px;
  right: 20px;
  width: 36px;
  background: rgba(255, 255, 255, 0.3);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(0, 138, 255, 0.1);
  border-radius: 8px;
  z-index: 90;
  box-shadow: 0 4px 12px rgba(0, 138, 255, 0.2);
  padding: 12px 2px;
  transition: all 0.3s ease;
  overflow: hidden;
  opacity: 1;
  transform: translateX(0);
}

.toolbar-icons {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 30px;
}

.toolbar-item {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 32px;
  height: 32px;
  cursor: pointer;
  color: #555;
  font-size: 16px;
  position: relative;
  transition: all 0.3s;
  border-radius: 4px;
  padding: 0;
  background: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(5px);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.toolbar-item:hover {
  background: rgba(0, 138, 255, 0.1);
  color: #008aff;
  transform: translateY(-2px);
  box-shadow: 0 4px 10px rgba(0, 138, 255, 0.2);
}

.toolbar-item.active {
  background: rgba(0, 138, 255, 0.15);
  color: #008aff;
  box-shadow: 0 2px 8px rgba(0, 138, 255, 0.3);
}

.toolbar-item .toolbar-svg-icon {
  width: 1em;
  height: 1em;
  font-size: 16px;
}

.toolbar-item:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
</style>