互联网-社管一张图-框选，选择款选的图形后，再接着点击其他工具，鼠标上的提示信息“单击开始标绘”还显示

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

@@ -24,6 +24,8 @@ const typeMapper = new Map([
     ['circle', 'Circle'],
 ])
 let oldDrawFeature
+let selectDraw: any = null
+const drawId = 'selectDrawName'
 /**
  *
  * @param map
@@ -146,8 +148,7 @@ export default function SelectDraw (map, typeSelect) {
                 return output;
             };
             const addInteraction = () => {
-                const id = 'selectDrawName'
-                const draw = new interaction.Draw({
+                selectDraw = new interaction.Draw({
                     source: _source,//测量绘制层数据源
                     // @ts-ignore
                     type: typeMapper.get(typeSelect),  //几何图形类型
@@ -173,10 +174,10 @@ export default function SelectDraw (map, typeSelect) {
                         }),
                     }),
                 });
-                draw.set(id, id)
+                selectDraw.set(drawId, drawId)
                 createMeasureTooltip(); //创建测量工具提示框
                 createHelpTooltip(); //创建帮助提示框
-                map.addInteraction(draw);
+                map.addInteraction(selectDraw);
                 let listener;
                 //绑定交互绘制工具开始绘制的事件
                 const drawstartHandle = (evt) => {
@@ -200,7 +201,7 @@ export default function SelectDraw (map, typeSelect) {
                         // measureTooltip.setPosition(tooltipCoord);//设置测量工具提示框的显示位置
                     });
                 }
-                draw.on('drawstart', drawstartHandle);
+                selectDraw.on('drawstart', drawstartHandle);
                 //绑定交互绘制工具结束绘制的事件
                 const copy = (value) => {
                     const str = document.createElement('input')
@@ -211,7 +212,7 @@ export default function SelectDraw (map, typeSelect) {
                     document.body.removeChild(str)
                 }
                 const drawendHandle = (evt) => {
-                    map.removeInteraction(map.getInteractions().getArray().filter(v => v.get(id) === id)[0]);
+                    map.removeInteraction(map.getInteractions().getArray().filter(v => v.get(drawId) === drawId)[0]);
                     // const del = document.createElement("div");
                     // del.className = "lineDel";
                     // drawTooltipElement.append(del);
@@ -238,9 +239,9 @@ export default function SelectDraw (map, typeSelect) {
                     drawHelpTooltipElement.parentNode.removeChild(drawHelpTooltipElement);
                     drawHelpTooltipElement = null; //置空测量工具提示框对象
                     unByKey(listener);
-                    draw.un('drawstart', drawstartHandle);
-                    draw.un('drawend', drawendHandle);
-                    map.removeInteraction(map.getInteractions().getArray().filter(v => v.get(id) === id)[0]);
+                    selectDraw.un('drawstart', drawstartHandle);
+                    selectDraw.un('drawend', drawendHandle);
+                    map.removeInteraction(map.getInteractions().getArray().filter(v => v.get(drawId) === drawId)[0]);
                     map.un('pointermove', pointerMoveHandler)
                     if (oldDrawFeature) {
                         _source.removeFeature(oldDrawFeature)
@@ -260,7 +261,7 @@ export default function SelectDraw (map, typeSelect) {
                     }
                     resolve({feature: oldDrawFeature, wkt: wkt})
                 }
-                draw.on('drawend', drawendHandle);
+                selectDraw.on('drawend', drawendHandle);
             }
             addInteraction(); //调用加载绘制交互控件方法，添加绘图进行测量
             const pointerMoveHandler = (evt) => {
@@ -278,9 +279,11 @@ export default function SelectDraw (map, typeSelect) {
                     //     helpMsg = continueMsg; //绘制线时提示相应内容
                     // }
                 }
-                drawHelpTooltipElement.innerHTML = helpMsg; //将提示信息设置到对话框中显示
-                helpTooltip.setPosition(evt.coordinate);//设置帮助提示框的位置
-                drawHelpTooltipElement.classList.remove('hidden');//移除帮助提示框的隐藏样式进行显示
+                if (drawHelpTooltipElement) {
+                    drawHelpTooltipElement.innerHTML = helpMsg; //将提示信息设置到对话框中显示
+                    helpTooltip.setPosition(evt.coordinate);//设置帮助提示框的位置
+                    drawHelpTooltipElement.classList.remove('hidden');//移除帮助提示框的隐藏样式进行显示
+                }
             };
             map.on('pointermove', pointerMoveHandler); //地图容器绑定鼠标移动事件，动态显示帮助提示框内容
             //地图绑定鼠标移出事件，鼠标移出时为帮助提示框设置隐藏样式
@@ -303,3 +306,16 @@ export const SelectDrawClear = (map) => {
         oldDrawFeature = null
     }
 }
+
+export const InteractionDrawClear = (map) => {
+    const draw = map.getInteractions().getArray().filter(v => v.get(drawId) === drawId)?.[0]
+    if (draw) {
+        map.removeInteraction(draw)
+        selectDraw = null
+    }
+    drawTooltipElement?.parentNode?.removeChild(drawTooltipElement)
+    drawTooltipElement = null
+    drawHelpTooltipElement?.parentNode?.removeChild(drawHelpTooltipElement)
+    drawHelpTooltipElement = null
+}
+

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

@@ -93,7 +93,7 @@ import {useRouter, useRoute} from 'vue-router'
 import {ElMessage, ElMessageBox} from "element-plus";
 import SelectChartCom from './select-chart.vue'
 import axios from "axios";
-import SelectDraw, {SelectDrawClear} from "./select-draw";
+import SelectDraw, {SelectDrawClear, InteractionDrawClear} from "./select-draw";
 
 export default defineComponent({
   name: '',
@@ -297,6 +297,7 @@ export default defineComponent({
       if (realLayer) {
         realLayer.setVisible(false)
       }
+      InteractionDrawClear(props.map)
     })
     return {
       ...toRefs(state),