mapboxgl 新增 videoLayer

Author: xilanhuaweidapao

package.json

@@ -164,6 +164,9 @@
     "three": "0.150.1",
     "urijs": "^1.19.11",
     "util": "^0.12.4",
+    "flv.js": "^1.6.2",
+    "video.js": "^7.10.2",
+    "videojs-flvjs-es6": "^1.0.1",
     "xlsx": "https://cdn.sheetjs.com/xlsx-0.19.3/xlsx-0.19.3.tgz"
   },
   "pre-commit": [

src/common/overlay/video/VideoLayerRenderer.js

@@ -0,0 +1,103 @@
+/* Copyright© 2000 - 2023 SuperMap Software Co.Ltd. All rights reserved.
+ * This program are made available under the terms of the Apache License, Version 2.0
+ * which accompanies this distribution and is available at http://www.apache.org/licenses/LICENSE-2.0.html.*/
+
+import videojs from 'video.js';
+import 'flv.js';
+import 'videojs-flvjs-es6';
+
+/**
+ * @private
+ * @class VideoLayerRenderer
+ * @classdesc Video。
+ * @version 11.2.0
+ * @param {Object} options - 参数。
+ * @param {string} [options.id] - 图层 ID。
+ * @param {Array} [options.extent] - 视频范围。
+ * @usage
+ */
+
+export class VideoLayerRenderer {
+  constructor(options = {}) {
+    this.options = options;
+    this.url = options.url;
+    this.layerId = options.id;
+  }
+
+  _createVideoElement() {
+    let video = document.createElement('video');
+    video.id = this.layerId;
+    video.className = 'video-js';
+    video.style.position = 'fixed';
+    video.style.left = '-200%';
+    video.setAttribute('crossorigin', 'anonymous');
+    document.body.appendChild(video);
+  }
+
+  createVideo() {
+    this._createVideoElement();
+    let options = this._getVideoOptions();
+    this.video = videojs(this.layerId, options, () => { });
+    return this.video;
+  }
+
+  _getVideoOptions() {
+    if (!this.url) {
+      return;
+    }
+    let options = {
+      autoplay: true,
+      muted: true
+    };
+    options.loop = this.loop !== false;
+    if (this.url.includes('mp4')) {
+      options['sources'] = [
+        {
+          src: this.url,
+          type: 'video/mp4'
+        }
+      ];
+    } else if (this.url.includes('flv')) {
+      options = {
+        autoplay: this.autoplay,
+        techOrder: ['html5', 'flvjs'],
+        flvjs: {
+          mediaDataSource: {
+            isLive: true,
+            cors: true,
+            withCredentials: false
+          }
+        },
+        sources: [
+          {
+            src: this.url,
+            type: 'video/x-flv'
+          }
+        ]
+      };
+    } else if (this.url.includes('m3u8')) {
+      options['sources'] = [
+        {
+          src: this.url
+        }
+      ];
+    }
+    return options;
+  }
+
+  getVideoDom() {
+    if (!this.url) {
+      return;
+    }
+    let videoDomId;
+    if (this.url.includes('flv')) {
+      let videoWrap = document.querySelector(`#${this.layerId}`);
+      videoDomId = `${this.layerId}_flvjs_api`;
+      videoWrap.style.position = 'fixed';
+      videoWrap.style.left = '-200%';
+    } else {
+      videoDomId = this.video.el_.firstChild.id;
+    }
+    return videoDomId;
+  }
+}

src/common/package.json

@@ -28,6 +28,9 @@
     "node-forge": "^1.3.1",
     "rbush": "^2.0.2",
     "urijs": "^1.19.11",
+    "flv.js": "^1.6.2",
+    "video.js": "^7.10.2",
+    "videojs-flvjs-es6": "^1.0.1",
     "xlsx": "https://cdn.sheetjs.com/xlsx-0.19.3/xlsx-0.19.3.tgz"
   }
 }

src/mapboxgl/namespace.js

@@ -8,6 +8,7 @@ import {
   LabelThemeLayer,
   MapvLayer,
   FGBLayer,
+  VideoLayer,
   RangeTheme3DLayer,
   RangeThemeLayer,
   RankSymbolThemeLayer,
@@ -95,6 +96,7 @@ mapboxgl.supermap.HeatMapLayer = HeatMapLayer;
 mapboxgl.supermap.LabelThemeLayer = LabelThemeLayer;
 mapboxgl.supermap.MapvLayer = MapvLayer;
 mapboxgl.supermap.FGBLayer = FGBLayer;
+mapboxgl.supermap.VideoLayer = VideoLayer;
 mapboxgl.supermap.RangeTheme3DLayer = RangeTheme3DLayer;
 mapboxgl.supermap.RangeThemeLayer = RangeThemeLayer;
 mapboxgl.supermap.RankSymbolThemeLayer = RankSymbolThemeLayer;

src/mapboxgl/overlay/VideoLayer.js

@@ -0,0 +1,94 @@
+/* Copyright© 2000 - 2023 SuperMap Software Co.Ltd. All rights reserved.
+ * This program are made available under the terms of the Apache License, Version 2.0
+ * which accompanies this distribution and is available at http://www.apache.org/licenses/LICENSE-2.0.html.*/
+import mapboxgl from 'mapbox-gl';
+import { Util as CommonUtil } from '@supermap/iclient-common/commontypes/Util';
+import { VideoLayerRenderer } from '@supermap/iclient-common/overlay/video/VideoLayerRenderer';
+
+/**
+ * @class VideoLayer
+ * @category  Visualization Video
+ * @modulecategory Overlay
+ * @param {string} name - 图层名称。
+ * @param {Object} options - 构造参数。
+ * @param {string} [options.id] - 专题图层 ID。默认使用 CommonUtil.createUniqueID("VideoLayer_") 创建专题图层 ID。
+ * @param {string} [options.url] - 视频 或 流链接。支持 flv, m3u8 流格式。
+ * @param {string} [options.extent] - 视频范围。
+ * @extends {mapboxgl.Evented}
+ * @usage
+ */
+export class VideoLayer extends mapboxgl.Evented {
+
+  constructor(name, options) {
+    super();
+    var _options = options ? options : {};
+    this.options = _options;
+    this.name = name;
+    this.url = this.options.url;
+    this.extent = this.options.extent;
+    this.id = _options.id ? _options.id : CommonUtil.createUniqueID("VideoLayer_");
+    this.layerId = this.id + 'outer';
+    this.type = 'custom';
+    this.renderingMode = '3d';
+    this.overlay = true;
+  }
+
+  /**
+   * @function VideoLayer.prototype.onAdd
+   * @description 添加该图层。
+   */
+  onAdd(map) {
+    this.map = map;
+    this.renderer = new VideoLayerRenderer({ url: this.url, id: this.layerId });
+    this.video = this.renderer.createVideo();
+    this.videoDomId = this.renderer.getVideoDom();
+    this.video.one('firstplay', () => {
+      this.video.play();
+    });
+    this.video.one('ready', () => {
+      this._addVideoLayer(this.map);
+    });
+    this.video.one('canplay', () => {
+      setTimeout(() => {
+        map.getSource(this.layerId).play();
+      }, 1000);
+    });
+  }
+
+  render() { }
+
+  _addVideoLayer(map) {
+    let url = this.videoDomId || this.url;
+    map.addSource(this.layerId, {
+      type: 'video',
+      urls: [url],
+      coordinates: this.extent
+    });
+
+    map.addLayer(
+      {
+        id: this.layerId,
+        type: 'raster',
+        source: this.layerId
+      }
+    );
+  }
+
+  /**
+    * @function VideoLayer.prototype.moveLayer
+    * @description 移动图层。
+    */
+  moveLayer(beforeId) {
+    this.map.moveLayer(this.layerId, beforeId);
+  }
+
+  /**
+   * @function VideoLayer.prototype.setVisibility
+   * @description 设置图层可见性。
+   * @param {boolean} [visibility] - 是否显示图层。
+   */
+  setVisibility(visibility) {
+    const visible = visibility ? 'visible' : 'none';
+    this.map.setLayoutProperty(this.layerId, 'visibility', visible);
+  }
+}

src/mapboxgl/overlay/index.js

@@ -16,6 +16,7 @@ export { HeatMapLayer } from './HeatMapLayer';
 export { DeckglLayer } from './DeckglLayer';
 export { GraticuleLayer } from './GraticuleLayer';
 export { FGBLayer } from './FGBLayer';
+export { VideoLayer } from './VideoLayer';
 export { GraphMap } from './GraphMap';
 
 export * from './graphic';

src/mapboxgl/package.json

@@ -23,6 +23,9 @@
     "fast-xml-parser": "^4.2.7",
     "flatgeobuf": "3.23.1",
     "rbush": "^2.0.2",
-    "proj4": "2.9.0"
+    "proj4": "2.9.0",
+    "flv.js": "^1.6.2",
+    "video.js": "^7.10.2",
+    "videojs-flvjs-es6": "^1.0.1"
   }
 }