bruce-cesium 2.1.7 → 2.1.9

package/dist/bruce-cesium.umd.js

@@ -1515,6 +1515,23 @@
         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 Cesium.DistanceDisplayCondition(min, max);
+    }
     (function (EntityRenderEngine) {
         function Render(params) {
             var _a, _b, _c, _d, _e, _f, _g, _h;
@@ -1845,7 +1862,10 @@
                                                 verticalOrigin: Cesium.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: exports.EntityUtils.GetPos({
                                                 viewer: params.viewer,
@@ -1896,7 +1916,8 @@
                                             extrudedHeight: fillHeight,
                                             heightReference: Cesium.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
@@ -1916,7 +1937,8 @@
                                                 extrudedHeight: outlineHeight,
                                                 heightReference: Cesium.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()
                                         }));
@@ -1938,7 +1960,8 @@
                                         point: {
                                             pixelSize: size,
                                             color: cColor,
-                                            heightReference: getHeightRef(style)
+                                            heightReference: getHeightRef(style),
+                                            distanceDisplayCondition: getDisplayCondition(params.minDistance, params.maxDistance)
                                         },
                                         position: exports.EntityUtils.GetPos({
                                             viewer: params.viewer,
@@ -1999,7 +2022,9 @@
                                         style: pStyle,
                                         tags: tags,
                                         viewer: params.viewer,
-                                        api: api
+                                        api: api,
+                                        maxDistance: zoomItem.MaxZoom,
+                                        minDistance: zoomItem.MinZoom
                                     })];
                             case 5:
                                 cEntity = _d.sent();
@@ -2090,7 +2115,8 @@
                         classificationType: Cesium.ClassificationType.TERRAIN,
                         arcType: Cesium.ArcType.GEODESIC,
                         zIndex: getZIndex(style, entity, params.tags),
-                        clampToGround: heightRef == Cesium.HeightReference.CLAMP_TO_GROUND
+                        clampToGround: heightRef == Cesium.HeightReference.CLAMP_TO_GROUND,
+                        distanceDisplayCondition: getDisplayCondition(params.minDistance, params.maxDistance)
                     },
                     position: exports.EntityUtils.GetPos({
                         viewer: params.viewer,
@@ -2138,7 +2164,9 @@
                                     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);
@@ -2210,7 +2238,8 @@
                         heightReference: heightRef,
                         classificationType: Cesium.ClassificationType.BOTH,
                         perPositionHeight: heightRef == Cesium.HeightReference.CLAMP_TO_GROUND ? false : true,
-                        zIndex: zIndex
+                        zIndex: zIndex,
+                        distanceDisplayCondition: getDisplayCondition(params.minDistance, params.maxDistance)
                     },
                     position: exports.EntityUtils.GetPos({
                         viewer: params.viewer,
@@ -2235,7 +2264,8 @@
                             clampToGround: heightRef == Cesium.HeightReference.CLAMP_TO_GROUND,
                             classificationType: Cesium.ClassificationType.TERRAIN,
                             arcType: Cesium.ArcType.GEODESIC,
-                            zIndex: zIndex
+                            zIndex: zIndex,
+                            distanceDisplayCondition: getDisplayCondition(params.minDistance, params.maxDistance)
                         }),
                         show: false
                     });
@@ -2253,7 +2283,8 @@
                                 clampToGround: heightRef == Cesium.HeightReference.CLAMP_TO_GROUND,
                                 classificationType: Cesium.ClassificationType.TERRAIN,
                                 arcType: Cesium.ArcType.GEODESIC,
-                                zIndex: zIndex
+                                zIndex: zIndex,
+                                distanceDisplayCondition: getDisplayCondition(params.minDistance, params.maxDistance)
                             }),
                             show: false
                         });
@@ -2300,7 +2331,9 @@
                                     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);
@@ -2377,7 +2410,8 @@
                         shadows: Cesium.ShadowMode.ENABLED,
                         colorBlendAmount: blendAmount,
                         colorBlendMode: blendMode,
-                        color: color
+                        color: color,
+                        distanceDisplayCondition: getDisplayCondition(params.minDistance, params.maxDistance)
                     },
                     orientation: orientation,
                     position: pos,
@@ -2491,7 +2525,9 @@
                                                         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);
@@ -2521,6 +2557,773 @@
         })(Model3d = EntityRenderEngine.Model3d || (EntityRenderEngine.Model3d = {}));
     })(exports.EntityRenderEngine || (exports.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 = /** @class */ (function () {
+        function Rectangle(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.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.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;
+    }());
+    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(x + w / 2, y - h / 2, w, h);
+            this.northeast = new Quad(ne, this.capacity);
+            var nw = new Rectangle(x - w / 2, y - h / 2, w, h);
+            this.northwest = new Quad(nw, this.capacity);
+            var se = new Rectangle(x + w / 2, y + h / 2, w, h);
+            this.southeast = new Quad(se, this.capacity);
+            var sw = new Rectangle(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 bruceModels.LRUCache(500);
+    var _clusterImageLoadedCache = new bruceModels.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(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 bruceModels.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 = Cesium.Cartographic.toCartesian(cameraPos);
+                if (!lastPos3d) {
+                    lastPos3d = pos3d;
+                    return false;
+                }
+                var distance = Cesium.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 = Cesium.Cartesian3.fromDegrees(centroid.lon, centroid.lat, 150);
+                    clusterEntity.billboard.image = new Cesium.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: Cesium.Cartesian3.fromDegrees(centroid.lon, centroid.lat, 150),
+                        billboard: {
+                            heightReference: Cesium.HeightReference.NONE,
+                            image: new Cesium.CallbackProperty(function () {
+                                return getCanvas(count);
+                            }, false),
+                            width: getScale(count),
+                            height: getScale(count),
+                            verticalOrigin: Cesium.VerticalOrigin.CENTER,
+                            horizontalOrigin: Cesium.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 = Cesium.Cartesian3.fromDegrees(point.lon, point.lat);
+                if (Cesium.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 = Cesium.Cartographic.fromCartesian(cartesian3);
+            var lon = Cesium.Math.toDegrees(carto.longitude);
+            var lat = Cesium.Math.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 Cesium.Color(pointColorBg.red, pointColorBg.green, pointColorBg.blue, pointColorBg.alpha);
+                    }
+                    else if (typeof pointColorBg === "string") {
+                        cColor = Cesium.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;
     (function (EntitiesRenderManager) {
@@ -2544,6 +3347,9 @@
                 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 () {
@@ -2554,7 +3360,7 @@
             });
             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."));
                 }
@@ -2586,17 +3392,22 @@
                         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,
@@ -2628,7 +3439,13 @@
                     _this.entityCheckQueue.Call();
                 });
                 this.entityCheckQueue = new bruceModels.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 () {
@@ -2638,7 +3455,7 @@
                 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) {
@@ -2652,6 +3469,7 @@
                 (_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 () {
@@ -2785,14 +3603,14 @@
                 }
             };
             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*/];
                                 }
@@ -2810,7 +3628,7 @@
                                         force: force
                                     })];
                             case 1:
-                                cEntities = _d.sent();
+                                cEntities = _e.sent();
                                 if (this.disposed) {
                                     this.doDispose();
                                     return [2 /*return*/];
@@ -2826,17 +3644,20 @@
                                             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
                                             });
                                         }
                                     }
@@ -2845,12 +3666,13 @@
                                             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*/];
@@ -3736,7 +4558,7 @@
         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) {
@@ -3928,6 +4750,17 @@
                 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;
             };
@@ -4445,6 +5278,9 @@
                 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 () {
@@ -4465,7 +5301,7 @@
                 this.getter.Start();
             };
             Manager.prototype.Dispose = function () {
-                var _a;
+                var _a, _b;
                 if (this.disposed) {
                     return;
                 }
@@ -4475,6 +5311,7 @@
                 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 () {
@@ -4543,19 +5380,19 @@
                 });
             };
             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*/, exports.EntityRenderEngine.Render({
                                         viewer: this.viewer,
                                         apiGetter: this.apiGetter,
@@ -4566,7 +5403,7 @@
                                         force: force
                                     })];
                             case 2:
-                                cEntities = _b.sent();
+                                cEntities = _c.sent();
                                 for (i = 0; i < entities.length; i++) {
                                     entity = entities[i];
                                     id = entity.Bruce.ID;
@@ -4578,6 +5415,7 @@
                                             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,
@@ -4585,7 +5423,8 @@
                                                     visual: cEntity,
                                                     priority: 0,
                                                     entityTypeId: entity.Bruce["EntityType.ID"],
-                                                    accountId: this.apiGetter.accountId
+                                                    accountId: this.apiGetter.accountId,
+                                                    suppressShow: clustered
                                                 }
                                             });
                                         }
@@ -4595,12 +5434,13 @@
                                             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*/];
@@ -9939,7 +10779,7 @@
         ViewRenderEngine.Render = Render;
     })(exports.ViewRenderEngine || (exports.ViewRenderEngine = {}));
 
-    var VERSION = "2.1.3";
+    var VERSION = "2.1.9";
 
     exports.VERSION = VERSION;
     exports.CesiumViewMonitor = CesiumViewMonitor;