增加顶点编辑器

Author: cocaine-coder

package.json

@@ -3,6 +3,7 @@
   "version": "1.0.0",
   "description": "",
   "main": "index.js",
+  "private": true,
   "scripts": {
     "build": "pnpm -r --filter=./packages/* run build",
     "release": "bumpp package.json packages/**/package.json",
@@ -15,12 +16,14 @@
   "author": "",
   "license": "ISC",
   "dependencies": {
+    "@mapbox/mapbox-gl-draw": "^1.4.3",
     "@turf/boolean-clockwise": "^7.1.0",
     "@turf/center": "^7.1.0",
     "proj4": "^2.12.1"
   },
   "devDependencies": {
     "@types/geojson": "^7946.0.14",
+    "@types/mapbox__mapbox-gl-draw": "^1.4.8",
     "@types/proj4": "^2.5.5",
     "@vitejs/plugin-vue": "^5.1.4",
     "bumpp": "^9.7.1",
@@ -30,4 +33,4 @@
     "vitepress": "^1.4.1",
     "vue": "^3.5.12"
   }
-}
+}

packages/maplugin-core/managers/geojson-layer-manager.ts

@@ -1,8 +1,7 @@
-import { IMap } from "../types";
+import { IMap, TIdentityGeoJSONFeature } from "../types";
 import { Tools } from "../utils/tools";
 
 export type TFeatureEvent = "all" | "add" | "update" | "delete" | "clear" | "destory";
-export type TIdentityGeoJSONFeature = GeoJSON.Feature<GeoJSON.Geometry, { id: string }>;
 
 export interface GeoJSONLayerManagerOptions<TFeature extends TIdentityGeoJSONFeature = TIdentityGeoJSONFeature> {
     map: IMap;
@@ -13,6 +12,7 @@ export abstract class GeoJSONLayerManagerBase<TFeature extends TIdentityGeoJSONF
     private events = new Map<string, Array<(e: { features?: TFeature[] }) => void>>();
     protected readonly layers = new Array<string>();
     protected data = new Map<string, TFeature>();
+    protected hiddenData = new Map<string, TFeature>();
 
     readonly map: IMap;
     readonly source: string = Tools.uuid();
@@ -42,6 +42,15 @@ export abstract class GeoJSONLayerManagerBase<TFeature extends TIdentityGeoJSONF
 
     protected abstract onChange(mode: TFeatureEvent, features?: TFeature[]): void;
 
+    /**
+     * 获取数据
+     * @param id 
+     * @returns 
+     */
+    query(id: string): TFeature | undefined {
+        return this.data.get(id);
+    }
+
     /**
      * 添加图层
      * @param layer 
@@ -55,15 +64,6 @@ export abstract class GeoJSONLayerManagerBase<TFeature extends TIdentityGeoJSONF
         }
     }
 
-    /**
-     * 获取数据
-     * @param id 
-     * @returns 
-     */
-    query(id: string): TFeature | undefined {
-        return this.data.get(id);
-    }
-
     /**
      * 创建数据
      * @param features 
@@ -133,6 +133,65 @@ export abstract class GeoJSONLayerManagerBase<TFeature extends TIdentityGeoJSONF
         this.map.removeSource(this.source);
     }
 
+    /**
+     * 设置Feature隐藏
+     * @param id
+     * @returns 
+     */
+    setFeatureHidden(...id: string[]) {
+        const fs = new Array<TFeature>();
+        id.forEach(i => {
+            const f = this.data.get(i);
+            if (!f) return;
+
+            // 如果已经隐藏，则不处理
+            if (this.hiddenData.has(i)) return;
+
+            // 处理隐藏
+            this.data.delete(i)
+            this.hiddenData.set(i, f);
+            fs.push(f);
+        });
+
+        this.onChange("delete", fs);
+    }
+
+    /**
+     * 
+     * @param id 当id为空时清除所有隐藏
+     */
+    clearFeatureHidden(...id: string[]) {
+        const fs = new Array<TFeature>();
+        if (id.length === 0)
+            id.forEach(i => {
+                const f = this.hiddenData.get(i);
+                if (!f) return;
+
+                this.hiddenData.delete(i);
+                this.data.set(i, f);
+                fs.push(f);
+            });
+        else {
+            this.hiddenData.forEach((v, k) => {
+                this.data.set(k, v);
+                fs.push(v);
+            });
+            this.hiddenData.clear();
+        }
+
+        this.onChange('add', fs);
+    }
+
+    /**
+     * 设置是否显示
+     * @param visible 
+     */
+    setVisible(visible: boolean) {
+        this.layers.forEach(l => {
+            this.map.setLayoutProperty(l, 'visibility', visible ? 'visible' : 'none');
+        });
+    }
+
     /**
      * 挂在事件
      * @param mode 

packages/maplugin-core/managers/measure-manager.ts

@@ -1,7 +1,8 @@
 import booleanClockwise from '@turf/boolean-clockwise';
 import { DrawManager, DrawOptions } from './geojson-draw-manager';
-import { GeoJSONLayerManagerBase, TIdentityGeoJSONFeature } from './geojson-layer-manager';
+import { GeoJSONLayerManagerBase } from './geojson-layer-manager';
 import { Units, Measurement, Tools } from '../utils';
+import { TIdentityGeoJSONFeature } from '../types';
 
 type TMeasureUnits = {
     area: Units.TUnitsArea | "M2KM2",

packages/maplugin-core/types.ts

@@ -1,4 +1,4 @@
-export type TMapEvent = 'click' | 'dblclick' | 'mousemove' | 'contextmenu' | 'zoom' | 'style.load';
+export type TMapEvent = 'click' | 'dblclick' | 'mousemove' | 'contextmenu' | 'zoom' | 'style.load' | 'draw.selectionchange';
 
 export interface IMap {
     dragRotate: number,
@@ -33,4 +33,6 @@ export interface IMap {
     setLayoutProperty(layerId: string, property: string, value: any): void,
 
     setFilter(id: string, filter?: any, options?: any): void
-}
+}
+
+export type TIdentityGeoJSONFeature = GeoJSON.Feature<GeoJSON.Geometry, { id: string }>;

packages/maplugin-core/utils/index.ts

@@ -1,4 +1,5 @@
 export * from './measurement';
 export * from './tools';
 export * from './units';
-export * from './middle-button-roate';
+export * from './middle-button-roate';
+export * from './vertex-editor';