bruce-cesium 2.1.9 → 2.2.0

package/dist/bruce-cesium.es5.js

@@ -1,6 +1,6 @@
 import { BruceEvent, Cartes, Carto, Entity as Entity$1, Geometry, Tileset, MathUtils, LRUCache, ZoomControl, Style, EntityTag, Calculator, EntityLod, EntityType, ClientFile, ObjectUtils, DelayQueue, BatchedDataGetter, EntityRelationType, EntityCoords, EntityFilterGetter, EntitySource, MenuItem, EntityRelation, ENVIRONMENT, ProjectView, ProjectViewBookmark, ProjectViewTile, ProjectViewLegacyTile, ProgramKey, Camera } from 'bruce-models';
 import * as Cesium from 'cesium';
-import { Cartesian2, Cartographic, CallbackProperty, Cartesian3, Color, Rectangle, Math as Math$1, Entity, Primitive, Cesium3DTileFeature, HeightReference, DistanceDisplayCondition, NearFarScalar, HorizontalOrigin, VerticalOrigin, ClassificationType, ArcType, PolygonHierarchy, ShadowMode, PolylineGraphics, HeadingPitchRoll, Transforms, ColorBlendMode, SceneMode, HeadingPitchRange, Cesium3DTileColorBlendMode, createOsmBuildings, Cesium3DTileStyle, KmlDataSource, OrthographicFrustum, JulianDate, createWorldTerrain, EllipsoidTerrainProvider, CesiumTerrainProvider, BingMapsImageryProvider, BingMapsStyle, MapboxImageryProvider, MapboxStyleImageryProvider, ArcGisMapServerImageryProvider, OpenStreetMapImageryProvider, GridImageryProvider, GeographicTilingScheme, ImageryLayer, UrlTemplateImageryProvider, TileMapServiceImageryProvider, IonImageryProvider, Cesium3DTileset, Matrix4, Matrix3, IonResource, CesiumInspector, EllipsoidGeodesic, sampleTerrainMostDetailed, PolygonPipeline, ColorMaterialProperty, EasingFunction, GeometryInstance } from 'cesium';
+import { Cartesian2, Cartographic, CallbackProperty, Cartesian3, Color, Rectangle, Math as Math$1, HeightReference, DistanceDisplayCondition, NearFarScalar, Entity, HorizontalOrigin, VerticalOrigin, ClassificationType, ArcType, PolygonHierarchy, ShadowMode, PolylineGraphics, HeadingPitchRoll, Transforms, ColorBlendMode, SceneMode, Primitive, Cesium3DTileFeature, Cesium3DTileColorBlendMode, HeadingPitchRange, KmlDataSource, OrthographicFrustum, JulianDate, createOsmBuildings, Cesium3DTileStyle, createWorldTerrain, EllipsoidTerrainProvider, CesiumTerrainProvider, BingMapsImageryProvider, BingMapsStyle, MapboxImageryProvider, MapboxStyleImageryProvider, ArcGisMapServerImageryProvider, OpenStreetMapImageryProvider, GridImageryProvider, GeographicTilingScheme, ImageryLayer, UrlTemplateImageryProvider, TileMapServiceImageryProvider, IonImageryProvider, Cesium3DTileset, Matrix4, Matrix3, IonResource, CesiumInspector, ColorMaterialProperty, EasingFunction, GeometryInstance, EllipsoidGeodesic, sampleTerrainMostDetailed, PolygonPipeline } from 'cesium';
 
 var TIME_LAG = 300;
 var POSITION_CHECK_TIMER = 950;
@@ -2711,6 +2711,30 @@ var Quad = /** @class */ (function () {
             this.southeast.Remove(point);
         }
     };
+    Quad.prototype.GetDistanceToQuad = function (pos3d) {
+        var minLat = this.boundary.y - this.boundary.h;
+        var maxLat = this.boundary.y + this.boundary.h;
+        var minLon = this.boundary.x - this.boundary.w;
+        var maxLon = this.boundary.x + this.boundary.w;
+        var points = [
+            // Corners.
+            new Cartesian3(minLon, minLat, 0),
+            new Cartesian3(minLon, maxLat, 0),
+            new Cartesian3(maxLon, minLat, 0),
+            new Cartesian3(maxLon, maxLat, 0),
+            // Center.
+            new Cartesian3(this.boundary.x, this.boundary.y, 0)
+        ];
+        var shortest = Number.MAX_VALUE;
+        for (var _i = 0, points_1 = points; _i < points_1.length; _i++) {
+            var point = points_1[_i];
+            var distance = Cartesian3.distance(pos3d, point);
+            if (distance < shortest) {
+                shortest = distance;
+            }
+        }
+        return shortest;
+    };
     return Quad;
 }());
 var _clusterImageCache = new LRUCache(500);
@@ -2733,14 +2757,15 @@ function _loadClusterImage(params) {
                         canvas.width = size;
                         canvas.height = size;
                         var ctx = canvas.getContext("2d");
+                        var WHITESPACE_PADDING_PERCENT = 0.05;
+                        var radius = (size / 2) - (size * WHITESPACE_PADDING_PERCENT);
                         var drawWithoutImage = function (img) {
                             ctx.beginPath();
-                            ctx.arc(size / 2, size / 2, size / 2, 0, 2 * Math.PI, false);
+                            ctx.arc(size / 2, size / 2, radius, 0, 2 * Math.PI, false);
                             var fill = null;
                             var txt = null;
                             if (img) {
                                 var brightness = calculateImageBrightness(img);
-                                // brightness < 128 = light background.
                                 fill = brightness < 128 ? "white" : "#114d78";
                                 txt = brightness < 128 ? "black" : "white";
                             }
@@ -2750,9 +2775,9 @@ function _loadClusterImage(params) {
                             }
                             ctx.fillStyle = fill;
                             ctx.fill();
-                            var maxTextWidth = size * 0.8;
-                            var maxTextHeight = size * 0.8;
-                            var minTextSize = Math.floor(size / 10);
+                            var maxTextWidth = size * 0.7;
+                            var maxTextHeight = size * 0.7;
+                            var minTextSize = Math.floor(size / 12);
                             var textSize = findOptimalFontSize(text, maxTextWidth, maxTextHeight, minTextSize);
                             ctx.font = "bold ".concat(textSize, "px Arial");
                             ctx.fillStyle = txt;
@@ -2762,14 +2787,14 @@ function _loadClusterImage(params) {
                         };
                         var drawWithImage = function (img) {
                             var aspectRatio = img.width / img.height;
-                            var imageSize = Math.min(size / 2, img.width, img.height);
-                            if (imageSize / aspectRatio > size / 2) {
-                                imageSize = (size / 2) * aspectRatio;
+                            var imageSize = Math.min(radius, img.width, img.height);
+                            if (imageSize / aspectRatio > radius) {
+                                imageSize = radius * aspectRatio;
                             }
                             var imageX = (size - imageSize) / 2;
                             var imageY = (size - imageSize) / 2 - imageSize / 3;
                             ctx.beginPath();
-                            ctx.arc(size / 2, size / 2, size / 2, 0, 2 * Math.PI, false);
+                            ctx.arc(size / 2, size / 2, radius, 0, 2 * Math.PI, false);
                             var brightness = calculateImageBrightness(img);
                             var bgColor = brightness < 128 ? "white" : "#114d78";
                             var txtColor = brightness < 128 ? "black" : "white";
@@ -2780,7 +2805,7 @@ function _loadClusterImage(params) {
                             ctx.shadowOffsetY = 3;
                             ctx.shadowBlur = 5;
                             ctx.drawImage(img, imageX, imageY, imageSize, imageSize);
-                            var padding = imageSize / 6;
+                            var padding = imageSize / 7;
                             var maxTextWidth = imageSize;
                             var maxTextHeight = imageSize - padding;
                             var minTextSize = Math.floor(imageSize / 5);
@@ -2802,7 +2827,7 @@ function _loadClusterImage(params) {
                             while (fontSize > minSize) {
                                 tempCtx.font = "bold ".concat(fontSize, "px Arial");
                                 var measuredWidth = tempCtx.measureText(text).width;
-                                var measuredHeight = fontSize * 1.2; // Allowing some padding
+                                var measuredHeight = fontSize * 1.2;
                                 if (measuredWidth <= maxWidth && measuredHeight <= maxHeight) {
                                     break;
                                 }
@@ -2874,17 +2899,20 @@ function getClusterImage(params) {
     }
     return null;
 }
+var FORCE_UPDATE_BATCH_SIZE = 1000;
+var FORCE_UPDATE_BATCH_DELAY = 100;
 var PointClustering = /** @class */ (function () {
     function PointClustering(register, menuItemId) {
         var _this = this;
         this.disposed = false;
         this.registeredEntityIds = new Set();
+        // Queue to force update entities.
+        this.updateEntityQueue = [];
         this.register = register;
         this.viewer = register.Viewer;
         this.menuItemId = menuItemId;
-        this.updateClusterSpacing(0);
         var boundary = new Rectangle$1(0, 0, 360, 180);
-        this.quadTree = new Quad(boundary, 4);
+        this.quadTree = new Quad(boundary, 30);
         this.prevClusteredEntities = new Set();
         this.currClusteredEntities = new Set();
         this.clusterEntities = new Map();
@@ -2893,6 +2921,39 @@ var PointClustering = /** @class */ (function () {
         }, 1000);
         this.listenCamera();
     }
+    PointClustering.prototype.queueForceUpdate = function (entityIds) {
+        for (var i = 0; i < entityIds.length; i++) {
+            if (this.updateEntityQueue.includes(entityIds[i])) {
+                continue;
+            }
+            this.updateEntityQueue.push(entityIds[i]);
+        }
+        this.runForceUpdateQueue();
+    };
+    PointClustering.prototype.runForceUpdateQueue = function () {
+        var _this = this;
+        if (!this.updateEntityQueue.length) {
+            return;
+        }
+        if (this.queueInterval) {
+            return;
+        }
+        this.queueInterval = setInterval(function () {
+            if (_this.disposed) {
+                clearInterval(_this.queueInterval);
+                _this.queueInterval = null;
+                return;
+            }
+            var ids = _this.updateEntityQueue.splice(0, FORCE_UPDATE_BATCH_SIZE);
+            _this.register.ForceUpdate({
+                entityIds: ids
+            });
+            if (!_this.updateEntityQueue.length) {
+                clearInterval(_this.queueInterval);
+                _this.queueInterval = null;
+            }
+        }, FORCE_UPDATE_BATCH_DELAY);
+    };
     /**
      * Starts listening to camera changes.
      * This will trigger the clustering update whenever camera is moved.
@@ -2947,6 +3008,7 @@ var PointClustering = /** @class */ (function () {
         this.clusterEntities.clear();
         this.unlistenCamera();
         this.disposed = true;
+        this.updateEntityQueue = [];
         // Restore entities.
         var toUpdateIds = [];
         for (var _c = 0, _d = Array.from(this.registeredEntityIds); _c < _d.length; _c++) {
@@ -2974,8 +3036,8 @@ var PointClustering = /** @class */ (function () {
     PointClustering.prototype.calculateCentroid = function (points) {
         var lonSum = 0;
         var latSum = 0;
-        for (var _i = 0, points_1 = points; _i < points_1.length; _i++) {
-            var point = points_1[_i];
+        for (var _i = 0, points_2 = points; _i < points_2.length; _i++) {
+            var point = points_2[_i];
             lonSum += point.lon;
             latSum += point.lat;
         }
@@ -2995,9 +3057,10 @@ var PointClustering = /** @class */ (function () {
         // 1: Update precision.
         // This defines how far apart these clusters can be.
         var cameraHeight = this.viewer.camera.positionCartographic.height;
-        this.updateClusterSpacing(cameraHeight);
+        this.getClusterSpacing(cameraHeight);
         // 2: Get clusters.
         var _a = this.getClusters(), clusters = _a.clusters, noLongerClustered = _a.noLongerClustered;
+        var entitiesToUpdate = [];
         // 3: Remove all cesium cluster entities that are no longer clustered.
         for (var _i = 0, _b = Array.from(noLongerClustered); _i < _b.length; _i++) {
             var id = _b[_i];
@@ -3014,18 +3077,30 @@ var PointClustering = /** @class */ (function () {
                 });
                 if (rego && rego.suppressShow) {
                     rego.suppressShow = false;
-                    this.register.ForceUpdate({
-                        entityIds: [id],
-                    });
+                    entitiesToUpdate.push(id);
                 }
             }
         }
         var getScale = function (count) {
-            var baseSize = 20;
-            var scalingFactor = 2;
-            var scale = baseSize + scalingFactor * (count - 1);
-            scale = Math.min(scale, 120);
-            return scale;
+            // const MIN_SCALE = 15;
+            // const MAX_SCALE = 80;
+            // const SCALE_PER_POINT = 1.01;
+            // let scale = MIN_SCALE + (count * SCALE_PER_POINT);
+            // scale = Math.min(scale, MAX_SCALE);
+            // return scale;
+            if (count >= 10000) {
+                return 140;
+            }
+            if (count >= 1000) {
+                return 120;
+            }
+            if (count >= 100) {
+                return 90;
+            }
+            if (count >= 10) {
+                return 80;
+            }
+            return 70;
         };
         /**
          * Generate circle with label in center.
@@ -3067,7 +3142,8 @@ var PointClustering = /** @class */ (function () {
                         height: getScale(count),
                         verticalOrigin: VerticalOrigin.CENTER,
                         horizontalOrigin: HorizontalOrigin.CENTER,
-                        disableDepthTestDistance: Number.POSITIVE_INFINITY
+                        disableDepthTestDistance: Number.POSITIVE_INFINITY,
+                        scaleByDistance: new NearFarScalar(1.5e2, 0.5, 3.0e7, 0.1),
                     }
                 });
                 this_1.clusterEntities.set(clusterId, clusterEntity);
@@ -3080,9 +3156,7 @@ var PointClustering = /** @class */ (function () {
                 });
                 if (rego && !rego.suppressShow) {
                     rego.suppressShow = true;
-                    this_1.register.ForceUpdate({
-                        entityIds: [entityId],
-                    });
+                    entitiesToUpdate.push(entityId);
                 }
             }
         };
@@ -3092,6 +3166,7 @@ var PointClustering = /** @class */ (function () {
             var cluster = clusters_1[_e];
             _loop_1(cluster);
         }
+        this.queueForceUpdate(entitiesToUpdate);
         var _loop_2 = function (clusterId, clusterEntity) {
             if (!clusters.find(function (x) { return x.center.id == clusterId; })) {
                 this_2.viewer.entities.remove(clusterEntity);
@@ -3105,105 +3180,77 @@ var PointClustering = /** @class */ (function () {
             _loop_2(clusterId, clusterEntity);
         }
     };
-    /**
-     * Updates how apart clusters can be based on camera distance.
-     * @param cameraHeight
-     */
-    PointClustering.prototype.updateClusterSpacing = function (cameraHeight) {
-        // Camera height thresholds in meters.
-        var cameraHeightThresholds = [4000, 5000, 8000, 13000, 25000, 40000];
+    PointClustering.prototype.getClusterSpacing = function (distanceFromCluster) {
+        // Distance thresholds in meters from the cluster.
+        var distanceThresholds = [3000, 4000, 5300, 6000, 7000];
         // Distance increments in degrees.
-        var distanceIncrements = [0.005, 0.01, 0.02, 0.04, 0.1, 0.5];
-        // Find the appropriate spacing based on the camera height.
-        var spacing = 0;
-        for (var i = 0; i < cameraHeightThresholds.length; i++) {
-            if (cameraHeight && cameraHeight < cameraHeightThresholds[i]) {
-                spacing += distanceIncrements[i];
-                break;
+        var distanceIncrements = [0.001, 0.002, 0.01, 0.03, 0.09];
+        var index = 0;
+        if (distanceFromCluster) {
+            for (var i = 0; i < distanceThresholds.length; i++) {
+                if (distanceFromCluster > distanceThresholds[i]) {
+                    index = i;
+                }
             }
-            spacing += distanceIncrements[i];
         }
-        this.distanceBetweenClusters = spacing;
+        return distanceIncrements[index];
     };
-    /**
-     * Gathers clusters.
-     * @returns
-     */
     PointClustering.prototype.getClusters = function () {
         var _this = this;
         this.currClusteredEntities.clear();
         var clusters = [];
         var processedPoints = new Set();
         var cameraPosition = this.viewer.camera.position;
-        for (var _i = 0, _a = this.quadTree.points; _i < _a.length; _i++) {
-            var point = _a[_i];
-            // Skip points already processed in previous clusters.
-            if (processedPoints.has(point.id)) {
-                continue;
-            }
-            // Skip points closer than 4000 meters to the camera.
-            var cartesian3 = Cartesian3.fromDegrees(point.lon, point.lat);
-            if (Cartesian3.distance(cartesian3, cameraPosition) <= 4000) {
-                continue;
-            }
-            var found = [];
-            var nearbyPoints = this.quadTree.Query(new Circle(point.lon, point.lat, this.distanceBetweenClusters), found);
-            if (nearbyPoints.length > 1) {
-                var cluster = { center: point, points: [] };
-                for (var _b = 0, nearbyPoints_1 = nearbyPoints; _b < nearbyPoints_1.length; _b++) {
-                    var nearby = nearbyPoints_1[_b];
-                    if (!cluster.points.includes(nearby)) {
-                        cluster.points.push(nearby);
-                        processedPoints.add(nearby.id);
-                        this.currClusteredEntities.add(nearby.id);
+        var MIN_CAMERA_DISTANCE = 5000;
+        var processQuad = function (quad) {
+            // Distance to quad.
+            // TODO: Needs improvement.
+            var distanceToQuad = quad.GetDistanceToQuad(cameraPosition);
+            // Skip quads that are too close.
+            if (distanceToQuad >= MIN_CAMERA_DISTANCE) {
+                for (var _i = 0, _a = quad.points; _i < _a.length; _i++) {
+                    var point = _a[_i];
+                    // Skip points already processed in previous clusters.
+                    if (processedPoints.has(point.id)) {
+                        continue;
+                    }
+                    // Skip points closer than MIN_CAMERA_DISTANCE meters to the camera.
+                    var cartesian3 = Cartesian3.fromDegrees(point.lon, point.lat);
+                    var distanceFromCluster = Cartesian3.distance(cartesian3, cameraPosition);
+                    if (distanceFromCluster <= MIN_CAMERA_DISTANCE) {
+                        continue;
+                    }
+                    var found = [];
+                    var nearbyPoints = quad.Query(new Circle(point.lon, point.lat, _this.getClusterSpacing(distanceFromCluster)), found);
+                    if (nearbyPoints.length > 1) {
+                        var cluster = { center: point, points: [] };
+                        for (var _b = 0, nearbyPoints_1 = nearbyPoints; _b < nearbyPoints_1.length; _b++) {
+                            var nearby = nearbyPoints_1[_b];
+                            if (!cluster.points.includes(nearby)) {
+                                cluster.points.push(nearby);
+                                processedPoints.add(nearby.id);
+                                _this.currClusteredEntities.add(nearby.id);
+                            }
+                        }
+                        clusters.push(cluster);
                     }
                 }
-                clusters.push(cluster);
             }
-        }
+            if (quad.divided) {
+                processQuad(quad.northwest);
+                processQuad(quad.northeast);
+                processQuad(quad.southwest);
+                processQuad(quad.southeast);
+            }
+        };
+        processQuad(this.quadTree);
         // Filter out clusters with only one point.
         var validClusters = clusters.filter(function (cluster) { return cluster.points.length > 1; });
-        // Merge adjacent clusters.
-        var mergedClusters = this.mergeClusters(validClusters);
         // Get the entity IDs that are no longer clustered
         var noLongerClustered = new Set(Array.from(this.prevClusteredEntities).filter(function (id) { return !_this.currClusteredEntities.has(id); }));
         // Update the previous clustered entities ref.
         this.prevClusteredEntities = new Set(this.currClusteredEntities);
-        return { clusters: mergedClusters, noLongerClustered: noLongerClustered };
-    };
-    /**
-     * Merges clusters that are nearby based on the distanceBetweenClusters value.
-     * @param clusters
-     * @returns
-     */
-    PointClustering.prototype.mergeClusters = function (clusters) {
-        var _a;
-        var mergedClusters = [].concat(clusters);
-        // Keep looping while merges keep happening.
-        var mergeOccurred = true;
-        while (mergeOccurred) {
-            mergeOccurred = false;
-            for (var i = 0; i < mergedClusters.length - 1; i++) {
-                for (var j = i + 1; j < mergedClusters.length; j++) {
-                    var cluster1 = mergedClusters[i];
-                    var cluster2 = mergedClusters[j];
-                    var centerDistance = this.calculateDistance(cluster1.center.lon, cluster1.center.lat, cluster2.center.lon, cluster2.center.lat);
-                    var distanceThreshold = this.distanceBetweenClusters;
-                    if (centerDistance <= distanceThreshold) {
-                        // Merge clusters.
-                        (_a = cluster1.points).push.apply(_a, cluster2.points);
-                        mergedClusters.splice(j, 1);
-                        this.removeClusterEntity(cluster2.center.id);
-                        mergeOccurred = true;
-                        break;
-                    }
-                }
-                if (mergeOccurred) {
-                    break;
-                }
-            }
-        }
-        return mergedClusters;
+        return { clusters: validClusters, noLongerClustered: noLongerClustered };
     };
     /**
      * Removes Cesium cluster entity.
@@ -3231,24 +3278,7 @@ var PointClustering = /** @class */ (function () {
     PointClustering.prototype.addPoint = function (id, cartesian3) {
         var point = this.convertCartesianToCartographic(cartesian3);
         point.id = id;
-        this.quadTree.Insert(point);
-    };
-    /**
-     * Calculates rough distance across earth between two points.
-     * @param lon1
-     * @param lat1
-     * @param lon2
-     * @param lat2
-     * @returns
-     */
-    PointClustering.prototype.calculateDistance = function (lon1, lat1, lon2, lat2) {
-        var lonDelta = Math.abs(lon1 - lon2);
-        var latDelta = Math.abs(lat1 - lat2);
-        // Approximate radius of the Earth in kilometers
-        var earthRadius = 6371;
-        var distance = 2 * Math.asin(Math.sqrt(Math.sin(latDelta / 2) * Math.sin(latDelta / 2) +
-            Math.cos(lat1) * Math.cos(lat2) * Math.sin(lonDelta / 2) * Math.sin(lonDelta / 2))) * earthRadius;
-        return distance;
+        return this.quadTree.Insert(point);
     };
     /**
      * Adds entity to clustering logic.
@@ -3301,8 +3331,11 @@ var PointClustering = /** @class */ (function () {
                 this.iconUrl = iconUrl;
             }
         }
+        var added = this.addPoint(id, pos3d);
+        if (!added) {
+            return false;
+        }
         this.registeredEntityIds.add(id);
-        this.addPoint(id, pos3d);
         this.updateQueue.Call();
         return true;
     };
@@ -10833,7 +10866,7 @@ var ViewRenderEngine;
     ViewRenderEngine.Render = Render;
 })(ViewRenderEngine || (ViewRenderEngine = {}));
 
-var VERSION = "2.1.9";
+var VERSION = "2.2.0";
 
 export { VERSION, CesiumViewMonitor, ViewerUtils, MenuItemManager, EntityRenderEngine, MenuItemCreator, VisualsRegister, RenderManager, EntitiesIdsRenderManager, EntitiesLoadedRenderManager, EntitiesRenderManager, EntityRenderManager, TilesetCadRenderManager, TilesetArbRenderManager, TilesetEntitiesRenderManager, TilesetOsmRenderManager, TilesetPointcloudRenderManager, TilesetGooglePhotosRenderManager, DataSourceStaticKmlManager, RelationsRenderManager, SharedGetters, CesiumParabola, ViewRenderEngine, TileRenderEngine, TilesetRenderEngine, CESIUM_INSPECTOR_KEY, ViewUtils, DrawingUtils, MeasureUtils, EntityUtils };
 //# sourceMappingURL=bruce-cesium.es5.js.map