1. 新增绘图模式的切换 2. 新增行政区划的切换展示

riku

2025-03-12 42f42dc88214f283b43c422f37e10ab45c5c5578

 src/components/map/MapToolbox.vue

@@ -1,17 +1,28 @@
<template>
  <el-dropdown
    class="fy-container dropdown-wrap"
    class="p-events-auto"
    trigger="click"
    size="small"
    @command="handleCommand"
  >
    <el-button type="primary" class="el-button-custom">
      地图工具箱<el-icon class="el-icon--right"><arrow-down /></el-icon>
      <el-icon class="el-icon--left"><TakeawayBox /></el-icon>
      工具箱
      <el-icon class="el-icon--right"><arrow-down /></el-icon>
    </el-button>
    <template #dropdown>
      <el-dropdown-menu>
        <el-dropdown-item v-for="(item, index) in toolItem" :key="index" :command="index">
          <el-button :type="item.value ? 'primary' : 'info'" plain size="default">
        <el-dropdown-item
          v-for="(item, index) in toolItem"
          :key="item.label"
          :command="index"
        >
          <el-button
            :type="item.value ? 'primary' : 'info'"
            plain
            size="default"
          >
            <font-awesome-icon :icon="item.icon" class="m-r-4" />
            {{ item.label + ': ' + (item.value ? '开' : '关') }}
          </el-button>
        </el-dropdown-item>
@@ -21,12 +32,22 @@
</template>

<script>
import toolbox from '../../utils/map/toolbox';
import toolbox from '@/utils/map/toolbox';
export default {
  data() {
    return {
      toolItem: [
        {
          icon: 'fa fa-map-signs',
          label: '行政区划',
          value: false,
          click: function () {
            this.value = !this.value;
            toolbox.toggleDistrict(this.value);
          }
        },
        {
          icon: 'fa fa-map-signs',
          label: '地物标注',
          value: false,
          click: function () {
@@ -35,6 +56,7 @@
          }
        },
        {
          icon: 'fa fa-globe',
          label: '卫星地图',
          value: true,
          click: function () {
@@ -43,6 +65,7 @@
          }
        },
        {
          icon: 'fa fa-compass',
          label: '控制罗盘',
          value: true,
          click: function () {
@@ -51,24 +74,39 @@
          }
        },
        {
          icon: 'fa fa-crosshairs',
          label: '坐标拾取',
          value: false,
          click: function () {
            this.value = !this.value;
            toolbox.toggleCoorPicking(this.value);
          }
        },
        // {
        //   icon: 'fa fa-compass',
        //   label: '数据标记',
        //   value: true,
        //   click: function () {
        //     this.value = !this.value;
        //     // todo 数据标记
        //   }
        // },
        {
          label: '数据标记',
          value: true,
          click: function () {
            this.value = !this.value;
          }
        },
        {
          icon: 'fa fa-comment-alt',
          label: '数据弹框',
          value: true,
          click: function () {
            this.value = !this.value;
            toolbox.toggleDataDialogStatus(this.value);
          }
        },
        {
          icon: 'fa fa-comment-alt',
          label: '溯源清单',
          value: true,
          click: function () {
            this.value = !this.value;
            toolbox.toggleSceneSearch(this.value);
          }
        }
      ]
@@ -83,21 +121,6 @@
</script>

<style scoped>
.dropdown-wrap {
}

.el-button-custom {
  --el-button-bg-color: var(--bg-color);
  --el-button-hover-text-color: var(--select_color);
  --el-button-hover-bg-color: var(--bg-color);
  --el-button-border-color: var(--font-color);
  --el-button-active-border-color: transparent;
}

.el-button-custom:focus-visible {
  outline: 0px solid var(--el-button-outline-color);
}

.el-button {
  margin: initial !important;
}