gis-one-map-web/src/views/gis/layout/tools/tool.vue

<template>
  <div class="tool-com __box-shadow">
    <div class="item" @click="mapFunc.measure('line')">
      <img src="@/assets/images/gis-layout/gis-layout-tools_tool-cjl.png" alt=""/>测距离
    </div>
    <div class="item" @click="mapFunc.measure('circle')">
      <img src="@/assets/images/gis-layout/gis-layout-tools_tool-cymj.png" alt=""/>测圆面积
    </div>
    <div class="item" @click="mapFunc.measure('rectangle')">
      <img src="@/assets/images/gis-layout/gis-layout-tools_tool-cjxmj.png" alt=""/>测矩形面积
    </div>
    <div class="item" @click="handleDraw({featureType: 'Point'})">
      <img src="@/assets/images/gis-layout/gis-layout-tools_tool-bz.png" alt=""/>标注
    </div>
    <div class="item" @click="handleDraw({featureType: 'LineString'})">
      <img src="@/assets/images/gis-layout/gis-layout-tools_tool-hx.png" alt=""/>画线
    </div>
    <div class="item" @click="handleDraw({featureType: 'Polygon', rectangle: true})">
      <img src="@/assets/images/gis-layout/gis-layout-tools_tool-hjx.png" alt=""/>画矩形
    </div>
    <div class="item" @click="handleDraw({featureType: 'Polygon'})">
      <img src="@/assets/images/gis-layout/gis-layout-tools_tool-hdbx.png" alt=""/>画多边形
    </div>
    <div class="item" @click="handleDraw({featureType: 'Circle'})">
      <img src="@/assets/images/gis-layout/gis-layout-tools_tool-hy.png" alt=""/>画圆
    </div>
  </div>
</template>

<script lang="ts">
import {
  defineComponent,
  computed,
  onMounted,
  ref,
  reactive,
  watch,
  getCurrentInstance,
  ComponentInternalInstance,
  toRefs,
  nextTick
} from 'vue'
import {useStore} from 'vuex'
import {useRouter, useRoute} from 'vue-router'
import {ElMessage, ElMessageBox} from "element-plus";
import './map.scss'
import * as ToolDraw from './tool-draw'
import {draw} from "./tool-draw";
import * as BaseDraw from "@/components/easyMap/func/base-draw";

export default defineComponent({
  name: '',
  components: {},
  props: {
    map: {
      required: true
    },
    mapFunc: {
      required: true
    }
  },
  setup(props, {emit}) {
    const store = useStore();
    const router = useRouter();
    const route = useRoute();
    const that = (getCurrentInstance() as ComponentInternalInstance).appContext.config.globalProperties
    const state = reactive({})
    const handleDraw = (obj) => {
      const config = Object.assign(ToolDraw.getBaseDrawConfig(), obj)
      if (config.featureType === 'Point') {
        config.isPoint = true
      } else if (config.featureType === 'LineString') {
        config.isLineString = true
      } else if (config.featureType === 'Polygon') {
        config.isPolygon = true
      }
      ToolDraw.draw(props.map, config)
    }
    onMounted(() => {
    })
    return {
      ...toRefs(state),
      handleDraw
    }
  },
})
</script>

<style scoped lang="scss">
.tool-com {
  padding: 12px 18px;
  background-color: #FFFFFF;
  .item {
    width: 100%;
    height: 36px;
    display: flex;
    align-items: center;
    border-radius: 4px;
    margin: 4px 0;
    cursor: pointer;
    &:hover {
      background-color: rgba(170, 198, 238, 0.2);
    }
    >img {
      margin: 0 10px;
    }
  }
}
</style>