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 class="close-dom" ref="ref_close">
      <img src="@/components/easyMap/images/close.png" alt="" class="__hover" @click="onClose"/>
    </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 * as ol from "ol";
import store from "@/store";

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({
      closeOverlay: <any>null,
      tempUUID: ''
    })
    const ref_close = ref()
    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)
    }
    const onClose = () => {
      const l = props.map?.getLayers().getArray().filter(v => v.get('layerName') === 'toolDrawViewsLayer')?.[0]
      if (l) {
        const feat = l.getSource().getFeatureById(state.tempUUID)
        if (feat) {
          l.getSource().removeFeature(feat)
          state.tempUUID = ''
          state.closeOverlay.getElement().style.display = 'none'
          state.closeOverlay.setPosition(undefined)
          ToolDraw.refreshModify(props.map, l.getSource())
        }
      }
    }
    onMounted(() => {
      store.commit('gis/SET_IS_TOOLING', false)
      const id = 'toolOverlay'
      if (props.map?.getOverlayById(id)) {
        state.closeOverlay = props.map?.getOverlayById(id)
      } else {
        state.closeOverlay = new ol.Overlay({
          id: id,
          element: ref_close.value,
          autoPan: false,
          offset: [0, -10],
          positioning: 'bottom-center',
          stopEvent: true,
          autoPanAnimation: {
            duration: 250
          }
        })
        props.map?.addOverlay(state.closeOverlay)
        props.map?.on('singleclick', (e) => {
          let flag = false
          props.map?.forEachFeatureAtPixel(e.pixel, (f) => {
            if (!flag && f.get('layerName') === 'toolDrawViewsLayer' && f.get('isInit')) {
              flag = true
              if (state.tempUUID !== f.getId()) {
                state.tempUUID = f.getId()
                state.closeOverlay.getElement().style.display = 'unset'
                state.closeOverlay.setPosition(e.coordinate)
              } else {
                state.tempUUID = ''
                state.closeOverlay.setPosition(undefined)
              }
            }
          }, {
            hitTolerance: 0,
          });
        })
      }
    })
    return {
      ...toRefs(state),
      handleDraw,
      ref_close,
      onClose
    }
  },
})
</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;
    }
  }
}
.close-dom {
  width: 16px;
  height: 16px;
  display: none;
}
</style>