[feature]videomap新增播放控件、绘制控件、视频范围、点击弹窗（地图代理）， videolayer新增播放控件

AI-GEN: 70% Cursor

Author: luoxiao-supermap

examples/locales/en-US/resources.js

@@ -738,10 +738,30 @@ window.examplesResources = {
         "title_dataAttributes": "Attributes",
         "title_chartService": "Chart",
         "title_videoLayer":"Video Layer",
+        "title_videoLayerWithTime":"Video Layer with Time Parameters",
         "title_videoMap":"Video Map",
+        "title_videoMapDraw":"Video Map Draw Compare",
         "title_videoMapWithTime":"Dynamic Video Map",
+        "title_videoMapWithTimeDraw":"Dynamic Video Map Draw Compare",
         "title_videoMapWithTime_qingdao":"Dynamic Video Map - Qingdao",
         "title_videoMapWithTime_huainan":"Dynamic Video Map - Huainan",
+        "title_videoMapWithTime_huainanDraw":"Dynamic Video Map Draw Compare - Huainan",
+        "text_videoLayerWithTime_play":"Play",
+        "text_videoLayerWithTime_pause":"Pause",
+        "text_videoLayerWithTime_paused":"Paused",
+        "text_videoLayerWithTime_playing":"Playing",
+        "text_videoMapDraw_videoLabel":"Video Map",
+        "text_videoMapDraw_basemapLabel":"Tianditu Imagery",
+        "text_videoMapDraw_hint":"Video features are overlaid on the right map. Lines and polygons drawn on the right show their length or area.",
+        "text_videoMapDraw_syncHint":"Video features are overlaid on the right map. Drawings on the right are synced to the video and show their length or area.",
+        "text_videoMapDraw_drawnCount":"{count} feature(s) drawn.",
+        "text_videoMapDraw_length":"Length",
+        "text_videoMapDraw_area":"Area",
+        "text_huainanDraw_videoMapLabel":"Dynamic Video Map",
+        "text_huainanDraw_realMapLabel":"Tianditu Imagery",
+        "text_huainanDraw_hint":"Draw on either map; edits sync in real time. Lines show length and polygons show area.",
+        "text_huainanDraw_length":"Length",
+        "text_huainanDraw_area":"Area",
         "title_uavVideo":"Uav Video",
         "title_knowledgeGraphMap": "KnowledgeGraph",
         "title_l7_grid_map": "Grid Map",

examples/locales/zh-CN/resources.js

@@ -713,10 +713,30 @@ window.examplesResources = {
         "text_selectStartNode": "捕捉开始节点",
         "text_selectEndNode": "捕捉结束节点",
         "title_videoLayer":"视频图层",
+        "title_videoLayerWithTime":"带时间参数的视频图层",
         "title_videoMap":"视频地图",
+        "title_videoMapDraw":"视频地图标绘对比",
         "title_videoMapWithTime":"动态视频地图",
+        "title_videoMapWithTimeDraw":"动态视频地图标绘对比",
         "title_videoMapWithTime_qingdao":"动态视频地图 - 青岛",
         "title_videoMapWithTime_huainan":"动态视频地图 - 淮南",
+        "title_videoMapWithTime_huainanDraw":"动态视频地图标绘对比 - 淮南",
+        "text_videoLayerWithTime_play":"播放",
+        "text_videoLayerWithTime_pause":"暂停",
+        "text_videoLayerWithTime_paused":"已暂停",
+        "text_videoLayerWithTime_playing":"播放中",
+        "text_videoMapDraw_videoLabel":"视频地图",
+        "text_videoMapDraw_basemapLabel":"天地图影像",
+        "text_videoMapDraw_hint":"左侧视频要素实时叠加到右侧；右侧绘制的线和面会显示长度或面积。",
+        "text_videoMapDraw_syncHint":"左侧视频要素实时叠加到右侧；右侧绘制同步显示在左侧视频，并显示长度或面积。",
+        "text_videoMapDraw_drawnCount":"已绘制 {count} 个要素。",
+        "text_videoMapDraw_length":"长度",
+        "text_videoMapDraw_area":"面积",
+        "text_huainanDraw_videoMapLabel":"动态视频地图",
+        "text_huainanDraw_realMapLabel":"天地图影像",
+        "text_huainanDraw_hint":"两侧均可绘制，完成后实时同步；线显示长度，面显示面积。",
+        "text_huainanDraw_length":"长度",
+        "text_huainanDraw_area":"面积",
         "title_uavVideo":"无人机视频",
         "title_knowledgeGraphMap": "知识图谱",
         "title_l7_grid_map": "网格地图",

examples/mapboxgl/config.js

@@ -1876,26 +1876,47 @@ 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',
                     version: '11.2.0',
                     thumbnail: 'videoLayerWithTime.png',
                     fileName: 'videoLayerWithTime'
-                                    },
-                                    {
-                                        name: '动态视频地图',
-                                        name_en: 'Dynamic Video Map',
-                                        version: '12.1.1',
-                                        thumbnail: 'videoMap.png',
-                                        fileName: 'videoMapWithTime'
+                  },
+                  {
+                    name: '动态视频地图',
+                    name_en: 'Dynamic Video Map',
+                    version: '12.1.1',
+                    thumbnail: 'videoMapWithTime.png',
+                    fileName: 'videoMapWithTime'
+                  },
+                  {
+                    name: '动态视频地图标绘对比',
+                    name_en: 'Dynamic Video Map Draw Compare',
+                    version: '12.1.1',
+                    thumbnail: 'videoMapWithTimeDraw.png',
+                    fileName: 'videoMapWithTimeDraw'
                   },
                   {
                     name: '动态视频地图 - 淮南',
                     name_en: 'Dynamic Video Map - Huainan',
                     version: '12.1.1',
-                    thumbnail: 'videoMap.png',
+                    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/img/videoMapWithTime.png

@@ -14,7 +14,7 @@
 
 <head>
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
-    <title data-i18n="resources.title_uavVideo"></title>
+    <title data-i18n="resources.title_videoLayerWithTime"></title>
     <style type="text/css">
         body {
             margin: 0;
@@ -132,6 +132,7 @@
                     ]
                 });
                 map.addLayer(videoLayer);
+                map.addControl(new mapboxgl.supermap.VideoPlayControl({ target: videoLayer }));
             });
         }
         map.on('load', function () {

examples/mapboxgl/img/videoMapWithTimeDraw.png

@@ -26,6 +26,28 @@
         bottom: 0;
         width: 100%;
       }
+
+      .custom-play-btn {
+        display: flex;
+        align-items: center;
+        gap: 6px;
+        padding: 8px 16px;
+        border: none;
+        border-radius: 4px;
+        background: #1f6feb;
+        color: #fff;
+        font-size: 14px;
+        cursor: pointer;
+      }
+
+      .custom-play-icon {
+        width: 18px;
+        height: 18px;
+        fill: #fff;
+      }
+      .mapboxgl-ctrl .custom-play-btn:not(:disabled):hover {
+        background: #1f6feb;
+      }
     </style>
   </head>
   <body>
@@ -215,6 +237,42 @@
           });
 
           videoMap.on('load', function () {
+            var playControl = new mapboxgl.supermap.VideoPlayControl();
+            playControl.setHTML(
+              '<button type="button" class="custom-play-btn">' +
+                '<span class="sm-mapboxgl-play-when-paused">' +
+                resources.text_videoLayerWithTime_play +
+                '</span>' +
+                '<span class="sm-mapboxgl-play-when-playing">' +
+                resources.text_videoLayerWithTime_pause +
+                '</span>' +
+                '</button>'
+            );
+            videoMap.addControl(playControl, 'bottom-left');
+
+            videoMap.on('click', function (event) {
+              var features = videoMap.queryRenderedFeatures(event.point);
+              if (!features.length) {
+                return;
+              }
+              var feature = features[0];
+              var content = document.createElement('div');
+              Object.keys(feature.properties || {}).forEach(function (key) {
+                var row = document.createElement('div');
+                var label = document.createElement('strong');
+                label.textContent = key + ': ';
+                var value = document.createElement('span');
+                value.textContent = String(feature.properties[key]);
+                row.appendChild(label);
+                row.appendChild(value);
+                content.appendChild(row);
+              });
+              new mapboxgl.Popup({ closeButton: true, closeOnClick: true })
+                .setLngLat(event.lngLat)
+                .setDOMContent(content)
+                .addTo(videoMap);
+            });
+
             var datasetList = ['POI', 'Road_L', 'Water', '写字楼', '学校', '步行道'];
             datasetList.forEach((name) => {
               query1(name);