修改测量数据源策略

Author: cocaine-coder

geojson-editor/src/App.vue

@@ -45,20 +45,21 @@ function handleMapLoaded(map: maplibregl.Map) {
     glManager.on('all', () => {
         fc.value = glManager.fc;
     });
-    const drawManager = new DrawManager(glManager, {});
+    const drawManager = new DrawManager(glManager);
 
     map.loadImage(img_marker).then((img) => {
         map.addImage("marker", img.data);
 
         map.getLayerProxy<maplibregl.CircleLayerSpecification>(drawManager.id_layer_point).value.layout!['visibility'] = 'none';
         const layout = map.getLayerProxy<maplibregl.SymbolLayerSpecification>(drawManager.id_layer_point_symbol).value.layout!;
         layout['icon-image'] = 'marker'
-        layout['icon-size'] = 0.5;
+        layout['icon-size'] = 0.3;
+        layout['icon-anchor'] = 'bottom';
     });
 
     createMapControl(map, ShowEditorButton);
     createMapControl(map, Drawer, { drawManager }, 'top-left');
-    createMapControl(map, Measurer, { measureManager: new MeasureManager(glManager, {}) }, 'top-left');
+    createMapControl(map, Measurer, { measureManager: new MeasureManager(glManager) }, 'top-left');
 }
 
 function createMapControl(map: maplibregl.Map, component: Component, data?: Record<string, unknown>, position: maplibregl.ControlPosition = 'top-right') {

geojson-editor/src/assets/map-marker.png

@@ -29,7 +29,7 @@ export class DrawManager {
     /**
      *
      */
-    constructor(protected glManager: GeoJSONLayerManagerBase, private options: DrawOptions) {
+    constructor(public glManager: GeoJSONLayerManagerBase, private options: DrawOptions = {}) {
         //#region add layers
 
         glManager.addLayer({
@@ -114,6 +114,13 @@ export class DrawManager {
             }
         });
 
+        glManager.on('clear', () => {
+            ((glManager.map as any).getSource(this.id_layer_polygon_subline)).setData({
+                type: 'FeatureCollection',
+                features: []
+            });
+        });
+
         //#endregion
 
         this.escOnce = (e: KeyboardEvent) => {
@@ -169,11 +176,6 @@ export class DrawManager {
 
     clear(): void {
         this.glManager.clear();
-
-        ((this.glManager.map as any).getSource(this.id_layer_polygon_subline)).setData({
-            type: 'FeatureCollection',
-            features: []
-        });
     }
 
     private drawPoint() {

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

@@ -1,5 +1,5 @@
 import booleanClockwise from '@turf/boolean-clockwise';
-import { DrawManager, DrawOptions } from './geojson-draw-manager';
+import { DrawManager } from './geojson-draw-manager';
 import { GeoJSONLayerManagerBase } from './geojson-layer-manager';
 import { Units, Measurement, Tools } from '../utils';
 import { TIdentityGeoJSONFeature } from '../types';
@@ -9,24 +9,12 @@ type TMeasureUnits = {
     length: Units.TUnitsLength | "MKM",
 }
 
-interface MeasureOptions extends DrawOptions {
+interface MeasureOptions {
 }
 
-export class MeasureManager extends DrawManager {
-    /**
-     * 测量id
-     * 
-     * 用于创建标注文字id
-     */
-    readonly id_layer_measure_symbol = Tools.uuid();
-
-    /**
-     * 面方向图层id
-     * 
-     * 用于创建面方向layer和source
-     */
-    readonly id_layer_polygon_clockwise = Tools.uuid();
+export class MeasureManager {
 
+    private glManager: GeoJSONLayerManagerBase;
 
     private customFeatures: TIdentityGeoJSONFeature[] = [];
 
@@ -45,6 +33,20 @@ export class MeasureManager extends DrawManager {
      */
     private polygonDistance: boolean = true;
 
+    /**
+ * 测量id
+ * 
+ * 用于创建标注文字id
+ */
+    readonly id_layer_measure_symbol = Tools.uuid();
+
+    /**
+     * 面方向图层id
+     * 
+     * 用于创建面方向layer和source
+     */
+    readonly id_layer_polygon_clockwise = Tools.uuid();
+
     /**
      * 长度单位
      */
@@ -59,17 +61,18 @@ export class MeasureManager extends DrawManager {
         return this.units.area;
     }
 
-    constructor(glManager: GeoJSONLayerManagerBase, options: MeasureOptions) {
-        super(glManager, options);
-        glManager.on('all', () => this.renderMeasure());
+    constructor(dataSource: DrawManager | GeoJSONLayerManagerBase, options: MeasureOptions = {}) {
+        this.glManager = dataSource instanceof DrawManager ? dataSource.glManager : dataSource;
 
-        glManager.addLayer(this.id_layer_measure_symbol);
-        glManager.addLayer(this.id_layer_polygon_clockwise);
+        this.glManager.on('all', () => this.renderMeasure());
+
+        this.glManager.addLayer(this.id_layer_measure_symbol);
+        this.glManager.addLayer(this.id_layer_polygon_clockwise);
 
         /**
          * 添加测量数值图层
          */
-        glManager.map.addLayer({
+        this.glManager.map.addLayer({
             id: this.id_layer_measure_symbol,
             type: 'symbol',
             source: {
@@ -94,7 +97,7 @@ export class MeasureManager extends DrawManager {
         /**
          * 添加面方向图层
          */
-        glManager.map.addLayer({
+        this.glManager.map.addLayer({
             id: this.id_layer_polygon_clockwise,
             type: 'symbol',
             source: {
@@ -236,15 +239,6 @@ export class MeasureManager extends DrawManager {
             val ? undefined : ['!', ['boolean', ['get', 'center'], false]]);
     }
 
-    /**
-     * 清除测量数据
-     */
-    clear() {
-        super.clear();
-        this.customFeatures = [];
-        this.renderMeasure();
-    }
-
     /**
      * 重绘
      */