deeptwins-engine-3d 0.1.44 → 0.1.46

package/dist/esm/videoFusion/BaseVideo.js

@@ -66,9 +66,9 @@ var BaseVideo = /*#__PURE__*/function () {
       if (!videoContainer) {
         return;
       }
-      this.videoElement = document.createElement('video');
-      this.videoElement.id = uuidv4();
       if (this.videoType === 'video') {
+        this.videoElement = document.createElement('video');
+        this.videoElement.id = uuidv4();
         var _merge = merge(DEFAULT_VIDEO_TEXTURE_VIDEO(), this.options.video),
           loop = _merge.loop,
           muted = _merge.muted,
@@ -89,6 +89,8 @@ var BaseVideo = /*#__PURE__*/function () {
         this.videoElement.appendChild(sourceEl);
         videoContainer.appendChild(this.videoElement);
       } else if (this.videoType === 'hls') {
+        this.videoElement = document.createElement('video');
+        this.videoElement.id = uuidv4();
         var _merge2 = merge(DEFAULT_VIDEO_TEXTURE_HLS(), this.options.hls),
           _muted = _merge2.muted,
           _autoPlay = _merge2.autoPlay,
@@ -128,16 +130,15 @@ var BaseVideo = /*#__PURE__*/function () {
           });
         }
       } else if (this.videoType === 'custom') {
-        var _this$options$custom = this.options.custom,
-          _width2 = _this$options$custom.width,
-          _height2 = _this$options$custom.height,
-          onReady = _this$options$custom.onReady;
-        this.videoElement.width = _width2;
-        this.videoElement.height = _height2;
-        videoContainer.appendChild(this.videoElement);
+        var element = document.createElement('div');
+        element.id = uuidv4();
+        var onReady = this.options.custom.onReady;
+        videoContainer.appendChild(element);
         if (onReady) {
           this.status = 'READY';
-          onReady(this.videoElement, this.play, this.pause);
+          onReady(element, function (video) {
+            _this.videoElement = video;
+          });
         }
       }
     }
@@ -157,9 +158,7 @@ var BaseVideo = /*#__PURE__*/function () {
     key: "_drawCanvas",
     value: function _drawCanvas(options) {
       var width = options.width,
-        height = options.height,
-        _options$featherSize = options.featherSize,
-        featherSize = _options$featherSize === void 0 ? 100 : _options$featherSize;
+        height = options.height;
       var canvas = document.createElement('canvas');
       canvas.width = width;
       canvas.height = height;
@@ -315,7 +314,7 @@ var BaseVideo = /*#__PURE__*/function () {
       this.isDestroyed = true;
       if (this.videoType === 'hls') {
         this.synchronizer && this.synchronizer.destroy();
-        this.hls && this.hls.destroyed();
+        this.hls && this.hls.destroy();
         this.getMap().clock.shouldAnimate = false;
       }
       if (this.videoType === 'custom') {

package/dist/esm/videoFusion/VideoProject.js

@@ -53,81 +53,83 @@ var VideoProject = /*#__PURE__*/function (_BaseVideo) {
       if (this.videoType === 'custom') {
         videoOptions = merge({}, this.options.custom);
       }
-      var _this$options = this.options,
-        _this$options$type = _this$options.type,
-        type = _this$options$type === void 0 ? 'fixed' : _this$options$type,
-        frustum = _this$options.frustum,
-        _this$options$style = _this$options.style,
-        _this$options$style2 = _this$options$style === void 0 ? {
-          edgeFeather: false,
-          clampToGround: 'terrain',
-          showLine: true
-        } : _this$options$style,
-        edgeFeather = _this$options$style2.edgeFeather,
-        clampToGround = _this$options$style2.clampToGround,
-        showLine = _this$options$style2.showLine;
-      frustum.show(false);
-      this.type = type;
-      this.frustum = frustum;
-      // 取后4个点
-      var points = this.frustum.getFrustumVertexPoints().slice(-4);
-      if (this.type === 'projection') {
-        // 交点数组
-        var interPoints = [];
-        points.forEach(function (point) {
-          var interPoint = _this2._getInterPointByLine(_this2.frustum.options.position, point);
-          interPoints.push(interPoint);
-        });
-        if (showLine) {
-          // 绘制线
-          this._drawLine(interPoints);
-        }
-        this.videoPolygonLayer = map.addGraphicLayer({
-          type: 'Feature',
-          geometry: {
-            type: 'Polygon',
-            coordinates: [interPoints]
-          }
-        }, {
-          type: 'polygon',
-          style: {
-            material: edgeFeather ? new Cesium.ImageMaterialProperty({
-              image: new Cesium.CallbackProperty(function () {
-                return _this2._drawCanvas(videoOptions);
-              }, false),
-              transparent: true
-            }) : this.videoElement,
-            heightReference: clampToGround ? Cesium.HeightReference.CLAMP_TO_GROUND : Cesium.HeightReference.NONE,
-            perPositionHeight: !clampToGround
+      setTimeout(function () {
+        var _this2$options = _this2.options,
+          _this2$options$type = _this2$options.type,
+          type = _this2$options$type === void 0 ? 'fixed' : _this2$options$type,
+          frustum = _this2$options.frustum,
+          _this2$options$style = _this2$options.style,
+          _this2$options$style2 = _this2$options$style === void 0 ? {
+            edgeFeather: false,
+            clampToGround: 'terrain',
+            showLine: true
+          } : _this2$options$style,
+          edgeFeather = _this2$options$style2.edgeFeather,
+          clampToGround = _this2$options$style2.clampToGround,
+          showLine = _this2$options$style2.showLine;
+        frustum.show(false);
+        _this2.type = type;
+        _this2.frustum = frustum;
+        // 取后4个点
+        var points = _this2.frustum.getFrustumVertexPoints().slice(-4);
+        if (_this2.type === 'projection') {
+          // 交点数组
+          var interPoints = [];
+          points.forEach(function (point) {
+            var interPoint = _this2._getInterPointByLine(_this2.frustum.options.position, point);
+            interPoints.push(interPoint);
+          });
+          if (showLine) {
+            // 绘制线
+            _this2._drawLine(interPoints);
           }
-        });
-      }
-      if (this.type === 'fixed') {
-        if (showLine) {
-          // 绘制线
-          this._drawLine(points);
+          _this2.videoPolygonLayer = map.addGraphicLayer({
+            type: 'Feature',
+            geometry: {
+              type: 'Polygon',
+              coordinates: [interPoints]
+            }
+          }, {
+            type: 'polygon',
+            style: {
+              material: edgeFeather ? new Cesium.ImageMaterialProperty({
+                image: new Cesium.CallbackProperty(function () {
+                  return _this2._drawCanvas(videoOptions);
+                }, false),
+                transparent: true
+              }) : _this2.videoElement,
+              heightReference: clampToGround ? Cesium.HeightReference.CLAMP_TO_GROUND : Cesium.HeightReference.NONE,
+              perPositionHeight: !clampToGround
+            }
+          });
         }
-        this.videoPolygonLayer = map.addGraphicLayer({
-          type: 'Feature',
-          geometry: {
-            type: 'Polygon',
-            coordinates: [points]
-          }
-        }, {
-          type: 'polygon',
-          style: {
-            material: edgeFeather ? new Cesium.ImageMaterialProperty({
-              image: new Cesium.CallbackProperty(function () {
-                return _this2._drawCanvas(videoOptions);
-              }, false),
-              transparent: true
-            }) : this.videoElement,
-            heightReference: Cesium.HeightReference.NONE,
-            perPositionHeight: true
+        if (_this2.type === 'fixed') {
+          if (showLine) {
+            // 绘制线
+            _this2._drawLine(points);
           }
-        });
-      }
-      this.status = 'START';
+          _this2.videoPolygonLayer = map.addGraphicLayer({
+            type: 'Feature',
+            geometry: {
+              type: 'Polygon',
+              coordinates: [points]
+            }
+          }, {
+            type: 'polygon',
+            style: {
+              material: edgeFeather ? new Cesium.ImageMaterialProperty({
+                image: new Cesium.CallbackProperty(function () {
+                  return _this2._drawCanvas(videoOptions);
+                }, false),
+                transparent: true
+              }) : _this2.videoElement,
+              heightReference: Cesium.HeightReference.NONE,
+              perPositionHeight: true
+            }
+          });
+        }
+        _this2.status = 'START';
+      }, 200);
     }
 
     // 显示隐藏
@@ -146,7 +148,7 @@ var VideoProject = /*#__PURE__*/function (_BaseVideo) {
     key: "_drawLine",
     value: function _drawLine(interPoints) {
       var _this3 = this,
-        _this$options$style3;
+        _this$options$style;
       var draw = function draw(geoJson) {
         _this3.frustumLineLayer = _this3.getMap().addGraphicLayer(geoJson, {
           type: 'polylineP',
@@ -157,7 +159,7 @@ var VideoProject = /*#__PURE__*/function (_BaseVideo) {
       };
       var linePoints = [];
       // 是否计算贴地
-      if ((_this$options$style3 = this.options.style) !== null && _this$options$style3 !== void 0 && _this$options$style3.clampToGround && this.type === 'projection') {
+      if ((_this$options$style = this.options.style) !== null && _this$options$style !== void 0 && _this$options$style.clampToGround && this.type === 'projection') {
         var clampToGround = new ClampToGround(this.getMap());
         var c3arr = utils.lngLatAltArrayToCartesian3Array(interPoints);
         clampToGround.getLngLatAltArrToHeight(c3arr, 'terrain').then(function (result) {

package/dist/esm/videoFusion/VideoTexture.js

@@ -55,18 +55,20 @@ var VideoTexture = /*#__PURE__*/function (_BaseVideo) {
         } : _this$options$style,
         edgeFeather = _this$options$style2.edgeFeather,
         style = _objectWithoutProperties(_this$options$style2, _excluded);
-      this.videoPolygonLayer = map.addGraphicLayer(this.options.data, {
-        type: 'polygon',
-        style: _objectSpread({
-          material: edgeFeather ? new Cesium.ImageMaterialProperty({
-            image: new Cesium.CallbackProperty(function () {
-              return _this._drawCanvas(videoOptions);
-            }, false),
-            transparent: true
-          }) : this.videoElement
-        }, style || {})
-      });
-      this.status = 'START';
+      setTimeout(function () {
+        _this.videoPolygonLayer = map.addGraphicLayer(_this.options.data, {
+          type: 'polygon',
+          style: _objectSpread({
+            material: edgeFeather ? new Cesium.ImageMaterialProperty({
+              image: new Cesium.CallbackProperty(function () {
+                return _this._drawCanvas(videoOptions);
+              }, false),
+              transparent: true
+            }) : _this.videoElement
+          }, style || {})
+        });
+        _this.status = 'START';
+      }, 200);
     }
   }]);
   return VideoTexture;

package/dist/esm/visualization/PointCluster.js

@@ -15,6 +15,7 @@ import { cloneDeep, flattenDeep, merge } from 'lodash';
 import { v4 as uuidv4 } from 'uuid';
 import { DEFAULT_POINT_CLUSTER_STYLE } from "../constant";
 import BaseSource from "../graphicLayer/BaseSource";
+import BillboardPrimitive from "../graphicLayer/BillboardPrimitive";
 import PrimitiveCluster from "../tool/PrimitiveCluster";
 import * as utils from "../tool/utils";
 var PointCluster = /*#__PURE__*/function () {
@@ -68,17 +69,21 @@ var PointCluster = /*#__PURE__*/function () {
       primitiveCluster.pixelRange = this.options.pixelRange;
       primitiveCluster.minimumClusterSize = 1;
       this.source.forEach(function (t) {
-        var billboard = _objectSpread(_objectSpread({
-          id: uuidv4()
-        }, merge({
+        var style = BillboardPrimitive.handleOptions(merge({
           width: 30,
           height: 30
-        }, _this.options.billboard || {})), {}, {
+        }, utils.styleFun(cloneDeep(_this.options.billboard || {}), t.properties)));
+        var billboard = _objectSpread(_objectSpread({
+          id: uuidv4()
+        }, style), {}, {
           position: t.positions,
-          source: t
+          properties: t.properties,
+          geometry: t.geometry,
+          style: _this.options.billboard
         });
         _this.billboards.push(billboard);
-        _this.billboardsCollectionCombine.add(billboard);
+        var billboarded = _this.billboardsCollectionCombine.add(billboard);
+        billboarded.properties = t.properties;
       });
 
       // 将数据传给primitiveCluster的标签属性
@@ -101,16 +106,38 @@ var PointCluster = /*#__PURE__*/function () {
           }
         }
         if (step == -1) {
-          if (_this.options.billboard) {
-            var _this$options$billboa, _this$options$billboa2, _this$options$billboa3;
-            cluster.billboard.image = (_this$options$billboa = _this.options.billboard) === null || _this$options$billboa === void 0 ? void 0 : _this$options$billboa.image;
-            cluster.billboard.width = (_this$options$billboa2 = _this.options.billboard) === null || _this$options$billboa2 === void 0 ? void 0 : _this$options$billboa2.width;
-            cluster.billboard.height = (_this$options$billboa3 = _this.options.billboard) === null || _this$options$billboa3 === void 0 ? void 0 : _this$options$billboa3.height;
-          } else {
+          if (_this.options.onCustomRender) {
             cluster.billboard.show = false;
+            var clusterPoints = _this.billboards.filter(function (t) {
+              return clusteredEntities.includes(t.id);
+            });
+            _this.options.onCustomRender(step, utils.cartesian3ToLngLatAlt(cluster.billboard.position), clusterPoints);
+          } else {
+            if (_this.options.billboard) {
+              var billboard = _this.billboardsCollectionCombine._billboards.find(function (t) {
+                return clusteredEntities.includes(t.id);
+              });
+              var style = BillboardPrimitive.handleOptions(merge({
+                width: 30,
+                height: 30
+              }, utils.styleFun(cloneDeep(_this.options.billboard || {}), (billboard === null || billboard === void 0 ? void 0 : billboard.properties) || {})));
+              Object.keys(style).forEach(function (key) {
+                cluster.billboard[key] = style[key];
+              });
+            } else {
+              cluster.billboard.show = false;
+            }
           }
         } else {
-          cluster.billboard.image = _this._drawImage(clusteredEntities.length, _this.options.grade[step].size, _this.options.grade[step].color);
+          if (_this.options.onCustomRender) {
+            cluster.billboard.show = false;
+            var _clusterPoints = _this.billboards.filter(function (t) {
+              return clusteredEntities.includes(t.id);
+            });
+            _this.options.onCustomRender(step, utils.cartesian3ToLngLatAlt(cluster.billboard.position), _clusterPoints);
+          } else {
+            cluster.billboard.image = _this._drawImage(clusteredEntities.length, _this.options.grade[step].size, _this.options.grade[step].color);
+          }
         }
       });
     }