更新点

Author: cocaine-coder

geojson-editor/src/App.vue

@@ -15,8 +15,7 @@ import Measurer from './components/features/Measurer.vue';
 import FeatureCollectionEditor from './components/features/FeatureCollectionEditor.vue';
 import ShowEditorButton from './components/features/ShowEditorButton.vue';
 
-import { DrawManager, GeoJSONLayerManager, MeasureManager } from '../../packages/maplugin-maplibre';
-import { TIdentityGeoJSONFeature } from '../../packages/maplugin-core/types';
+import { DrawManager, GeoJSONLayerManager, MeasureManager , TIdentityGeoJSONFeature, MiddleButtonRoate} from '../../packages/maplugin-maplibre';
 import { StoreEditor } from './stores';
 
 import img_marker from './assets/map-marker.png?url';
@@ -26,8 +25,6 @@ const fc = ref<GeoJSON.FeatureCollection>({
     features: []
 });
 
-let glManager: GeoJSONLayerManager;
-
 function handleMapLoaded(map: maplibregl.Map) {
     map.setCenter([121, 31]);
     map.setZoom(8);
@@ -41,7 +38,10 @@ function handleMapLoaded(map: maplibregl.Map) {
         }
     });
 
-    glManager = new GeoJSONLayerManager(map, new Array<TIdentityGeoJSONFeature>());
+    // 中键旋转
+    new MiddleButtonRoate(map);
+
+    const glManager = new GeoJSONLayerManager(map, new Array<TIdentityGeoJSONFeature>());
     glManager.on('all', () => {
         fc.value = glManager.fc;
     });

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

@@ -3,18 +3,18 @@ import { Tools } from "../utils/tools";
 
 export type TFeatureEvent = "all" | "add" | "update" | "delete" | "clear" | "destory";
 
-export interface GeoJSONLayerManagerOptions<TFeature extends TIdentityGeoJSONFeature = TIdentityGeoJSONFeature> {
-    map: IMap;
+export interface GeoJSONLayerManagerOptions<TMap extends IMap = IMap, TFeature extends TIdentityGeoJSONFeature = TIdentityGeoJSONFeature> {
+    map: TMap;
     data: Array<TFeature>;
 }
 
-export abstract class GeoJSONLayerManagerBase<TFeature extends TIdentityGeoJSONFeature = TIdentityGeoJSONFeature> {
+export abstract class GeoJSONLayerManagerBase<TMap extends IMap = IMap, TFeature extends TIdentityGeoJSONFeature = TIdentityGeoJSONFeature> {
     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 map: TMap;
     readonly source: string = Tools.uuid();
 
     /**
@@ -27,7 +27,7 @@ export abstract class GeoJSONLayerManagerBase<TFeature extends TIdentityGeoJSONF
         } as Readonly<GeoJSON.FeatureCollection>;
     }
 
-    constructor(options: GeoJSONLayerManagerOptions<TFeature>) {
+    constructor(options: GeoJSONLayerManagerOptions<TMap, TFeature>) {
         this.map = options.map;
         options.data.forEach(f => {
             this.data.set(f.properties.id, f);

packages/maplugin-core/types.ts

@@ -1,7 +1,6 @@
 export type TMapEvent = 'click' | 'dblclick' | 'mousemove' | 'contextmenu' | 'zoom' | 'style.load' | 'draw.selectionchange';
 
 export interface IMap {
-    dragRotate: number,
     getContainer(): HTMLElement,
 
     getStyle(): any;

packages/maplugin-core/utils/middle-button-roate.ts

@@ -244,9 +244,9 @@ export class MiddleButtonRoate {
 
         const element = map.getContainer();
         this.map = map;
-        this.mouseRotate = new MouseRotateHandler({ clickTolerance: (map.dragRotate as any)._mouseRotate._clickTolerance });
+        this.mouseRotate = new MouseRotateHandler({ clickTolerance: ((map as any).dragRotate as any)._mouseRotate._clickTolerance });
         if (options.withPitch)
-            this.mousePitch = new MousePitchHandler({ clickTolerance: (map.dragRotate as any)._mousePitch._clickTolerance });
+            this.mousePitch = new MousePitchHandler({ clickTolerance: ((map as any).dragRotate as any)._mousePitch._clickTolerance });
 
         const mousemove = (e: MouseEvent) => {
             this.move(e, DOM.mousePos(element, e));

packages/maplugin-mapbox/geojson-layer-manager.ts

@@ -1,7 +1,7 @@
 import { GeoJSONLayerManagerBase, TFeatureEvent, TIdentityGeoJSONFeature } from '../maplugin-core';
 
 export class GeoJSONLayerManager<TFeature extends TIdentityGeoJSONFeature = TIdentityGeoJSONFeature>
-    extends GeoJSONLayerManagerBase<TFeature> {
+    extends GeoJSONLayerManagerBase<mapboxgl.Map, TFeature> {
 
     /**
      *

packages/maplugin-maplibre/geojson-layer-manager.ts

@@ -1,7 +1,7 @@
 import { GeoJSONLayerManagerBase, TFeatureEvent, TIdentityGeoJSONFeature } from '../maplugin-core';
 
 export class GeoJSONLayerManager<TFeature extends TIdentityGeoJSONFeature = TIdentityGeoJSONFeature>
-    extends GeoJSONLayerManagerBase<TFeature> {
+    extends GeoJSONLayerManagerBase<maplibregl.Map, TFeature> {
 
     /**
      *