展示解决maplibre顶点编辑器delete键删除不成功的问题

Author: cocaine-coder

packages/maplugin-core/utils/units.ts

@@ -1,4 +1,5 @@
 import { ref, watch } from "vue";
+import { IMap } from '../types';
 
 export namespace Units {
     export type TUnitsLength = "M" | "KM";
@@ -216,5 +217,13 @@ export namespace Units {
         const vu = createUseUnits(Units.convertLength, value, units, valueUnits);
         return { ...vu, unitsDescriptions: Units.unitsLengthDescriptions };
     }
+
+    export function isMaplibregl(map: IMap) {
+        return map.getCanvas()!.classList.contains("maplibregl-canvas");
+    }
+
+    export function isMapboxgl(map: IMap) {
+        return map.getCanvas()!.classList.contains("mapboxgl-canvas");
+    }
 }
 

packages/maplugin-core/utils/vertex-editor.ts

@@ -1,5 +1,6 @@
 import MapboxDraw from "@mapbox/mapbox-gl-draw";
 import { IMap, TIdentityGeoJSONFeature } from '../types';
+import { Units } from '../utils';
 
 export class VertexEditor {
     private editor: MapboxDraw;
@@ -24,7 +25,7 @@ export class VertexEditor {
             if (state.selectedCoordPaths.length > 0)
                 onDrag?.call(this, state, e);
         };
-        
+
         // 禁止删除图形
         const directSelectOnTrash = MapboxDraw.modes.direct_select.onTrash;
         MapboxDraw.modes.direct_select.onTrash = function (this, state) {
@@ -38,6 +39,15 @@ export class VertexEditor {
         }
         MapboxDraw.modes.simple_select.onTrash = function (this, _) { }
 
+        // TODO : mapbox-gl-draw 之后会更新调整contracts.classes.CANVASE 数值
+        if (Units.isMaplibregl(map)) {
+            window.addEventListener("keydown", e => {
+                if (e.code === "Delete") {
+                    this.editor.trash();
+                }
+            });
+        }
+
         const time = setInterval(() => {
             ["gl-draw-line-inactive.cold", "gl-draw-polygon-stroke-inactive.cold", "gl-draw-polygon-fill-inactive.cold"].forEach(x => {
                 if (map.getLayer(x)) {