bruce-cesium 2.1.8 → 2.1.9

package/dist/bruce-cesium.es5.js

@@ -1,6 +1,6 @@
 import { BruceEvent, Cartes, Carto, Entity as Entity$1, Geometry, Tileset, MathUtils, LRUCache, ZoomControl, Style, EntityTag, Calculator, EntityLod, EntityType, ClientFile, ObjectUtils, DelayQueue, BatchedDataGetter, EntityRelationType, EntityCoords, EntityFilterGetter, EntitySource, MenuItem, EntityRelation, ENVIRONMENT, ProjectView, ProjectViewBookmark, ProjectViewTile, ProjectViewLegacyTile, ProgramKey, Camera } from 'bruce-models';
 import * as Cesium from 'cesium';
-import { Cartesian2, Cartographic, CallbackProperty, Cartesian3, Color, Rectangle, Math as Math$1, Entity, Primitive, Cesium3DTileFeature, SceneMode, HeightReference, DistanceDisplayCondition, NearFarScalar, HorizontalOrigin, VerticalOrigin, ClassificationType, ArcType, PolygonHierarchy, ShadowMode, PolylineGraphics, HeadingPitchRoll, Transforms, ColorBlendMode, Cesium3DTileColorBlendMode, HeadingPitchRange, createOsmBuildings, Cesium3DTileStyle, KmlDataSource, createWorldTerrain, EllipsoidTerrainProvider, CesiumTerrainProvider, BingMapsImageryProvider, BingMapsStyle, MapboxImageryProvider, MapboxStyleImageryProvider, ArcGisMapServerImageryProvider, OpenStreetMapImageryProvider, GridImageryProvider, GeographicTilingScheme, ImageryLayer, UrlTemplateImageryProvider, TileMapServiceImageryProvider, IonImageryProvider, CesiumInspector, OrthographicFrustum, JulianDate, Cesium3DTileset, Matrix4, Matrix3, IonResource, EllipsoidGeodesic, sampleTerrainMostDetailed, ColorMaterialProperty, EasingFunction, GeometryInstance, PolygonPipeline } from 'cesium';
+import { Cartesian2, Cartographic, CallbackProperty, Cartesian3, Color, Rectangle, Math as Math$1, Entity, Primitive, Cesium3DTileFeature, HeightReference, DistanceDisplayCondition, NearFarScalar, HorizontalOrigin, VerticalOrigin, ClassificationType, ArcType, PolygonHierarchy, ShadowMode, PolylineGraphics, HeadingPitchRoll, Transforms, ColorBlendMode, SceneMode, HeadingPitchRange, Cesium3DTileColorBlendMode, createOsmBuildings, Cesium3DTileStyle, KmlDataSource, OrthographicFrustum, JulianDate, createWorldTerrain, EllipsoidTerrainProvider, CesiumTerrainProvider, BingMapsImageryProvider, BingMapsStyle, MapboxImageryProvider, MapboxStyleImageryProvider, ArcGisMapServerImageryProvider, OpenStreetMapImageryProvider, GridImageryProvider, GeographicTilingScheme, ImageryLayer, UrlTemplateImageryProvider, TileMapServiceImageryProvider, IonImageryProvider, Cesium3DTileset, Matrix4, Matrix3, IonResource, CesiumInspector, EllipsoidGeodesic, sampleTerrainMostDetailed, PolygonPipeline, ColorMaterialProperty, EasingFunction, GeometryInstance } from 'cesium';
 
 var TIME_LAG = 300;
 var POSITION_CHECK_TIMER = 950;
@@ -2713,6 +2713,167 @@ var Quad = /** @class */ (function () {
     };
     return Quad;
 }());
+var _clusterImageCache = new LRUCache(500);
+var _clusterImageLoadedCache = new LRUCache(500);
+function _loadClusterImage(params) {
+    return __awaiter(this, void 0, void 0, function () {
+        var size, txtColor, bgColor, text, iconUrl, key, cacheData, prom;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    size = params.size, txtColor = params.txtColor, bgColor = params.bgColor, text = params.text, iconUrl = params.iconUrl;
+                    key = "".concat(size, "-").concat(txtColor, "-").concat(bgColor, "-").concat(text, "-").concat(iconUrl);
+                    cacheData = _clusterImageCache.Get(key);
+                    if (!cacheData) return [3 /*break*/, 2];
+                    return [4 /*yield*/, cacheData];
+                case 1: return [2 /*return*/, _a.sent()];
+                case 2:
+                    prom = new Promise(function (res, rej) {
+                        var canvas = document.createElement("canvas");
+                        canvas.width = size;
+                        canvas.height = size;
+                        var ctx = canvas.getContext("2d");
+                        var drawWithoutImage = function (img) {
+                            ctx.beginPath();
+                            ctx.arc(size / 2, size / 2, size / 2, 0, 2 * Math.PI, false);
+                            var fill = null;
+                            var txt = null;
+                            if (img) {
+                                var brightness = calculateImageBrightness(img);
+                                // brightness < 128 = light background.
+                                fill = brightness < 128 ? "white" : "#114d78";
+                                txt = brightness < 128 ? "black" : "white";
+                            }
+                            else {
+                                fill = bgColor ? bgColor : "#114d78";
+                                txt = txtColor ? txtColor : "white";
+                            }
+                            ctx.fillStyle = fill;
+                            ctx.fill();
+                            var maxTextWidth = size * 0.8;
+                            var maxTextHeight = size * 0.8;
+                            var minTextSize = Math.floor(size / 10);
+                            var textSize = findOptimalFontSize(text, maxTextWidth, maxTextHeight, minTextSize);
+                            ctx.font = "bold ".concat(textSize, "px Arial");
+                            ctx.fillStyle = txt;
+                            ctx.textAlign = "center";
+                            ctx.textBaseline = "middle";
+                            ctx.fillText(text, size / 2, size / 2);
+                        };
+                        var drawWithImage = function (img) {
+                            var aspectRatio = img.width / img.height;
+                            var imageSize = Math.min(size / 2, img.width, img.height);
+                            if (imageSize / aspectRatio > size / 2) {
+                                imageSize = (size / 2) * aspectRatio;
+                            }
+                            var imageX = (size - imageSize) / 2;
+                            var imageY = (size - imageSize) / 2 - imageSize / 3;
+                            ctx.beginPath();
+                            ctx.arc(size / 2, size / 2, size / 2, 0, 2 * Math.PI, false);
+                            var brightness = calculateImageBrightness(img);
+                            var bgColor = brightness < 128 ? "white" : "#114d78";
+                            var txtColor = brightness < 128 ? "black" : "white";
+                            ctx.fillStyle = bgColor;
+                            ctx.fill();
+                            ctx.shadowColor = "rgba(0, 0, 0, 0.3)";
+                            ctx.shadowOffsetX = 3;
+                            ctx.shadowOffsetY = 3;
+                            ctx.shadowBlur = 5;
+                            ctx.drawImage(img, imageX, imageY, imageSize, imageSize);
+                            var padding = imageSize / 6;
+                            var maxTextWidth = imageSize;
+                            var maxTextHeight = imageSize - padding;
+                            var minTextSize = Math.floor(imageSize / 5);
+                            var textSize = findOptimalFontSize(text, maxTextWidth, maxTextHeight, minTextSize);
+                            ctx.font = "bold ".concat(textSize, "px Arial");
+                            ctx.fillStyle = txtColor;
+                            ctx.textAlign = "center";
+                            ctx.textBaseline = "top";
+                            ctx.shadowColor = "rgba(0, 0, 0, 0)";
+                            ctx.shadowOffsetX = 0;
+                            ctx.shadowOffsetY = 0;
+                            ctx.shadowBlur = 0;
+                            ctx.fillText(text, size / 2, imageY + imageSize + padding);
+                        };
+                        var findOptimalFontSize = function (text, maxWidth, maxHeight, minSize) {
+                            var fontSize = maxHeight;
+                            var tempCanvas = document.createElement("canvas");
+                            var tempCtx = tempCanvas.getContext("2d");
+                            while (fontSize > minSize) {
+                                tempCtx.font = "bold ".concat(fontSize, "px Arial");
+                                var measuredWidth = tempCtx.measureText(text).width;
+                                var measuredHeight = fontSize * 1.2; // Allowing some padding
+                                if (measuredWidth <= maxWidth && measuredHeight <= maxHeight) {
+                                    break;
+                                }
+                                fontSize--;
+                            }
+                            return fontSize;
+                        };
+                        var calculateImageBrightness = function (img) {
+                            var brightness = 0;
+                            var tempCanvas = document.createElement("canvas");
+                            tempCanvas.width = img.width;
+                            tempCanvas.height = img.height;
+                            var tempCtx = tempCanvas.getContext("2d");
+                            tempCtx.drawImage(img, 0, 0);
+                            var imageData = tempCtx.getImageData(0, 0, img.width, img.height).data;
+                            for (var i = 0; i < imageData.length; i += 4) {
+                                var r = imageData[i];
+                                var g = imageData[i + 1];
+                                var b = imageData[i + 2];
+                                brightness += (r + g + b) / 3;
+                            }
+                            return Math.round(brightness / (img.width * img.height));
+                        };
+                        if (iconUrl) {
+                            var img_1 = new Image();
+                            img_1.crossOrigin = "anonymous";
+                            img_1.src = iconUrl;
+                            img_1.onload = function () {
+                                if (size > 50) {
+                                    drawWithImage(img_1);
+                                }
+                                else {
+                                    drawWithoutImage(img_1);
+                                }
+                                res(canvas);
+                            };
+                            img_1.onerror = function () {
+                                drawWithoutImage();
+                                res(canvas);
+                            };
+                        }
+                        else {
+                            drawWithoutImage();
+                            res(canvas);
+                        }
+                    });
+                    _clusterImageCache.Set(key, prom);
+                    prom.then(function (canvas) {
+                        _clusterImageLoadedCache.Set(key, canvas);
+                        _clusterImageCache.Set(key, null);
+                    });
+                    return [4 /*yield*/, prom];
+                case 3: return [2 /*return*/, _a.sent()];
+            }
+        });
+    });
+}
+function getClusterImage(params) {
+    var size = params.size, txtColor = params.txtColor, bgColor = params.bgColor, text = params.text, iconUrl = params.iconUrl;
+    var key = "".concat(size, "-").concat(txtColor, "-").concat(bgColor, "-").concat(text, "-").concat(iconUrl);
+    var cacheData = _clusterImageLoadedCache.Get(key);
+    // If available then return.
+    if (cacheData) {
+        return cacheData;
+    }
+    // If not available then queue for it to cook.
+    else {
+        _loadClusterImage(params);
+    }
+    return null;
+}
 var PointClustering = /** @class */ (function () {
     function PointClustering(register, menuItemId) {
         var _this = this;
@@ -2866,45 +3027,42 @@ var PointClustering = /** @class */ (function () {
             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;
+        /**
+         * 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);
         };
-        // 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];
+        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 = 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 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: Cartesian3.fromDegrees(centroid.lon, centroid.lat, 150),
-                    point: {
-                        heightReference: HeightReference.NONE,
-                        pixelSize: getScale(count),
-                        color: this.pointColorBg ? this.pointColorBg : Color.fromCssColorString("#4287f5")
-                    },
                     billboard: {
                         heightReference: HeightReference.NONE,
-                        image: getLabel(count),
+                        image: new CallbackProperty(function () {
+                            return getCanvas(count);
+                        }, false),
                         width: getScale(count),
                         height: getScale(count),
                         verticalOrigin: VerticalOrigin.CENTER,
@@ -2912,33 +3070,39 @@ var PointClustering = /** @class */ (function () {
                         disableDepthTestDistance: Number.POSITIVE_INFINITY
                     }
                 });
-                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({
+                    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_1 = function (clusterId, clusterEntity) {
+        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);
         }
     };
     /**
@@ -2947,7 +3111,7 @@ var PointClustering = /** @class */ (function () {
      */
     PointClustering.prototype.updateClusterSpacing = function (cameraHeight) {
         // Camera height thresholds in meters.
-        var cameraHeightThresholds = [2000, 5000, 8000, 13000, 25000, 40000];
+        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.
@@ -2977,9 +3141,9 @@ var PointClustering = /** @class */ (function () {
             if (processedPoints.has(point.id)) {
                 continue;
             }
-            // Skip points closer than 2000 meters to the camera.
+            // Skip points closer than 4000 meters to the camera.
             var cartesian3 = Cartesian3.fromDegrees(point.lon, point.lat);
-            if (Cartesian3.distance(cartesian3, cameraPosition) <= 2000) {
+            if (Cartesian3.distance(cartesian3, cameraPosition) <= 4000) {
                 continue;
             }
             var found = [];
@@ -3108,14 +3272,14 @@ var PointClustering = /** @class */ (function () {
             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 Color(this.pointColorBg.red, this.pointColorBg.green, this.pointColorBg.blue, this.pointColorBg.alpha);
+                if (pointColorBg instanceof Object) {
+                    cColor = new Color(pointColorBg.red, pointColorBg.green, pointColorBg.blue, pointColorBg.alpha);
                 }
-                else if (typeof this.pointColorBg === "string") {
-                    cColor = Color.fromCssColorString(this.pointColorBg);
+                else if (typeof pointColorBg === "string") {
+                    cColor = Color.fromCssColorString(pointColorBg);
                 }
                 // Determine if text color should instead be black based on background.
                 // cColor contains r,g,b,a values where r,g,b are in the range [0,1].
@@ -3127,9 +3291,16 @@ var PointClustering = /** @class */ (function () {
                     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();
@@ -10662,7 +10833,7 @@ var ViewRenderEngine;
     ViewRenderEngine.Render = Render;
 })(ViewRenderEngine || (ViewRenderEngine = {}));
 
-var VERSION = "2.1.8";
+var VERSION = "2.1.9";
 
 export { VERSION, CesiumViewMonitor, ViewerUtils, MenuItemManager, EntityRenderEngine, MenuItemCreator, VisualsRegister, RenderManager, EntitiesIdsRenderManager, EntitiesLoadedRenderManager, EntitiesRenderManager, EntityRenderManager, TilesetCadRenderManager, TilesetArbRenderManager, TilesetEntitiesRenderManager, TilesetOsmRenderManager, TilesetPointcloudRenderManager, TilesetGooglePhotosRenderManager, DataSourceStaticKmlManager, RelationsRenderManager, SharedGetters, CesiumParabola, ViewRenderEngine, TileRenderEngine, TilesetRenderEngine, CESIUM_INSPECTOR_KEY, ViewUtils, DrawingUtils, MeasureUtils, EntityUtils };
 //# sourceMappingURL=bruce-cesium.es5.js.map