[fix]标绘去掉id drawType, getSource重写

AI-GEN: 70% Cursor

Author: luoxiao-supermap

examples/mapboxgl/videoMapWithTime.html

@@ -16,7 +16,8 @@
     <script type="text/javascript" include="bootstrap" src="../js/include-web.js"></script>
     <script type="text/javascript" include="mapbox-gl-enhance,proj4,turf,videojs,opencv" src="../../dist/mapboxgl/include-mapboxgl.js"></script>
     <script type="text/javascript">
-      var dataUrl = 'http://172.16.14.44:8090/iserver/services/data-video/rest/data';
+      var host = 'https://iserver.supermap.io';
+      var dataUrl = host + '/iserver/services/data-video/rest/data';
       var videoMap;
       var count = 0;
       var dynamicLayerIds = [];

src/mapboxgl/mapping/GeojsonSource.js

@@ -50,6 +50,10 @@ export default class GeojsonSource {
     this.update();
   }
 
+  getData() {
+    return cloneDeep(this.originalData);
+  }
+
   _transformData(data) {
     return transformVideoMapGeoJSON(data, this.videoMap);
   }

src/mapboxgl/mapping/VideoMap.js

@@ -350,6 +350,38 @@ export class VideoMap extends mapboxgl.Evented {
     this.sourceCache[id] = geojsonSource;
   }
 
+  /**
+   * @function VideoMap.prototype.getSource
+   * @description 获取数据源。视频地图 GeoJSON 数据源的 data 为 EPSG:4326 原始数据，其余行为保持 Mapbox source 兼容。
+   * @param {string} id - 数据源 id。
+   * @returns {Object|undefined} Mapbox source 或视频地图 GeoJSON source 代理。
+   */
+  getSource(id) {
+    if (!this._mapExisted()) {
+      return undefined;
+    }
+    const source = this.map.getSource(id);
+    const videoSource = this.sourceCache[id];
+    if (!source || !videoSource || typeof videoSource.getData !== 'function') {
+      return source;
+    }
+    return new Proxy(source, {
+      get(target, property) {
+        if (property === '_data') {
+          return videoSource.getData();
+        }
+        if (property === 'getData') {
+          return videoSource.getData.bind(videoSource);
+        }
+        if (property === 'setData') {
+          return videoSource.setData.bind(videoSource);
+        }
+        const value = Reflect.get(target, property, target);
+        return typeof value === 'function' ? value.bind(target) : value;
+      }
+    });
+  }
+
   /**
    * @function VideoMap.prototype.updateAtTime
    * @description 使用视频时间更新相机参数并重新投影已添加的 GeoJSON 数据源。

src/mapboxgl/mapping/VideoMapDraw.js

@@ -523,7 +523,9 @@ export default class VideoMapDraw {
     this.features.push(feature);
     this._setSelectedIds([feature.id]);
     this._syncResult();
-    this.videoMap.fire('drawcreate', { feature, data: this.getData() });
+    const eventFeature = Object.assign({}, feature);
+    delete eventFeature.id;
+    this.videoMap.fire('drawcreate', { feature: eventFeature, data: this.getData() });
     this._emitModeChange();
     this._emitUpdate();
     this._showMeasureLabels(feature);
@@ -760,7 +762,7 @@ export default class VideoMapDraw {
     return {
       type: 'Feature',
       id,
-      properties: { drawType: type, id },
+      properties: {},
       geometry: { type, coordinates }
     };
   }
@@ -825,15 +827,15 @@ export default class VideoMapDraw {
       features.push({
         type: 'Feature',
         id: `videomap-draw-draft-p${index}`,
-        properties: { drawType: 'Point', draft: true },
+        properties: { draft: true },
         geometry: { type: 'Point', coordinates: coord }
       });
     });
     if (this.mode === 'LineString' && vertices.length >= 2) {
       features.push({
         type: 'Feature',
         id: 'videomap-draw-draft-line',
-        properties: { drawType: 'LineString', draft: true },
+        properties: { draft: true },
         geometry: { type: 'LineString', coordinates: vertices }
       });
     }
@@ -842,14 +844,14 @@ export default class VideoMapDraw {
         features.push({
           type: 'Feature',
           id: 'videomap-draw-draft-polygon',
-          properties: { drawType: 'Polygon', draft: true },
+          properties: { draft: true },
           geometry: { type: 'Polygon', coordinates: [vertices.concat([vertices[0]])] }
         });
       } else {
         features.push({
           type: 'Feature',
           id: 'videomap-draw-draft-line',
-          properties: { drawType: 'LineString', draft: true },
+          properties: { draft: true },
           geometry: { type: 'LineString', coordinates: vertices }
         });
       }

test/mapboxgl/mapping/VideoMapDrawSpec.js

@@ -0,0 +1,40 @@
+import VideoMapDraw from '../../../src/mapboxgl/mapping/VideoMapDraw';
+
+describe('VideoMapDraw', () => {
+  function createVideoMap() {
+    return {
+      sourceCache: {},
+      map: {
+        getCanvas: () => ({ style: {} }),
+        doubleClickZoom: {
+          enable: jasmine.createSpy('enable'),
+          disable: jasmine.createSpy('disable')
+        }
+      },
+      fire: jasmine.createSpy('fire')
+    };
+  }
+
+  it('keeps feature id internally without putting it in properties', () => {
+    const videoMap = createVideoMap();
+    const draw = new VideoMapDraw(videoMap);
+    const feature = draw._feature('Point', [116, 39]);
+
+    expect(feature.id).toBe('videomap-draw-1');
+    expect(feature.properties).toEqual({});
+  });
+
+  it('removes feature id from the drawcreate event feature', () => {
+    const videoMap = createVideoMap();
+    const draw = new VideoMapDraw(videoMap);
+    const feature = draw._feature('Point', [116, 39]);
+
+    draw._completeFeature(feature);
+
+    const drawcreateCall = videoMap.fire.calls.allArgs().find((args) => args[0] === 'drawcreate');
+    const eventFeature = drawcreateCall[1].feature;
+    expect(eventFeature.id).toBeUndefined();
+    expect(eventFeature.properties).toEqual({});
+    expect(draw.features[0].id).toBe('videomap-draw-1');
+  });
+});

test/mapboxgl/mapping/VideoMapSpec.js

@@ -279,6 +279,7 @@ describe('mapboxgl_videoMap', () => {
         }
       });
       expect(videoMap.sourceCache['test111']).not.toBe(null);
+      expect(videoMap.getSource('test111').getData()).toEqual(videoMap.sourceCache['test111'].originalData);
       videoMap.removeSource('test111');
       expect(videoMap.sourceCache['test111']).toBeUndefined();
       done();

test/test-main-mapboxgl.js

@@ -88,6 +88,7 @@ import './mapboxgl/mapping/WebMapV2Spec.js';
 import './mapboxgl/mapping/WebMapV3Spec.js';
 import './mapboxgl/mapping/InitMapSpec.js';
 import './mapboxgl/mapping/VideoMapSpec.js';
+import './mapboxgl/mapping/VideoMapDrawSpec.js';
 import './mapboxgl/mapping/clipVideoMapGeometrySpec.js';
 import './mapboxgl/mapping/VideoMapUtilSpec.js';
 import './mapboxgl/mapping/WebMapV22Spec.js';