bruce-cesium 2.1.8 → 2.2.0

package/dist/bruce-cesium.umd.js

@@ -2708,19 +2708,208 @@
                 this.southeast.Remove(point);
             }
         };
+        Quad.prototype.GetDistanceToQuad = function (pos3d) {
+            var minLat = this.boundary.y - this.boundary.h;
+            var maxLat = this.boundary.y + this.boundary.h;
+            var minLon = this.boundary.x - this.boundary.w;
+            var maxLon = this.boundary.x + this.boundary.w;
+            var points = [
+                // Corners.
+                new Cesium.Cartesian3(minLon, minLat, 0),
+                new Cesium.Cartesian3(minLon, maxLat, 0),
+                new Cesium.Cartesian3(maxLon, minLat, 0),
+                new Cesium.Cartesian3(maxLon, maxLat, 0),
+                // Center.
+                new Cesium.Cartesian3(this.boundary.x, this.boundary.y, 0)
+            ];
+            var shortest = Number.MAX_VALUE;
+            for (var _i = 0, points_1 = points; _i < points_1.length; _i++) {
+                var point = points_1[_i];
+                var distance = Cesium.Cartesian3.distance(pos3d, point);
+                if (distance < shortest) {
+                    shortest = distance;
+                }
+            }
+            return shortest;
+        };
         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 WHITESPACE_PADDING_PERCENT = 0.05;
+                            var radius = (size / 2) - (size * WHITESPACE_PADDING_PERCENT);
+                            var drawWithoutImage = function (img) {
+                                ctx.beginPath();
+                                ctx.arc(size / 2, size / 2, radius, 0, 2 * Math.PI, false);
+                                var fill = null;
+                                var txt = null;
+                                if (img) {
+                                    var brightness = calculateImageBrightness(img);
+                                    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.7;
+                                var maxTextHeight = size * 0.7;
+                                var minTextSize = Math.floor(size / 12);
+                                var textSize = findOptimalFontSize(text, maxTextWidth, maxTextHeight, minTextSize);
+                                ctx.font = "bold ".concat(textSize, "px Arial");
+                                ctx.fillStyle = txt;
+                                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(radius, img.width, img.height);
+                                if (imageSize / aspectRatio > radius) {
+                                    imageSize = radius * aspectRatio;
+                                }
+                                var imageX = (size - imageSize) / 2;
+                                var imageY = (size - imageSize) / 2 - imageSize / 3;
+                                ctx.beginPath();
+                                ctx.arc(size / 2, size / 2, radius, 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 / 7;
+                                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;
+                                    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 FORCE_UPDATE_BATCH_SIZE = 1000;
+    var FORCE_UPDATE_BATCH_DELAY = 100;
     var PointClustering = /** @class */ (function () {
         function PointClustering(register, menuItemId) {
             var _this = this;
             this.disposed = false;
             this.registeredEntityIds = new Set();
+            // Queue to force update entities.
+            this.updateEntityQueue = [];
             this.register = register;
             this.viewer = register.Viewer;
             this.menuItemId = menuItemId;
-            this.updateClusterSpacing(0);
             var boundary = new Rectangle(0, 0, 360, 180);
-            this.quadTree = new Quad(boundary, 4);
+            this.quadTree = new Quad(boundary, 30);
             this.prevClusteredEntities = new Set();
             this.currClusteredEntities = new Set();
             this.clusterEntities = new Map();
@@ -2729,6 +2918,39 @@
             }, 1000);
             this.listenCamera();
         }
+        PointClustering.prototype.queueForceUpdate = function (entityIds) {
+            for (var i = 0; i < entityIds.length; i++) {
+                if (this.updateEntityQueue.includes(entityIds[i])) {
+                    continue;
+                }
+                this.updateEntityQueue.push(entityIds[i]);
+            }
+            this.runForceUpdateQueue();
+        };
+        PointClustering.prototype.runForceUpdateQueue = function () {
+            var _this = this;
+            if (!this.updateEntityQueue.length) {
+                return;
+            }
+            if (this.queueInterval) {
+                return;
+            }
+            this.queueInterval = setInterval(function () {
+                if (_this.disposed) {
+                    clearInterval(_this.queueInterval);
+                    _this.queueInterval = null;
+                    return;
+                }
+                var ids = _this.updateEntityQueue.splice(0, FORCE_UPDATE_BATCH_SIZE);
+                _this.register.ForceUpdate({
+                    entityIds: ids
+                });
+                if (!_this.updateEntityQueue.length) {
+                    clearInterval(_this.queueInterval);
+                    _this.queueInterval = null;
+                }
+            }, FORCE_UPDATE_BATCH_DELAY);
+        };
         /**
          * Starts listening to camera changes.
          * This will trigger the clustering update whenever camera is moved.
@@ -2783,6 +3005,7 @@
             this.clusterEntities.clear();
             this.unlistenCamera();
             this.disposed = true;
+            this.updateEntityQueue = [];
             // Restore entities.
             var toUpdateIds = [];
             for (var _c = 0, _d = Array.from(this.registeredEntityIds); _c < _d.length; _c++) {
@@ -2810,8 +3033,8 @@
         PointClustering.prototype.calculateCentroid = function (points) {
             var lonSum = 0;
             var latSum = 0;
-            for (var _i = 0, points_1 = points; _i < points_1.length; _i++) {
-                var point = points_1[_i];
+            for (var _i = 0, points_2 = points; _i < points_2.length; _i++) {
+                var point = points_2[_i];
                 lonSum += point.lon;
                 latSum += point.lat;
             }
@@ -2831,9 +3054,10 @@
             // 1: Update precision.
             // This defines how far apart these clusters can be.
             var cameraHeight = this.viewer.camera.positionCartographic.height;
-            this.updateClusterSpacing(cameraHeight);
+            this.getClusterSpacing(cameraHeight);
             // 2: Get clusters.
             var _a = this.getClusters(), clusters = _a.clusters, noLongerClustered = _a.noLongerClustered;
+            var entitiesToUpdate = [];
             // 3: Remove all cesium cluster entities that are no longer clustered.
             for (var _i = 0, _b = Array.from(noLongerClustered); _i < _b.length; _i++) {
                 var id = _b[_i];
@@ -2850,193 +3074,180 @@
                     });
                     if (rego && rego.suppressShow) {
                         rego.suppressShow = false;
-                        this.register.ForceUpdate({
-                            entityIds: [id],
-                        });
+                        entitiesToUpdate.push(id);
                     }
                 }
             }
             var getScale = function (count) {
-                var baseSize = 20;
-                var scalingFactor = 2;
-                var scale = baseSize + scalingFactor * (count - 1);
-                scale = Math.min(scale, 120);
-                return scale;
-            };
-            var getLabel = function (count) {
-                var color = _this.pointColorTxt ? _this.pointColorTxt : "white";
-                var canvas = document.createElement("canvas");
-                var ctx = canvas.getContext("2d");
-                var size = getScale(count);
-                canvas.width = size;
-                canvas.height = size;
-                ctx.font = "bold 20px Arial";
-                ctx.fillStyle = color;
-                ctx.textAlign = "center";
-                ctx.textBaseline = "middle";
-                ctx.fillText(String(count), size / 2, size / 2);
-                return canvas;
+                // const MIN_SCALE = 15;
+                // const MAX_SCALE = 80;
+                // const SCALE_PER_POINT = 1.01;
+                // let scale = MIN_SCALE + (count * SCALE_PER_POINT);
+                // scale = Math.min(scale, MAX_SCALE);
+                // return scale;
+                if (count >= 10000) {
+                    return 140;
+                }
+                if (count >= 1000) {
+                    return 120;
+                }
+                if (count >= 100) {
+                    return 90;
+                }
+                if (count >= 10) {
+                    return 80;
+                }
+                return 70;
             };
-            // 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];
+            /**
+             * 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.clusterEntities.get(clusterId);
-                var centroid = this.calculateCentroid(cluster.points);
+                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.point.pixelSize = getScale(cluster.points.length);
-                    clusterEntity.billboard.image = getLabel(cluster.points.length);
-                    clusterEntity.billboard.width = getScale(cluster.points.length);
+                    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.viewer.entities.add({
+                    clusterEntity = this_1.viewer.entities.add({
                         position: Cesium.Cartesian3.fromDegrees(centroid.lon, centroid.lat, 150),
-                        point: {
-                            heightReference: Cesium.HeightReference.NONE,
-                            pixelSize: getScale(count),
-                            color: this.pointColorBg ? this.pointColorBg : Cesium.Color.fromCssColorString("#4287f5")
-                        },
                         billboard: {
                             heightReference: Cesium.HeightReference.NONE,
-                            image: getLabel(count),
+                            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
+                            disableDepthTestDistance: Number.POSITIVE_INFINITY,
+                            scaleByDistance: new Cesium.NearFarScalar(1.5e2, 0.5, 3.0e7, 0.1),
                         }
                     });
-                    this.clusterEntities.set(clusterId, clusterEntity);
+                    this_1.clusterEntities.set(clusterId, clusterEntity);
                 }
                 for (var i = 0; i < cluster.points.length; i++) {
                     var entityId = cluster.points[i].id;
-                    var rego = this.register.GetRego({
+                    var rego = this_1.register.GetRego({
                         entityId: entityId,
-                        menuItemId: this.menuItemId
+                        menuItemId: this_1.menuItemId
                     });
                     if (rego && !rego.suppressShow) {
                         rego.suppressShow = true;
-                        this.register.ForceUpdate({
-                            entityIds: [entityId],
-                        });
+                        entitiesToUpdate.push(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_1 = function (clusterId, clusterEntity) {
+            this.queueForceUpdate(entitiesToUpdate);
+            var _loop_2 = function (clusterId, clusterEntity) {
                 if (!clusters.find(function (x) { return x.center.id == clusterId; })) {
-                    this_1.viewer.entities.remove(clusterEntity);
-                    this_1.clusterEntities.delete(clusterId);
+                    this_2.viewer.entities.remove(clusterEntity);
+                    this_2.clusterEntities.delete(clusterId);
                 }
             };
-            var this_1 = this;
+            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_1(clusterId, clusterEntity);
+                _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 = [2000, 5000, 8000, 13000, 25000, 40000];
+        PointClustering.prototype.getClusterSpacing = function (distanceFromCluster) {
+            // Distance thresholds in meters from the cluster.
+            var distanceThresholds = [3000, 4000, 5300, 6000, 7000];
             // Distance increments in degrees.
-            var distanceIncrements = [0.005, 0.01, 0.02, 0.04, 0.1, 0.5];
-            // Find the appropriate spacing based on the camera height.
-            var spacing = 0;
-            for (var i = 0; i < cameraHeightThresholds.length; i++) {
-                if (cameraHeight && cameraHeight < cameraHeightThresholds[i]) {
-                    spacing += distanceIncrements[i];
-                    break;
+            var distanceIncrements = [0.001, 0.002, 0.01, 0.03, 0.09];
+            var index = 0;
+            if (distanceFromCluster) {
+                for (var i = 0; i < distanceThresholds.length; i++) {
+                    if (distanceFromCluster > distanceThresholds[i]) {
+                        index = i;
+                    }
                 }
-                spacing += distanceIncrements[i];
             }
-            this.distanceBetweenClusters = spacing;
+            return distanceIncrements[index];
         };
-        /**
-         * Gathers clusters.
-         * @returns
-         */
         PointClustering.prototype.getClusters = function () {
             var _this = this;
             this.currClusteredEntities.clear();
             var clusters = [];
             var processedPoints = new Set();
             var cameraPosition = this.viewer.camera.position;
-            for (var _i = 0, _a = this.quadTree.points; _i < _a.length; _i++) {
-                var point = _a[_i];
-                // Skip points already processed in previous clusters.
-                if (processedPoints.has(point.id)) {
-                    continue;
-                }
-                // Skip points closer than 2000 meters to the camera.
-                var cartesian3 = Cesium.Cartesian3.fromDegrees(point.lon, point.lat);
-                if (Cesium.Cartesian3.distance(cartesian3, cameraPosition) <= 2000) {
-                    continue;
-                }
-                var found = [];
-                var nearbyPoints = this.quadTree.Query(new Circle(point.lon, point.lat, this.distanceBetweenClusters), found);
-                if (nearbyPoints.length > 1) {
-                    var cluster = { center: point, points: [] };
-                    for (var _b = 0, nearbyPoints_1 = nearbyPoints; _b < nearbyPoints_1.length; _b++) {
-                        var nearby = nearbyPoints_1[_b];
-                        if (!cluster.points.includes(nearby)) {
-                            cluster.points.push(nearby);
-                            processedPoints.add(nearby.id);
-                            this.currClusteredEntities.add(nearby.id);
+            var MIN_CAMERA_DISTANCE = 5000;
+            var processQuad = function (quad) {
+                // Distance to quad.
+                // TODO: Needs improvement.
+                var distanceToQuad = quad.GetDistanceToQuad(cameraPosition);
+                // Skip quads that are too close.
+                if (distanceToQuad >= MIN_CAMERA_DISTANCE) {
+                    for (var _i = 0, _a = quad.points; _i < _a.length; _i++) {
+                        var point = _a[_i];
+                        // Skip points already processed in previous clusters.
+                        if (processedPoints.has(point.id)) {
+                            continue;
+                        }
+                        // Skip points closer than MIN_CAMERA_DISTANCE meters to the camera.
+                        var cartesian3 = Cesium.Cartesian3.fromDegrees(point.lon, point.lat);
+                        var distanceFromCluster = Cesium.Cartesian3.distance(cartesian3, cameraPosition);
+                        if (distanceFromCluster <= MIN_CAMERA_DISTANCE) {
+                            continue;
+                        }
+                        var found = [];
+                        var nearbyPoints = quad.Query(new Circle(point.lon, point.lat, _this.getClusterSpacing(distanceFromCluster)), found);
+                        if (nearbyPoints.length > 1) {
+                            var cluster = { center: point, points: [] };
+                            for (var _b = 0, nearbyPoints_1 = nearbyPoints; _b < nearbyPoints_1.length; _b++) {
+                                var nearby = nearbyPoints_1[_b];
+                                if (!cluster.points.includes(nearby)) {
+                                    cluster.points.push(nearby);
+                                    processedPoints.add(nearby.id);
+                                    _this.currClusteredEntities.add(nearby.id);
+                                }
+                            }
+                            clusters.push(cluster);
                         }
                     }
-                    clusters.push(cluster);
                 }
-            }
+                if (quad.divided) {
+                    processQuad(quad.northwest);
+                    processQuad(quad.northeast);
+                    processQuad(quad.southwest);
+                    processQuad(quad.southeast);
+                }
+            };
+            processQuad(this.quadTree);
             // Filter out clusters with only one point.
             var validClusters = clusters.filter(function (cluster) { return cluster.points.length > 1; });
-            // Merge adjacent clusters.
-            var mergedClusters = this.mergeClusters(validClusters);
             // Get the entity IDs that are no longer clustered
             var noLongerClustered = new Set(Array.from(this.prevClusteredEntities).filter(function (id) { return !_this.currClusteredEntities.has(id); }));
             // Update the previous clustered entities ref.
             this.prevClusteredEntities = new Set(this.currClusteredEntities);
-            return { clusters: mergedClusters, noLongerClustered: noLongerClustered };
-        };
-        /**
-         * Merges clusters that are nearby based on the distanceBetweenClusters value.
-         * @param clusters
-         * @returns
-         */
-        PointClustering.prototype.mergeClusters = function (clusters) {
-            var _a;
-            var mergedClusters = [].concat(clusters);
-            // Keep looping while merges keep happening.
-            var mergeOccurred = true;
-            while (mergeOccurred) {
-                mergeOccurred = false;
-                for (var i = 0; i < mergedClusters.length - 1; i++) {
-                    for (var j = i + 1; j < mergedClusters.length; j++) {
-                        var cluster1 = mergedClusters[i];
-                        var cluster2 = mergedClusters[j];
-                        var centerDistance = this.calculateDistance(cluster1.center.lon, cluster1.center.lat, cluster2.center.lon, cluster2.center.lat);
-                        var distanceThreshold = this.distanceBetweenClusters;
-                        if (centerDistance <= distanceThreshold) {
-                            // Merge clusters.
-                            (_a = cluster1.points).push.apply(_a, cluster2.points);
-                            mergedClusters.splice(j, 1);
-                            this.removeClusterEntity(cluster2.center.id);
-                            mergeOccurred = true;
-                            break;
-                        }
-                    }
-                    if (mergeOccurred) {
-                        break;
-                    }
-                }
-            }
-            return mergedClusters;
+            return { clusters: validClusters, noLongerClustered: noLongerClustered };
         };
         /**
          * Removes Cesium cluster entity.
@@ -3064,24 +3275,7 @@
         PointClustering.prototype.addPoint = function (id, cartesian3) {
             var point = this.convertCartesianToCartographic(cartesian3);
             point.id = id;
-            this.quadTree.Insert(point);
-        };
-        /**
-         * Calculates rough distance across earth between two points.
-         * @param lon1
-         * @param lat1
-         * @param lon2
-         * @param lat2
-         * @returns
-         */
-        PointClustering.prototype.calculateDistance = function (lon1, lat1, lon2, lat2) {
-            var lonDelta = Math.abs(lon1 - lon2);
-            var latDelta = Math.abs(lat1 - lat2);
-            // Approximate radius of the Earth in kilometers
-            var earthRadius = 6371;
-            var distance = 2 * Math.asin(Math.sqrt(Math.sin(latDelta / 2) * Math.sin(latDelta / 2) +
-                Math.cos(lat1) * Math.cos(lat2) * Math.sin(lonDelta / 2) * Math.sin(lonDelta / 2))) * earthRadius;
-            return distance;
+            return this.quadTree.Insert(point);
         };
         /**
          * Adds entity to clustering logic.
@@ -3105,14 +3299,14 @@
                 return false;
             }
             if (!this.pointColorBg && entity.point) {
-                this.pointColorBg = GetValue$1(this.viewer, entity.point.color);
-                if (this.pointColorBg) {
+                var pointColorBg = GetValue$1(this.viewer, entity.point.color);
+                if (pointColorBg) {
                     var cColor = null;
-                    if (this.pointColorBg instanceof Object) {
-                        cColor = new Cesium.Color(this.pointColorBg.red, this.pointColorBg.green, this.pointColorBg.blue, this.pointColorBg.alpha);
+                    if (pointColorBg instanceof Object) {
+                        cColor = new Cesium.Color(pointColorBg.red, pointColorBg.green, pointColorBg.blue, pointColorBg.alpha);
                     }
-                    else if (typeof this.pointColorBg === "string") {
-                        cColor = Cesium.Color.fromCssColorString(this.pointColorBg);
+                    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].
@@ -3124,11 +3318,21 @@
                         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;
+                }
+            }
+            var added = this.addPoint(id, pos3d);
+            if (!added) {
+                return false;
+            }
             this.registeredEntityIds.add(id);
-            this.addPoint(id, pos3d);
             this.updateQueue.Call();
             return true;
         };
@@ -10608,7 +10812,7 @@
         ViewRenderEngine.Render = Render;
     })(exports.ViewRenderEngine || (exports.ViewRenderEngine = {}));
 
-    var VERSION = "2.1.8";
+    var VERSION = "2.2.0";
 
     exports.VERSION = VERSION;
     exports.CesiumViewMonitor = CesiumViewMonitor;