工具标绘关闭，点击切换...

src/views/gis/layout/index.vue

@@ -340,6 +340,7 @@ export default defineComponent({
       if (item.value === 'clear') {
         //  工具-标绘'layerName', 'toolDrawViewsLayer'
         state.map.getLayers().getArray().filter(v => v.get('layerName') === 'toolDrawViewsLayer')?.[0]?.getSource()?.clear()
+        state.map.getOverlayById('toolOverlay')?.setPosition(undefined)
         //  工具-测量'layerName', 'measureLayer'
         state.map.getLayers().getArray().filter(v => v.get('layerName') === 'measureLayer')?.[0]?.getSource()?.clear()
         clearMeasureDom(state.map)

src/views/gis/layout/tools/tool-draw.ts

@@ -10,6 +10,7 @@ import {unByKey} from "ol/Observable";
 import {isValue} from "@/utils/util";
 // @ts-ignore
 import PointIcon from "@/assets/images/gis-layout/gis-layout-tools_tool-bz_icon.png"
+import {v4} from "uuid";
 
 const globalLineDash = [
     [0, 0], //实线
@@ -341,6 +342,10 @@ export const draw = (map, obj) => {
                         draw.un('drawend', drawendHandle);
                         map.removeInteraction(map.getInteractions().getArray().filter(v => v.get(id) === id)[0]);
                         map.un('pointermove', pointerMoveHandler)
+                        const featEnd = evt.feature
+                        featEnd.set('isInit', true)
+                        featEnd.set(layerFlag[0], layerFlag[1])
+                        featEnd.setId(v4())
                     }
                     draw.on('drawend', drawendHandle);
                 }

src/views/gis/layout/tools/tool.vue

@@ -24,6 +24,9 @@
     <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>
 
@@ -45,8 +48,7 @@ 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";
+import * as ol from "ol";
 
 export default defineComponent({
   name: '',
@@ -64,7 +66,11 @@ export default defineComponent({
     const router = useRouter();
     const route = useRoute();
     const that = (getCurrentInstance() as ComponentInternalInstance).appContext.config.globalProperties
-    const state = reactive({})
+    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') {
@@ -76,11 +82,53 @@ export default defineComponent({
       }
       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.setPosition(undefined)
+        }
+      }
+    }
     onMounted(() => {
+      state.closeOverlay = new ol.Overlay({
+        id: 'toolOverlay',
+        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.setPosition(e.coordinate)
+            } else {
+              state.tempUUID = ''
+              state.closeOverlay.setPosition(undefined)
+            }
+          }
+        }, {
+          hitTolerance: 0,
+        });
+      })
     })
     return {
       ...toRefs(state),
-      handleDraw
+      handleDraw,
+      ref_close,
+      onClose
     }
   },
 })
@@ -106,4 +154,8 @@ export default defineComponent({
     }
   }
 }
+.close-dom {
+  width: 16px;
+  height: 16px;
+}
 </style>