[fix]修复UT Jsdoc 例子修改， e.point, escapeHTML

AI-GEN: 70% Cursor

Author: luoxiao-supermap

examples/mapboxgl/config.js

@@ -1882,13 +1882,6 @@ var exampleConfig = {
                     thumbnail: 'videoMap.png',
                     fileName: 'videoMap'
                   },
-                  // {
-                  //   name: '视频地图标绘对比',
-                  //   name_en: 'Video Map Draw Compare',
-                  //   version: '12.1.1',
-                  //   thumbnail: 'videoMap.png',
-                  //   fileName: 'videoMapDraw'
-                  // },
                   {
                     name: '无人机视频',
                     name_en: 'UAV video',
@@ -1909,20 +1902,6 @@ var exampleConfig = {
                     version: '12.1.1',
                     thumbnail: 'videoMapWithTimeDraw.png',
                     fileName: 'videoMapWithTimeDraw'
-                  },
-                  {
-                    name: '动态视频地图 - 淮南',
-                    name_en: 'Dynamic Video Map - Huainan',
-                    version: '12.1.1',
-                    thumbnail: 'videoMap_huainan.png',
-                    fileName: 'videoMapWithTime_huainan'
-                  },
-                  {
-                    name: '动态视频地图标绘对比 - 淮南',
-                    name_en: 'Dynamic Video Map Draw Compare - Huainan',
-                    version: '12.1.1',
-                    thumbnail: 'videoMap_huainan_draw.png',
-                    fileName: 'videoMapWithTime_huainanDraw'
                   }
                 ]
             }

examples/mapboxgl/videoMapWithTimeDraw.html

@@ -116,13 +116,20 @@
       var dataUrl = 'http://172.16.14.44:8090/iserver/services/data-video/rest/data';
       var datasourceName = 'VideoData';
       var datasetName = 'DJI_09304';
+      var dataSourceUrl = dataUrl + '/datasources/' + datasourceName;
+      var datasetUrl = {
+        Point: dataSourceUrl + '/datasets/NewPoint',
+        LineString: dataSourceUrl + '/datasets/NewLine',
+        Polygon: dataSourceUrl + '/datasets/NewRegion'
+      };
       var REAL_MAP_DRAW_SOURCE_ID = 'real-map-draw-sync';
       var videoMap;
       var map;
       var mapDraw;
       var measurementMarkers = {};
+      var uploadedDatasetFeatures = {};
       var mapFitted = false;
-      var mapBearing = 90;
+      var mapBearing = 270;
       var videoExtents = [];
       var lastVideoExtentTime;
       var tk = '1d109683f4d84198e37a38c442d68311';
@@ -336,7 +343,7 @@
             syncVideoMapDraw();
             syncVideoFootprint();
             fitVideoBounds();
-            videoMap.on('vectorupdate', function () {
+            videoMap.on('videoparameterupdate', function () {
               syncVideoFootprint(videoMap.currentTime);
             });
             videoMap.on('drawupdate', function (e) {
@@ -345,6 +352,7 @@
             videoMap.on('drawcreate', function (e) {
               updateDrawHint(e.data.features.length);
               fitRealMap(e.data);
+              uploadDrawFeature(e.feature);
             });
             videoMap.on('drawdelete', function (e) {
               updateDrawHint(e.data.features.length);
@@ -353,6 +361,7 @@
               updateDrawHint(0);
               mapFitted = false;
             });
+            ['NewPoint', 'NewLine', 'NewRegion'].forEach(addUploadedDataset);
             resizeMaps();
           });
         });
@@ -464,6 +473,129 @@
         });
       }
 
+      function uploadDrawFeature(feature) {
+        if (!feature || !feature.geometry) {
+          return;
+        }
+        var targetUrl = datasetUrl[feature.geometry.type];
+        if (!targetUrl) {
+          return;
+        }
+        var datasetPath = targetUrl.match(/^(.*)\/datasources\/([^/]+)\/datasets\/([^/?#]+)\/?$/);
+        if (!datasetPath) {
+          return;
+        }
+        var editFeaturesService = new mapboxgl.supermap.FeatureService(datasetPath[1]);
+        var editFeaturesParams = new mapboxgl.supermap.EditFeaturesParameters({
+          features: feature,
+          dataSourceName: decodeURIComponent(datasetPath[2]),
+          dataSetName: decodeURIComponent(datasetPath[3]),
+          editType: 'add',
+          returnContent: true
+        });
+        editFeaturesService.editFeatures(editFeaturesParams).then(function (serviceResult) {
+          if (!serviceResult || !serviceResult.result || !serviceResult.result.succeed) {
+            return;
+          }
+          addUploadedDataset(decodeURIComponent(datasetPath[3]));
+        }).catch(function (error) {
+          console.error('视频标绘上传失败:', error);
+        });
+      }
+
+      function addUploadedDataset(dataset) {
+        var sqlParam = new mapboxgl.supermap.GetFeaturesBySQLParameters({
+          queryParameter: { name: dataset + '@' + datasourceName },
+          targetEpsgCode: '4326',
+          datasetNames: [datasourceName + ':' + dataset],
+          toIndex: 99999
+        });
+        new mapboxgl.supermap.FeatureService(dataUrl).getFeaturesBySQL(sqlParam).then(function (serviceResult) {
+          var featureCollection = serviceResult && serviceResult.result && serviceResult.result.features;
+          if (!featureCollection || !featureCollection.features) {
+            return;
+          }
+          var featuresByKey = uploadedDatasetFeatures[dataset] || {};
+          featureCollection.features.forEach(function (item) {
+            var key = item.id == null ? JSON.stringify(item) : String(item.id);
+            featuresByKey[key] = item;
+          });
+          uploadedDatasetFeatures[dataset] = featuresByKey;
+          var data = {
+            type: 'FeatureCollection',
+            features: Object.keys(featuresByKey).map(function (key) {
+              return featuresByKey[key];
+            })
+          };
+          var sourceId = 'uploaded-draw-' + dataset;
+          var source = map.getSource(sourceId);
+          if (source) {
+            source.setData(data);
+            syncUploadedDatasetToVideoMap(dataset, data);
+            return;
+          }
+          map.addSource(sourceId, { type: 'geojson', data: data });
+          map.addLayer({
+            id: sourceId + '-fill',
+            type: 'fill',
+            source: sourceId,
+            filter: ['==', '$type', 'Polygon'],
+            paint: { 'fill-color': '#52c41a', 'fill-opacity': 0.2 }
+          });
+          map.addLayer({
+            id: sourceId + '-line',
+            type: 'line',
+            source: sourceId,
+            filter: ['in', '$type', 'LineString', 'Polygon'],
+            paint: { 'line-color': '#52c41a', 'line-width': 3 }
+          });
+          map.addLayer({
+            id: sourceId + '-point',
+            type: 'circle',
+            source: sourceId,
+            filter: ['==', '$type', 'Point'],
+            paint: { 'circle-radius': 5, 'circle-color': '#52c41a', 'circle-stroke-width': 1, 'circle-stroke-color': '#fff' }
+          });
+          syncUploadedDatasetToVideoMap(dataset, data);
+        }).catch(function (error) {
+          console.error('已上传标绘数据查询失败:', error);
+        });
+      }
+
+      function syncUploadedDatasetToVideoMap(dataset, data) {
+        if (!videoMap || !videoMap.map || !data) {
+          return;
+        }
+        var sourceId = 'uploaded-draw-' + dataset;
+        var source = videoMap.sourceCache && videoMap.sourceCache[sourceId];
+        if (source) {
+          source.setData(data);
+          return;
+        }
+        videoMap.addSource(sourceId, { type: 'geojson', data: data });
+        videoMap.addLayer({
+          id: sourceId + '-fill',
+          type: 'fill',
+          source: sourceId,
+          filter: ['==', '$type', 'Polygon'],
+          paint: { 'fill-color': '#52c41a', 'fill-opacity': 0.2 }
+        });
+        videoMap.addLayer({
+          id: sourceId + '-line',
+          type: 'line',
+          source: sourceId,
+          filter: ['in', '$type', 'LineString', 'Polygon'],
+          paint: { 'line-color': '#52c41a', 'line-width': 3 }
+        });
+        videoMap.addLayer({
+          id: sourceId + '-point',
+          type: 'circle',
+          source: sourceId,
+          filter: ['==', '$type', 'Point'],
+          paint: { 'circle-radius': 5, 'circle-color': '#52c41a', 'circle-stroke-width': 1, 'circle-stroke-color': '#fff' }
+        });
+      }
+
       function getFeatureMeasurement(feature) {
         if (!feature.geometry) {
           return null;
@@ -509,6 +641,7 @@
         map.fitBounds([[bounds[0], bounds[1]], [bounds[2], bounds[3]]], {
           padding: 48,
           maxZoom: 17,
+          bearing: mapBearing,
           duration: 600
         });
       }

examples/mapboxgl/videoMapWithTime_huainanDraw.html

@@ -165,6 +165,7 @@
       var mapSourceCount = 0;
       var dynamicLayerIds = [];
       var measurementMarkers = {};
+      var uploadedDatasetFeatures = {};
       var mapBearing = 214;
       var tk = '1d109683f4d84198e37a38c442d68311';
       var attribution =
@@ -345,10 +346,22 @@
 
       function addUploadedDataset(datasetName) {
         queryFeatures(datasetName).then(function (serviceResult) {
-          var featureCollection = serviceResult && serviceResult.result && serviceResult.result.features;
-          if (!featureCollection || !featureCollection.features) {
+          var queriedFeatureCollection = serviceResult && serviceResult.result && serviceResult.result.features;
+          if (!queriedFeatureCollection || !queriedFeatureCollection.features) {
             return;
           }
+          var featuresByKey = uploadedDatasetFeatures[datasetName] || {};
+          queriedFeatureCollection.features.forEach(function (feature) {
+            var key = feature.id == null ? JSON.stringify(feature) : String(feature.id);
+            featuresByKey[key] = feature;
+          });
+          uploadedDatasetFeatures[datasetName] = featuresByKey;
+          var featureCollection = {
+            type: 'FeatureCollection',
+            features: Object.keys(featuresByKey).map(function (key) {
+              return featuresByKey[key];
+            })
+          };
           var sourceId = 'uploaded-draw-source-' + datasetName;
           addOrUpdateRealSource('real-' + sourceId, featureCollection, '#e66b2e');
           if (!videoMap) {
@@ -616,7 +629,7 @@
             videoMap.on('drawclear', function () {
               syncVideoDraw({ type: 'FeatureCollection', features: [] });
             });
-            videoMap.on('vectorupdate', function () {
+            videoMap.on('videoparameterupdate', function () {
               updateMeasurementMarkers('video', videoMap, mapDraw.getAll(), true);
               updateVideoFootprint();
             });

src/mapboxgl/control/VideoMapDrawControl.js

@@ -62,6 +62,7 @@ function resolveControls(options) {
  * @param {VideoMap} [options.videoMap] - 视频地图实例。通过 `videoMap.addControl` 添加时会自动注入。
  * @param {Object} [options.controls={point:true, line_string:true, polygon:true, trash:true}] - 按钮显隐，`point` / `line_string` / `polygon` / `trash`。不传时默认全部显示；传入后仅 `true` 对应的按钮显示，未指定项隐藏。
  * @param {Object} [options.styles] - 点、线、面的全局样式，使用 Mapbox paint 属性名。`point`：`circle-radius` / `circle-color` / `circle-opacity` / `circle-stroke-width` / `circle-stroke-color`；`line`：`line-color` / `line-width` / `line-opacity` / `line-dasharray`；`polygon`：`fill-color` / `fill-opacity` 及轮廓的 `line-*`。选中要素的颜色由 `selected.color` 指定（默认 `#fbb03b`），绘制完成后要素处于选中状态；绘制中的预览线点沿用对应的点、线、面颜色。可通过 `preview.point` / `preview.line` / `preview.polygon` 单独设置绘制中的样式（属性同上，面预览可用 `fill-*` 与轮廓 `line-*`），未设置的属性沿用主样式或默认值。
+ * @param {string} [options.position='top-left'] - 未在 `videoMap.addControl` 中指定位置时使用的控件位置。
  * @example
  * videoMap.addControl(new mapboxgl.supermap.VideoMapDrawControl({
  *   styles: { point: { 'circle-color': '#f00' }, line: { 'line-width': 4 } }
@@ -74,7 +75,8 @@ export class VideoMapDrawControl {
     this.options = {
       videoMap: options.videoMap,
       controls: resolveControls(options),
-      styles: options.styles
+      styles: options.styles,
+      position: options.position || 'top-left'
     };
     this.videoMap = options.videoMap || null;
     this._buttons = {};
@@ -85,6 +87,7 @@ export class VideoMapDrawControl {
   }
 
   /**
+   * @private
    * @function VideoMapDrawControl.prototype.setVideoMap
    * @description 绑定视频地图实例。
    * @param {VideoMap} videoMap - 视频地图。
@@ -100,6 +103,7 @@ export class VideoMapDrawControl {
   }
 
   /**
+   * @private
    * @function VideoMapDrawControl.prototype.onAdd
    * @description 添加到地图。
    * @param {mapboxgl.Map} map - MapboxGL 地图对象。
@@ -139,6 +143,7 @@ export class VideoMapDrawControl {
   }
 
   /**
+   * @private
    * @function VideoMapDrawControl.prototype.onRemove
    * @description 从地图移除控件。
    */
@@ -156,12 +161,13 @@ export class VideoMapDrawControl {
   }
 
   /**
+   * @private
    * @function VideoMapDrawControl.prototype.getDefaultPosition
    * @description 默认位置。
    * @returns {string} 控件位置。
    */
   getDefaultPosition() {
-    return 'top-left';
+    return this.options.position;
   }
 
   /**