bruce-cesium 2.1.7 → 2.1.9

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, HeightReference, Entity, HorizontalOrigin, VerticalOrigin, ClassificationType, ArcType, PolygonHierarchy, ShadowMode, PolylineGraphics, HeadingPitchRoll, Transforms, ColorBlendMode, Primitive, Cesium3DTileFeature, HeadingPitchRange, SceneMode, Cesium3DTileColorBlendMode, Cesium3DTileStyle, createOsmBuildings, KmlDataSource, createWorldTerrain, EllipsoidTerrainProvider, CesiumTerrainProvider, BingMapsImageryProvider, BingMapsStyle, MapboxImageryProvider, MapboxStyleImageryProvider, ArcGisMapServerImageryProvider, OpenStreetMapImageryProvider, GridImageryProvider, GeographicTilingScheme, ImageryLayer, UrlTemplateImageryProvider, TileMapServiceImageryProvider, IonImageryProvider, OrthographicFrustum, JulianDate, NearFarScalar, PolygonPipeline, CesiumInspector, EllipsoidGeodesic, sampleTerrainMostDetailed, Cesium3DTileset, Matrix4, Matrix3, IonResource, ColorMaterialProperty, EasingFunction, GeometryInstance } 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';
 
 var TIME_LAG = 300;
 var POSITION_CHECK_TIMER = 950;
@@ -1517,6 +1517,23 @@ function getRenderGroupId(zoomItem, terrain) {
     return zoomItem.MinZoom + "-" + zoomItem.MaxZoom + "-" + shouldApplyFlatFix(terrain);
 }
 var _fileValidationCache = {};
+function getDisplayCondition(min, max) {
+    // Max is required.
+    if (isNaN(+max)) {
+        return undefined;
+    }
+    // Min is optional.
+    if (isNaN(+min)) {
+        min = 0;
+    }
+    // Adjusting slightly because I distrust our initial calculation vs Cesium's one.
+    max = (+max) * 1.2;
+    min = +min;
+    if (min > 0) {
+        min = (+min) * 0.8;
+    }
+    return new DistanceDisplayCondition(min, max);
+}
 var EntityRenderEngine;
 (function (EntityRenderEngine) {
     function Render(params) {
@@ -1848,7 +1865,10 @@ var EntityRenderEngine;
                                             verticalOrigin: VerticalOrigin.BOTTOM,
                                             image: iconUrl,
                                             heightReference: getHeightRef(style),
-                                            scale: iconScale
+                                            scale: iconScale,
+                                            distanceDisplayCondition: getDisplayCondition(params.minDistance, params.maxDistance),
+                                            // Would be great once we have a setting for this.
+                                            // translucencyByDistance: getTranslucencyByDistance(params.minDistance, params.maxDistance),
                                         },
                                         position: EntityUtils.GetPos({
                                             viewer: params.viewer,
@@ -1899,7 +1919,8 @@ var EntityRenderEngine;
                                         extrudedHeight: fillHeight,
                                         heightReference: HeightReference.CLAMP_TO_GROUND,
                                         extrudedHeightReference: exHeightRef,
-                                        zIndex: 1
+                                        zIndex: 1,
+                                        distanceDisplayCondition: getDisplayCondition(params.minDistance, params.maxDistance)
                                     },
                                     position: pos === null || pos === void 0 ? void 0 : pos.clone(),
                                     show: false
@@ -1919,7 +1940,8 @@ var EntityRenderEngine;
                                             extrudedHeight: outlineHeight,
                                             heightReference: HeightReference.CLAMP_TO_GROUND,
                                             extrudedHeightReference: exHeightRef,
-                                            zIndex: 2
+                                            zIndex: 2,
+                                            distanceDisplayCondition: getDisplayCondition(params.minDistance, params.maxDistance)
                                         },
                                         position: pos === null || pos === void 0 ? void 0 : pos.clone()
                                     }));
@@ -1941,7 +1963,8 @@ var EntityRenderEngine;
                                     point: {
                                         pixelSize: size,
                                         color: cColor,
-                                        heightReference: getHeightRef(style)
+                                        heightReference: getHeightRef(style),
+                                        distanceDisplayCondition: getDisplayCondition(params.minDistance, params.maxDistance)
                                     },
                                     position: EntityUtils.GetPos({
                                         viewer: params.viewer,
@@ -2002,7 +2025,9 @@ var EntityRenderEngine;
                                     style: pStyle,
                                     tags: tags,
                                     viewer: params.viewer,
-                                    api: api
+                                    api: api,
+                                    maxDistance: zoomItem.MaxZoom,
+                                    minDistance: zoomItem.MinZoom
                                 })];
                         case 5:
                             cEntity = _d.sent();
@@ -2093,7 +2118,8 @@ var EntityRenderEngine;
                     classificationType: ClassificationType.TERRAIN,
                     arcType: ArcType.GEODESIC,
                     zIndex: getZIndex(style, entity, params.tags),
-                    clampToGround: heightRef == HeightReference.CLAMP_TO_GROUND
+                    clampToGround: heightRef == HeightReference.CLAMP_TO_GROUND,
+                    distanceDisplayCondition: getDisplayCondition(params.minDistance, params.maxDistance)
                 },
                 position: EntityUtils.GetPos({
                     viewer: params.viewer,
@@ -2141,7 +2167,9 @@ var EntityRenderEngine;
                                 entity: entity,
                                 style: lStyle,
                                 tags: tags,
-                                viewer: params.viewer
+                                viewer: params.viewer,
+                                maxDistance: zoomItem.MaxZoom,
+                                minDistance: zoomItem.MinZoom
                             });
                             if (cEntity) {
                                 cEntity._renderGroup = getRenderGroupId(zoomItem, (_c = params.viewer) === null || _c === void 0 ? void 0 : _c.terrainProvider);
@@ -2213,7 +2241,8 @@ var EntityRenderEngine;
                     heightReference: heightRef,
                     classificationType: ClassificationType.BOTH,
                     perPositionHeight: heightRef == HeightReference.CLAMP_TO_GROUND ? false : true,
-                    zIndex: zIndex
+                    zIndex: zIndex,
+                    distanceDisplayCondition: getDisplayCondition(params.minDistance, params.maxDistance)
                 },
                 position: EntityUtils.GetPos({
                     viewer: params.viewer,
@@ -2238,7 +2267,8 @@ var EntityRenderEngine;
                         clampToGround: heightRef == HeightReference.CLAMP_TO_GROUND,
                         classificationType: ClassificationType.TERRAIN,
                         arcType: ArcType.GEODESIC,
-                        zIndex: zIndex
+                        zIndex: zIndex,
+                        distanceDisplayCondition: getDisplayCondition(params.minDistance, params.maxDistance)
                     }),
                     show: false
                 });
@@ -2256,7 +2286,8 @@ var EntityRenderEngine;
                             clampToGround: heightRef == HeightReference.CLAMP_TO_GROUND,
                             classificationType: ClassificationType.TERRAIN,
                             arcType: ArcType.GEODESIC,
-                            zIndex: zIndex
+                            zIndex: zIndex,
+                            distanceDisplayCondition: getDisplayCondition(params.minDistance, params.maxDistance)
                         }),
                         show: false
                     });
@@ -2303,7 +2334,9 @@ var EntityRenderEngine;
                                 entity: entity,
                                 style: pStyle,
                                 tags: tags,
-                                viewer: params.viewer
+                                viewer: params.viewer,
+                                maxDistance: zoomItem.MaxZoom,
+                                minDistance: zoomItem.MinZoom
                             });
                             if (cEntity) {
                                 cEntity._renderGroup = getRenderGroupId(zoomItem, (_c = params.viewer) === null || _c === void 0 ? void 0 : _c.terrainProvider);
@@ -2380,7 +2413,8 @@ var EntityRenderEngine;
                     shadows: ShadowMode.ENABLED,
                     colorBlendAmount: blendAmount,
                     colorBlendMode: blendMode,
-                    color: color
+                    color: color,
+                    distanceDisplayCondition: getDisplayCondition(params.minDistance, params.maxDistance)
                 },
                 orientation: orientation,
                 position: pos,
@@ -2494,7 +2528,9 @@ var EntityRenderEngine;
                                                     api: api,
                                                     fileId: lod.clientFileId
                                                 }),
-                                                lodClientFileId: lod.clientFileId
+                                                lodClientFileId: lod.clientFileId,
+                                                maxDistance: zoomItem.MaxZoom,
+                                                minDistance: zoomItem.MinZoom
                                             });
                                             if (cEntity) {
                                                 cEntity._renderGroup = getRenderGroupId(zoomItem, (_e = params.viewer) === null || _e === void 0 ? void 0 : _e.terrainProvider);
@@ -2524,6 +2560,773 @@ var EntityRenderEngine;
     })(Model3d = EntityRenderEngine.Model3d || (EntityRenderEngine.Model3d = {}));
 })(EntityRenderEngine || (EntityRenderEngine = {}));
 
+function GetValue$1(viewer, obj) {
+    if (obj === null || obj === void 0 ? void 0 : obj.getValue) {
+        return obj.getValue(viewer.scene.lastRenderTime);
+    }
+    return obj;
+}
+var Point = /** @class */ (function () {
+    function Point(lon, lat, id) {
+        this.lon = lon;
+        this.lat = lat;
+        this.id = id;
+    }
+    return Point;
+}());
+var Circle = /** @class */ (function () {
+    function Circle(x, y, radius) {
+        this.x = x;
+        this.y = y;
+        this.radius = radius;
+        this.width = 2 * radius;
+        this.height = 2 * radius;
+    }
+    Circle.prototype.Intersects = function (range) {
+        var xDist = Math.abs(range.x - this.x);
+        var yDist = Math.abs(range.y - this.y);
+        var r = this.radius;
+        var w = range.width;
+        var h = range.height;
+        if (xDist > (w + r) || yDist > (h + r)) {
+            return false;
+        }
+        if (xDist <= w || yDist <= h) {
+            return true;
+        }
+        var dx = xDist - w;
+        var dy = yDist - h;
+        return (dx * dx + dy * dy <= this.radius * this.radius);
+    };
+    Circle.prototype.Contains = function (point) {
+        var dx = this.x - point.lon;
+        var dy = this.y - point.lat;
+        var distance = Math.sqrt(dx * dx + dy * dy);
+        return distance <= this.radius;
+    };
+    return Circle;
+}());
+var Rectangle$1 = /** @class */ (function () {
+    function Rectangle$$1(x, y, w, h) {
+        this.x = x;
+        this.y = y;
+        this.w = w;
+        this.h = h;
+        this.width = 2 * w;
+        this.height = 2 * h;
+    }
+    Rectangle$$1.prototype.Contains = function (point) {
+        return (point.lon >= this.x - this.w &&
+            point.lon < this.x + this.w &&
+            point.lat >= this.y - this.h &&
+            point.lat < this.y + this.h);
+    };
+    Rectangle$$1.prototype.Intersects = function (range) {
+        return !(range.x - range.w > this.x + this.w ||
+            range.x + range.w < this.x - this.w ||
+            range.y - range.h > this.y + this.h ||
+            range.y + range.h < this.y - this.h);
+    };
+    return Rectangle$$1;
+}());
+var Quad = /** @class */ (function () {
+    function Quad(boundary, capacity) {
+        this.boundary = boundary;
+        this.capacity = capacity;
+        this.points = [];
+        this.divided = false;
+    }
+    Quad.prototype.Subdivide = function () {
+        var x = this.boundary.x;
+        var y = this.boundary.y;
+        var w = this.boundary.w / 2;
+        var h = this.boundary.h / 2;
+        var ne = new Rectangle$1(x + w / 2, y - h / 2, w, h);
+        this.northeast = new Quad(ne, this.capacity);
+        var nw = new Rectangle$1(x - w / 2, y - h / 2, w, h);
+        this.northwest = new Quad(nw, this.capacity);
+        var se = new Rectangle$1(x + w / 2, y + h / 2, w, h);
+        this.southeast = new Quad(se, this.capacity);
+        var sw = new Rectangle$1(x - w / 2, y + h / 2, w, h);
+        this.southwest = new Quad(sw, this.capacity);
+        this.divided = true;
+    };
+    Quad.prototype.Insert = function (point) {
+        if (!this.boundary.Contains(point)) {
+            return false;
+        }
+        if (this.points.length < this.capacity) {
+            this.points.push(point);
+            return true;
+        }
+        if (!this.divided) {
+            this.Subdivide();
+        }
+        return (this.northeast.Insert(point) || this.northwest.Insert(point) ||
+            this.southeast.Insert(point) || this.southwest.Insert(point));
+    };
+    Quad.prototype.Query = function (range, found) {
+        if (!found) {
+            found = [];
+        }
+        if (!range.Intersects(this.boundary)) {
+            return found;
+        }
+        for (var _i = 0, _a = this.points; _i < _a.length; _i++) {
+            var p = _a[_i];
+            if (range.Contains(p)) {
+                found.push(p);
+            }
+        }
+        if (this.divided) {
+            this.northwest.Query(range, found);
+            this.northeast.Query(range, found);
+            this.southwest.Query(range, found);
+            this.southeast.Query(range, found);
+        }
+        return found;
+    };
+    Quad.prototype.Find = function (id) {
+        for (var _i = 0, _a = this.points; _i < _a.length; _i++) {
+            var point = _a[_i];
+            if (point.id === id) {
+                return point;
+            }
+        }
+        if (this.divided) {
+            return this.northwest.Find(id) || this.northeast.Find(id) ||
+                this.southwest.Find(id) || this.southeast.Find(id);
+        }
+        return null;
+    };
+    Quad.prototype.Remove = function (point) {
+        var index = this.points.indexOf(point);
+        if (index !== -1) {
+            this.points.splice(index, 1);
+        }
+        if (this.divided) {
+            this.northwest.Remove(point);
+            this.northeast.Remove(point);
+            this.southwest.Remove(point);
+            this.southeast.Remove(point);
+        }
+    };
+    return Quad;
+}());
+var _clusterImageCache = new LRUCache(500);
+var _clusterImageLoadedCache = new LRUCache(500);
+function _loadClusterImage(params) {
+    return __awaiter(this, void 0, void 0, function () {
+        var size, txtColor, bgColor, text, iconUrl, key, cacheData, prom;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    size = params.size, txtColor = params.txtColor, bgColor = params.bgColor, text = params.text, iconUrl = params.iconUrl;
+                    key = "".concat(size, "-").concat(txtColor, "-").concat(bgColor, "-").concat(text, "-").concat(iconUrl);
+                    cacheData = _clusterImageCache.Get(key);
+                    if (!cacheData) return [3 /*break*/, 2];
+                    return [4 /*yield*/, cacheData];
+                case 1: return [2 /*return*/, _a.sent()];
+                case 2:
+                    prom = new Promise(function (res, rej) {
+                        var canvas = document.createElement("canvas");
+                        canvas.width = size;
+                        canvas.height = size;
+                        var ctx = canvas.getContext("2d");
+                        var drawWithoutImage = function (img) {
+                            ctx.beginPath();
+                            ctx.arc(size / 2, size / 2, size / 2, 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";
+                            }
+                            else {
+                                fill = bgColor ? bgColor : "#114d78";
+                                txt = txtColor ? txtColor : "white";
+                            }
+                            ctx.fillStyle = fill;
+                            ctx.fill();
+                            var maxTextWidth = size * 0.8;
+                            var maxTextHeight = size * 0.8;
+                            var minTextSize = Math.floor(size / 10);
+                            var textSize = findOptimalFontSize(text, maxTextWidth, maxTextHeight, minTextSize);
+                            ctx.font = "bold ".concat(textSize, "px Arial");
+                            ctx.fillStyle = txt;
+                            ctx.textAlign = "center";
+                            ctx.textBaseline = "middle";
+                            ctx.fillText(text, size / 2, size / 2);
+                        };
+                        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 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);
+                            var brightness = calculateImageBrightness(img);
+                            var bgColor = brightness < 128 ? "white" : "#114d78";
+                            var txtColor = brightness < 128 ? "black" : "white";
+                            ctx.fillStyle = bgColor;
+                            ctx.fill();
+                            ctx.shadowColor = "rgba(0, 0, 0, 0.3)";
+                            ctx.shadowOffsetX = 3;
+                            ctx.shadowOffsetY = 3;
+                            ctx.shadowBlur = 5;
+                            ctx.drawImage(img, imageX, imageY, imageSize, imageSize);
+                            var padding = imageSize / 6;
+                            var maxTextWidth = imageSize;
+                            var maxTextHeight = imageSize - padding;
+                            var minTextSize = Math.floor(imageSize / 5);
+                            var textSize = findOptimalFontSize(text, maxTextWidth, maxTextHeight, minTextSize);
+                            ctx.font = "bold ".concat(textSize, "px Arial");
+                            ctx.fillStyle = txtColor;
+                            ctx.textAlign = "center";
+                            ctx.textBaseline = "top";
+                            ctx.shadowColor = "rgba(0, 0, 0, 0)";
+                            ctx.shadowOffsetX = 0;
+                            ctx.shadowOffsetY = 0;
+                            ctx.shadowBlur = 0;
+                            ctx.fillText(text, size / 2, imageY + imageSize + padding);
+                        };
+                        var findOptimalFontSize = function (text, maxWidth, maxHeight, minSize) {
+                            var fontSize = maxHeight;
+                            var tempCanvas = document.createElement("canvas");
+                            var tempCtx = tempCanvas.getContext("2d");
+                            while (fontSize > minSize) {
+                                tempCtx.font = "bold ".concat(fontSize, "px Arial");
+                                var measuredWidth = tempCtx.measureText(text).width;
+                                var measuredHeight = fontSize * 1.2; // Allowing some padding
+                                if (measuredWidth <= maxWidth && measuredHeight <= maxHeight) {
+                                    break;
+                                }
+                                fontSize--;
+                            }
+                            return fontSize;
+                        };
+                        var calculateImageBrightness = function (img) {
+                            var brightness = 0;
+                            var tempCanvas = document.createElement("canvas");
+                            tempCanvas.width = img.width;
+                            tempCanvas.height = img.height;
+                            var tempCtx = tempCanvas.getContext("2d");
+                            tempCtx.drawImage(img, 0, 0);
+                            var imageData = tempCtx.getImageData(0, 0, img.width, img.height).data;
+                            for (var i = 0; i < imageData.length; i += 4) {
+                                var r = imageData[i];
+                                var g = imageData[i + 1];
+                                var b = imageData[i + 2];
+                                brightness += (r + g + b) / 3;
+                            }
+                            return Math.round(brightness / (img.width * img.height));
+                        };
+                        if (iconUrl) {
+                            var img_1 = new Image();
+                            img_1.crossOrigin = "anonymous";
+                            img_1.src = iconUrl;
+                            img_1.onload = function () {
+                                if (size > 50) {
+                                    drawWithImage(img_1);
+                                }
+                                else {
+                                    drawWithoutImage(img_1);
+                                }
+                                res(canvas);
+                            };
+                            img_1.onerror = function () {
+                                drawWithoutImage();
+                                res(canvas);
+                            };
+                        }
+                        else {
+                            drawWithoutImage();
+                            res(canvas);
+                        }
+                    });
+                    _clusterImageCache.Set(key, prom);
+                    prom.then(function (canvas) {
+                        _clusterImageLoadedCache.Set(key, canvas);
+                        _clusterImageCache.Set(key, null);
+                    });
+                    return [4 /*yield*/, prom];
+                case 3: return [2 /*return*/, _a.sent()];
+            }
+        });
+    });
+}
+function getClusterImage(params) {
+    var size = params.size, txtColor = params.txtColor, bgColor = params.bgColor, text = params.text, iconUrl = params.iconUrl;
+    var key = "".concat(size, "-").concat(txtColor, "-").concat(bgColor, "-").concat(text, "-").concat(iconUrl);
+    var cacheData = _clusterImageLoadedCache.Get(key);
+    // If available then return.
+    if (cacheData) {
+        return cacheData;
+    }
+    // If not available then queue for it to cook.
+    else {
+        _loadClusterImage(params);
+    }
+    return null;
+}
+var PointClustering = /** @class */ (function () {
+    function PointClustering(register, menuItemId) {
+        var _this = this;
+        this.disposed = false;
+        this.registeredEntityIds = new Set();
+        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.prevClusteredEntities = new Set();
+        this.currClusteredEntities = new Set();
+        this.clusterEntities = new Map();
+        this.updateQueue = new DelayQueue(function () {
+            _this.doUpdate();
+        }, 1000);
+        this.listenCamera();
+    }
+    /**
+     * Starts listening to camera changes.
+     * This will trigger the clustering update whenever camera is moved.
+     */
+    PointClustering.prototype.listenCamera = function () {
+        var _this = this;
+        var viewer = this.viewer;
+        var lastPos3d;
+        var hasMoved = function () {
+            var _a;
+            var cameraPos = (_a = viewer === null || viewer === void 0 ? void 0 : viewer.camera) === null || _a === void 0 ? void 0 : _a.positionCartographic;
+            if (!cameraPos) {
+                return false;
+            }
+            var pos3d = Cartographic.toCartesian(cameraPos);
+            if (!lastPos3d) {
+                lastPos3d = pos3d;
+                return false;
+            }
+            var distance = Cartesian3.distance(pos3d, lastPos3d);
+            lastPos3d = pos3d;
+            // 50 meter movement at least.
+            return distance > 50;
+        };
+        this.listenCameraRemoval = viewer.scene.camera.changed.addEventListener(function () {
+            if (hasMoved()) {
+                _this.updateQueue.Call();
+            }
+        });
+    };
+    /**
+     * Stops listening to camera changes.
+     */
+    PointClustering.prototype.unlistenCamera = function () {
+        if (this.listenCameraRemoval) {
+            this.listenCameraRemoval();
+            this.listenCameraRemoval = null;
+        }
+    };
+    /**
+     * Removes all clusters and updates entities to no longer be suppressed.
+     * @returns
+     */
+    PointClustering.prototype.Dispose = function () {
+        if (this.disposed) {
+            return;
+        }
+        for (var _i = 0, _a = Array.from(this.clusterEntities); _i < _a.length; _i++) {
+            var _b = _a[_i], entity = _b[1];
+            this.viewer.entities.remove(entity);
+        }
+        this.clusterEntities.clear();
+        this.unlistenCamera();
+        this.disposed = true;
+        // Restore entities.
+        var toUpdateIds = [];
+        for (var _c = 0, _d = Array.from(this.registeredEntityIds); _c < _d.length; _c++) {
+            var id = _d[_c];
+            var rego = this.register.GetRego({
+                entityId: id,
+                menuItemId: this.menuItemId
+            });
+            if (rego && rego.suppressShow) {
+                rego.suppressShow = false;
+                toUpdateIds.push(id);
+            }
+        }
+        if (toUpdateIds.length) {
+            this.register.ForceUpdate({
+                entityIds: toUpdateIds,
+            });
+        }
+    };
+    /**
+     * Calculates center of given points.
+     * @param points
+     * @returns
+     */
+    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];
+            lonSum += point.lon;
+            latSum += point.lat;
+        }
+        var lonAvg = lonSum / points.length;
+        var latAvg = latSum / points.length;
+        return new Point(lonAvg, latAvg, "");
+    };
+    /**
+     * Gathers current clusters and renders them.
+     * @returns
+     */
+    PointClustering.prototype.doUpdate = function () {
+        var _this = this;
+        if (this.disposed) {
+            return;
+        }
+        // 1: Update precision.
+        // This defines how far apart these clusters can be.
+        var cameraHeight = this.viewer.camera.positionCartographic.height;
+        this.updateClusterSpacing(cameraHeight);
+        // 2: Get clusters.
+        var _a = this.getClusters(), clusters = _a.clusters, noLongerClustered = _a.noLongerClustered;
+        // 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];
+            this.removeClusterEntity(id);
+        }
+        // 4: Stop hiding entities that are no longer clustered.
+        var previousEntityIds = new Set(this.registeredEntityIds);
+        for (var _c = 0, _d = Array.from(previousEntityIds); _c < _d.length; _c++) {
+            var id = _d[_c];
+            if (!this.currClusteredEntities.has(id)) {
+                var rego = this.register.GetRego({
+                    entityId: id,
+                    menuItemId: this.menuItemId
+                });
+                if (rego && rego.suppressShow) {
+                    rego.suppressShow = false;
+                    this.register.ForceUpdate({
+                        entityIds: [id],
+                    });
+                }
+            }
+        }
+        var getScale = function (count) {
+            var baseSize = 20;
+            var scalingFactor = 2;
+            var scale = baseSize + scalingFactor * (count - 1);
+            scale = Math.min(scale, 120);
+            return scale;
+        };
+        /**
+         * Generate circle with label in center.
+         * @param count
+         * @returns
+         */
+        var getCanvas = function (count) {
+            var params = {
+                size: getScale(count),
+                txtColor: _this.pointColorTxt,
+                bgColor: _this.pointColorBg,
+                text: String(count),
+                iconUrl: _this.iconUrl
+            };
+            return getClusterImage(params);
+        };
+        var _loop_1 = function (cluster) {
+            var clusterId = cluster.center.id;
+            var clusterEntity = this_1.clusterEntities.get(clusterId);
+            var centroid = this_1.calculateCentroid(cluster.points);
+            var count = cluster.points.length;
+            if (clusterEntity) {
+                clusterEntity.position = Cartesian3.fromDegrees(centroid.lon, centroid.lat, 150);
+                clusterEntity.billboard.image = new CallbackProperty(function () {
+                    return getCanvas(count);
+                }, false),
+                    clusterEntity.billboard.width = getScale(cluster.points.length);
+                clusterEntity.billboard.height = getScale(cluster.points.length);
+            }
+            else {
+                clusterEntity = this_1.viewer.entities.add({
+                    position: Cartesian3.fromDegrees(centroid.lon, centroid.lat, 150),
+                    billboard: {
+                        heightReference: HeightReference.NONE,
+                        image: new CallbackProperty(function () {
+                            return getCanvas(count);
+                        }, false),
+                        width: getScale(count),
+                        height: getScale(count),
+                        verticalOrigin: VerticalOrigin.CENTER,
+                        horizontalOrigin: HorizontalOrigin.CENTER,
+                        disableDepthTestDistance: Number.POSITIVE_INFINITY
+                    }
+                });
+                this_1.clusterEntities.set(clusterId, clusterEntity);
+            }
+            for (var i = 0; i < cluster.points.length; i++) {
+                var entityId = cluster.points[i].id;
+                var rego = this_1.register.GetRego({
+                    entityId: entityId,
+                    menuItemId: this_1.menuItemId
+                });
+                if (rego && !rego.suppressShow) {
+                    rego.suppressShow = true;
+                    this_1.register.ForceUpdate({
+                        entityIds: [entityId],
+                    });
+                }
+            }
+        };
+        var this_1 = this;
+        // 5: iterate over clusters and add/update them as Cesium entities.
+        for (var _e = 0, clusters_1 = clusters; _e < clusters_1.length; _e++) {
+            var cluster = clusters_1[_e];
+            _loop_1(cluster);
+        }
+        var _loop_2 = function (clusterId, clusterEntity) {
+            if (!clusters.find(function (x) { return x.center.id == clusterId; })) {
+                this_2.viewer.entities.remove(clusterEntity);
+                this_2.clusterEntities.delete(clusterId);
+            }
+        };
+        var this_2 = this;
+        // 6: Iterate over existing cluster entities and remove those that are no longer clustered.
+        for (var _f = 0, _g = Array.from(this.clusterEntities); _f < _g.length; _f++) {
+            var _h = _g[_f], clusterId = _h[0], clusterEntity = _h[1];
+            _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];
+        // 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;
+            }
+            spacing += distanceIncrements[i];
+        }
+        this.distanceBetweenClusters = spacing;
+    };
+    /**
+     * 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);
+                    }
+                }
+                clusters.push(cluster);
+            }
+        }
+        // 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;
+    };
+    /**
+     * Removes Cesium cluster entity.
+     * @param clusterId
+     */
+    PointClustering.prototype.removeClusterEntity = function (clusterId) {
+        var clusterEntity = this.clusterEntities.get(clusterId);
+        if (clusterEntity) {
+            this.viewer.entities.remove(clusterEntity);
+            this.clusterEntities.delete(clusterId);
+        }
+    };
+    PointClustering.prototype.convertCartesianToCartographic = function (cartesian3) {
+        var carto = Cartographic.fromCartesian(cartesian3);
+        var lon = Math$1.toDegrees(carto.longitude);
+        var lat = Math$1.toDegrees(carto.latitude);
+        var id = lon + ',' + lat;
+        return new Point(lon, lat, id);
+    };
+    /**
+     * Adds new entity to the clustering logic.
+     * @param id Bruce entity ID.
+     * @param cartesian3 entity's position.
+     */
+    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;
+    };
+    /**
+     * Adds entity to clustering logic.
+     * Will return false if entity could not be clustered and therefor should not be hidden.
+     * @param id
+     * @param entity
+     * @returns
+     */
+    PointClustering.prototype.AddEntity = function (id, entity) {
+        if (this.disposed) {
+            return false;
+        }
+        if (!entity) {
+            return false;
+        }
+        if (entity.polygon || entity.polyline) {
+            return false;
+        }
+        var pos3d = GetValue$1(this.viewer, entity.position);
+        if (!(pos3d === null || pos3d === void 0 ? void 0 : pos3d.x)) {
+            return false;
+        }
+        if (!this.pointColorBg && entity.point) {
+            var pointColorBg = GetValue$1(this.viewer, entity.point.color);
+            if (pointColorBg) {
+                var cColor = null;
+                if (pointColorBg instanceof Object) {
+                    cColor = new Color(pointColorBg.red, pointColorBg.green, pointColorBg.blue, pointColorBg.alpha);
+                }
+                else if (typeof pointColorBg === "string") {
+                    cColor = Color.fromCssColorString(pointColorBg);
+                }
+                // Determine if text color should instead be black based on background.
+                // cColor contains r,g,b,a values where r,g,b are in the range [0,1].
+                if (cColor) {
+                    var brightness = (cColor.red * 299 + cColor.green * 587 + cColor.blue * 114) / 1000;
+                    if (brightness > 0.5) {
+                        this.pointColorTxt = "black";
+                    }
+                    else {
+                        this.pointColorTxt = "white";
+                    }
+                    this.pointColorBg = cColor.toCssColorString();
+                }
+            }
+        }
+        if (!this.iconUrl && entity.billboard) {
+            var iconUrl = GetValue$1(this.viewer, entity.billboard.image);
+            if (typeof iconUrl == "string") {
+                this.iconUrl = iconUrl;
+            }
+        }
+        this.registeredEntityIds.add(id);
+        this.addPoint(id, pos3d);
+        this.updateQueue.Call();
+        return true;
+    };
+    /**
+     * Removes entity from clustering logic.
+     * Warning: This will not reveal the entity, suppressShow will remain true.
+     * This is made with the assumption that the entity is being removed from viewer.
+     * @param id
+     * @returns
+     */
+    PointClustering.prototype.RemoveEntity = function (id) {
+        if (this.disposed) {
+            return;
+        }
+        var pointToRemove = this.quadTree.Find(id);
+        if (pointToRemove) {
+            this.quadTree.Remove(pointToRemove);
+            this.updateQueue.Call();
+        }
+        this.registeredEntityIds.delete(id);
+    };
+    return PointClustering;
+}());
+
 var BATCH_SIZE = 500;
 var CHECK_BATCH_SIZE = 250;
 /**
@@ -2552,6 +3355,9 @@ var EntitiesRenderManager;
             this.apiGetter = apiGetter;
             this.item = item;
             this.visualsManager = visualsManager;
+            if (item.enableClustering) {
+                this.clustering = new PointClustering(this.visualsManager, this.item.id);
+            }
         }
         Object.defineProperty(Manager.prototype, "Disposed", {
             get: function () {
@@ -2562,7 +3368,7 @@ var EntitiesRenderManager;
         });
         Manager.prototype.Init = function (params) {
             var _this = this;
-            var _a, _b, _c, _d, _e;
+            var _a, _b, _c, _d, _e, _f, _g;
             if (this.disposed) {
                 throw (new Error("This item is disposed."));
             }
@@ -2594,17 +3400,22 @@ var EntitiesRenderManager;
                     menuItemId: this.item.id,
                     retainTagIds: tagsToRender
                 });
+                (_e = this.clustering) === null || _e === void 0 ? void 0 : _e.Dispose();
             }
             else {
                 this.visualsManager.RemoveRegos({
                     menuItemId: this.item.id
                 });
+                (_f = this.clustering) === null || _f === void 0 ? void 0 : _f.Dispose();
                 return;
             }
+            if (this.item.enableClustering) {
+                this.clustering = new PointClustering(this.visualsManager, this.item.id);
+            }
             var api = this.apiGetter.getApi();
             this.getter = this.sharedGetters.GetOrCreateFilterGetter({
                 api: api,
-                attrFilter: (_e = this.item.BruceEntity.Filter) !== null && _e !== void 0 ? _e : {},
+                attrFilter: (_g = this.item.BruceEntity.Filter) !== null && _g !== void 0 ? _g : {},
                 batchSize: BATCH_SIZE,
                 typeId: this.item.BruceEntity["EntityType.ID"],
                 monitor: this.monitor,
@@ -2636,7 +3447,13 @@ var EntitiesRenderManager;
                 _this.entityCheckQueue.Call();
             });
             this.entityCheckQueue = new DelayQueue(function () {
-                _this.doEntityCheck(Object.keys(_this.renderedEntities));
+                var _a;
+                // Don't bother checking for zoom control changes if we only have 1 item.
+                // We'll let Cesium handle hide/show at max zoom range. 
+                var shouldCheck = ((_a = _this.item) === null || _a === void 0 ? void 0 : _a.CameraZoomSettings) && _this.item.CameraZoomSettings.length > 1;
+                if (shouldCheck) {
+                    _this.doEntityCheck(Object.keys(_this.renderedEntities));
+                }
             }, 3000);
         };
         Manager.prototype.Dispose = function () {
@@ -2646,7 +3463,7 @@ var EntitiesRenderManager;
             this.doDispose();
         };
         Manager.prototype.doDispose = function () {
-            var _a, _b, _c;
+            var _a, _b, _c, _d;
             (_a = this.getterSub) === null || _a === void 0 ? void 0 : _a.call(this);
             this.getterSub = null;
             if (this.getter) {
@@ -2660,6 +3477,7 @@ var EntitiesRenderManager;
             (_c = this.viewMonitorRemoval) === null || _c === void 0 ? void 0 : _c.call(this);
             clearInterval(this.renderQueueInterval);
             this.renderQueue = [];
+            (_d = this.clustering) === null || _d === void 0 ? void 0 : _d.Dispose();
         };
         Manager.prototype.ReRender = function (params) {
             return __awaiter(this, void 0, void 0, function () {
@@ -2793,14 +3611,14 @@ var EntitiesRenderManager;
             }
         };
         Manager.prototype.renderEntities = function (entities, force) {
-            var _a, _b, _c;
+            var _a, _b, _c, _d;
             if (force === void 0) { force = false; }
             return __awaiter(this, void 0, void 0, function () {
-                var typeId_1, cEntities, i, entity, id, cEntity, visual, tagIds, e_3;
-                return __generator(this, function (_d) {
-                    switch (_d.label) {
+                var typeId_1, cEntities, i, entity, id, cEntity, visual, wasClustered, tagIds, rego, e_3;
+                return __generator(this, function (_e) {
+                    switch (_e.label) {
                         case 0:
-                            _d.trys.push([0, 2, , 3]);
+                            _e.trys.push([0, 2, , 3]);
                             if (this.disposed || this.viewer.isDestroyed()) {
                                 return [2 /*return*/];
                             }
@@ -2818,7 +3636,7 @@ var EntitiesRenderManager;
                                     force: force
                                 })];
                         case 1:
-                            cEntities = _d.sent();
+                            cEntities = _e.sent();
                             if (this.disposed) {
                                 this.doDispose();
                                 return [2 /*return*/];
@@ -2834,17 +3652,20 @@ var EntitiesRenderManager;
                                         menuItemId: this.item.id
                                     })) === null || _b === void 0 ? void 0 : _b.visual;
                                     if (!visual || visual != cEntity) {
+                                        wasClustered = this.clustering ? this.clustering.AddEntity(id, cEntity) : false;
                                         tagIds = (_c = entity.Bruce) === null || _c === void 0 ? void 0 : _c["Layer.ID"];
+                                        rego = {
+                                            entityId: id,
+                                            menuItemId: this.item.id,
+                                            visual: cEntity,
+                                            priority: 0,
+                                            entityTypeId: entity.Bruce["EntityType.ID"],
+                                            accountId: this.apiGetter.accountId,
+                                            tagIds: tagIds ? [].concat(tagIds) : [],
+                                            suppressShow: wasClustered
+                                        };
                                         this.visualsManager.AddRego({
-                                            rego: {
-                                                entityId: id,
-                                                menuItemId: this.item.id,
-                                                visual: cEntity,
-                                                priority: 0,
-                                                entityTypeId: entity.Bruce["EntityType.ID"],
-                                                accountId: this.apiGetter.accountId,
-                                                tagIds: tagIds ? [].concat(tagIds) : []
-                                            }
+                                            rego: rego
                                         });
                                     }
                                 }
@@ -2853,12 +3674,13 @@ var EntitiesRenderManager;
                                         entityId: id,
                                         menuItemId: this.item.id
                                     });
+                                    (_d = this.clustering) === null || _d === void 0 ? void 0 : _d.RemoveEntity(id);
                                 }
                             }
                             this.viewer.scene.requestRender();
                             return [3 /*break*/, 3];
                         case 2:
-                            e_3 = _d.sent();
+                            e_3 = _e.sent();
                             console.error(e_3);
                             return [3 /*break*/, 3];
                         case 3: return [2 /*return*/];
@@ -3750,7 +4572,7 @@ function updateEntity(viewer, entityId, register) {
     for (var i = 0; i < regos.length; i++) {
         var rego = regos[i];
         rego.best = rego === highestPriority;
-        updateEntityShow(viewer, rego.visual, getShowState(rego));
+        updateEntityShow(viewer, rego.visual, rego.suppressShow ? false : getShowState(rego));
     }
 }
 function markEntity(register, rego, visual, ignoreParent) {
@@ -3947,6 +4769,17 @@ var VisualsRegister;
             enumerable: false,
             configurable: true
         });
+        Register.prototype.ForceUpdate = function (params) {
+            var entityIds = params.entityIds;
+            for (var i = 0; i < entityIds.length; i++) {
+                var entityId = entityIds[i];
+                updateEntity(this.viewer, entityId, this);
+                this.OnUpdate.Trigger({
+                    type: EVisualUpdateType.Update,
+                    entityId: entityId
+                });
+            }
+        };
         Register.prototype.SetSelectionColor = function (color) {
             this.selectionColor = color;
         };
@@ -4469,6 +5302,9 @@ var EntitiesIdsRenderManager;
             this.monitor = monitor;
             this.item = item;
             this.visualsManager = visualsManager;
+            if (this.item.enableClustering) {
+                this.clustering = new PointClustering(visualsManager, this.item.id);
+            }
         }
         Object.defineProperty(Manager.prototype, "Disposed", {
             get: function () {
@@ -4489,7 +5325,7 @@ var EntitiesIdsRenderManager;
             this.getter.Start();
         };
         Manager.prototype.Dispose = function () {
-            var _a;
+            var _a, _b;
             if (this.disposed) {
                 return;
             }
@@ -4499,6 +5335,7 @@ var EntitiesIdsRenderManager;
             this.visualsManager.RemoveRegos({
                 menuItemId: this.item.id
             });
+            (_b = this.clustering) === null || _b === void 0 ? void 0 : _b.Dispose();
         };
         Manager.prototype.ReRender = function (params) {
             return __awaiter(this, void 0, void 0, function () {
@@ -4567,19 +5404,19 @@ var EntitiesIdsRenderManager;
             });
         };
         Manager.prototype.renderEntities = function (entities, force) {
-            var _a;
+            var _a, _b;
             if (force === void 0) { force = false; }
             return __awaiter(this, void 0, void 0, function () {
-                var cEntities, i, entity, id, cEntity, visual, e_2;
-                return __generator(this, function (_b) {
-                    switch (_b.label) {
+                var cEntities, i, entity, id, cEntity, visual, clustered, e_2;
+                return __generator(this, function (_c) {
+                    switch (_c.label) {
                         case 0:
                             if (this.disposed || this.viewer.isDestroyed()) {
                                 return [2 /*return*/];
                             }
-                            _b.label = 1;
+                            _c.label = 1;
                         case 1:
-                            _b.trys.push([1, 3, , 4]);
+                            _c.trys.push([1, 3, , 4]);
                             return [4 /*yield*/, EntityRenderEngine.Render({
                                     viewer: this.viewer,
                                     apiGetter: this.apiGetter,
@@ -4590,7 +5427,7 @@ var EntitiesIdsRenderManager;
                                     force: force
                                 })];
                         case 2:
-                            cEntities = _b.sent();
+                            cEntities = _c.sent();
                             for (i = 0; i < entities.length; i++) {
                                 entity = entities[i];
                                 id = entity.Bruce.ID;
@@ -4602,6 +5439,7 @@ var EntitiesIdsRenderManager;
                                         menuItemId: this.item.id
                                     })) === null || _a === void 0 ? void 0 : _a.visual;
                                     if (!visual || visual != cEntity) {
+                                        clustered = this.clustering ? this.clustering.AddEntity(id, cEntity) : false;
                                         this.visualsManager.AddRego({
                                             rego: {
                                                 entityId: id,
@@ -4609,7 +5447,8 @@ var EntitiesIdsRenderManager;
                                                 visual: cEntity,
                                                 priority: 0,
                                                 entityTypeId: entity.Bruce["EntityType.ID"],
-                                                accountId: this.apiGetter.accountId
+                                                accountId: this.apiGetter.accountId,
+                                                suppressShow: clustered
                                             }
                                         });
                                     }
@@ -4619,12 +5458,13 @@ var EntitiesIdsRenderManager;
                                         entityId: id,
                                         menuItemId: this.item.id
                                     });
+                                    (_b = this.clustering) === null || _b === void 0 ? void 0 : _b.RemoveEntity(id);
                                 }
                             }
                             this.viewer.scene.requestRender();
                             return [3 /*break*/, 4];
                         case 3:
-                            e_2 = _b.sent();
+                            e_2 = _c.sent();
                             console.error(e_2);
                             return [3 /*break*/, 4];
                         case 4: return [2 /*return*/];
@@ -9993,7 +10833,7 @@ var ViewRenderEngine;
     ViewRenderEngine.Render = Render;
 })(ViewRenderEngine || (ViewRenderEngine = {}));
 
-var VERSION = "2.1.3";
+var VERSION = "2.1.9";
 
 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