bruce-cesium 3.7.3 → 3.7.5

package/dist/bruce-cesium.es5.js

@@ -1,6 +1,6 @@
 import { BruceEvent, Cartes, Carto, Entity as Entity$1, Geometry, Tileset, MathUtils, LRUCache, ProjectViewTile, DelayQueue, ZoomControl, Style, EntityTag, Calculator, EntityLod, EntityType, ClientFile, ObjectUtils, Bounds, Api, EntityRelationType, ENVIRONMENT, EntityCoords, EntitySource, MenuItem, EntityRelation, ProgramKey, AbstractApi, ProjectViewBookmark, EntityAttachment, EntityAttachmentType, EntityAttribute, ProjectView, ProjectViewLegacyTile, Camera } from 'bruce-models';
 import * as Cesium from 'cesium';
-import { Cartographic, Cartesian2, Math as Math$1, Cartesian3, CallbackProperty, Color, HeightReference, Rectangle, JulianDate, SceneMode, Entity, Primitive, Cesium3DTileFeature, GeoJsonDataSource, ColorMaterialProperty, ConstantProperty, DistanceDisplayCondition, NearFarScalar, Model, HorizontalOrigin, VerticalOrigin, ClassificationType, ArcType, CornerType, ShadowMode, PolygonHierarchy, PolylineGraphics, HeadingPitchRoll, Transforms, ColorBlendMode, Cesium3DTileColorBlendMode, HeadingPitchRange, Ion, Cesium3DTileStyle, KmlDataSource, SceneTransforms, OrthographicFrustum, EasingFunction, EllipsoidTerrainProvider, BingMapsImageryProvider, BingMapsStyle, MapboxImageryProvider, MapboxStyleImageryProvider, ArcGisMapServerImageryProvider, OpenStreetMapImageryProvider, GridImageryProvider, GeographicTilingScheme, ImageryLayer, UrlTemplateImageryProvider, TileMapServiceImageryProvider, IonImageryProvider, CesiumTerrainProvider, Cesium3DTileset, Matrix4, Matrix3, IonResource, CesiumInspector, defined, ClockRange, EllipsoidGeodesic, sampleTerrainMostDetailed, PolygonPipeline, BoundingSphere, GeometryInstance, ScreenSpaceEventHandler, ScreenSpaceEventType, ModelGraphics, PolygonGraphics, CorridorGraphics, PointGraphics, BillboardGraphics, EllipseGraphics, CzmlDataSource, Quaternion, ConstantPositionProperty, Intersect } from 'cesium';
+import { Cartographic, Cartesian2, Math as Math$1, Cartesian3, CallbackProperty, Color, HeightReference, Rectangle, JulianDate, DistanceDisplayCondition, NearFarScalar, Model, Entity, HorizontalOrigin, VerticalOrigin, ConstantProperty, ConstantPositionProperty, ClassificationType, ArcType, CornerType, ShadowMode, PolygonHierarchy, PolylineGraphics, ColorMaterialProperty, HeadingPitchRoll, Transforms, ColorBlendMode, SceneMode, Primitive, Cesium3DTileFeature, GeoJsonDataSource, Cesium3DTileColorBlendMode, HeadingPitchRange, Ion, Cesium3DTileStyle, KmlDataSource, SceneTransforms, OrthographicFrustum, EasingFunction, Cesium3DTileset, Matrix4, Matrix3, IonResource, EllipsoidTerrainProvider, BingMapsImageryProvider, BingMapsStyle, MapboxImageryProvider, MapboxStyleImageryProvider, ArcGisMapServerImageryProvider, OpenStreetMapImageryProvider, GridImageryProvider, GeographicTilingScheme, ImageryLayer, UrlTemplateImageryProvider, TileMapServiceImageryProvider, IonImageryProvider, CesiumTerrainProvider, CesiumInspector, defined, ClockRange, EllipsoidGeodesic, sampleTerrainMostDetailed, PolygonPipeline, BoundingSphere, GeometryInstance, ModelGraphics, PolygonGraphics, CorridorGraphics, PointGraphics, BillboardGraphics, EllipseGraphics, ScreenSpaceEventHandler, ScreenSpaceEventType, CzmlDataSource, Quaternion, Intersect } from 'cesium';
 
 /*! *****************************************************************************
 Copyright (c) Microsoft Corporation. All rights reserved.
@@ -900,6 +900,282 @@ var DrawingUtils;
     DrawingUtils.RaisePos3d = RaisePos3d;
 })(DrawingUtils || (DrawingUtils = {}));
 
+function getColor(viewer, obj) {
+    var value = null;
+    if (obj === null || obj === void 0 ? void 0 : obj.getValue) {
+        var date = viewer.scene.lastRenderTime;
+        if (!date) {
+            date = viewer.clock.currentTime;
+        }
+        value = obj.getValue(date);
+    }
+    else {
+        value = obj;
+    }
+    if (value && value instanceof ColorMaterialProperty) {
+        value = value.color;
+    }
+    return value;
+}
+function getNumber(viewer, obj) {
+    var value = null;
+    if (obj === null || obj === void 0 ? void 0 : obj.getValue) {
+        var date = viewer.scene.lastRenderTime;
+        if (!date) {
+            date = viewer.clock.currentTime;
+        }
+        value = obj.getValue(date);
+    }
+    else {
+        value = obj;
+    }
+    return value;
+}
+/**
+ * Returns if a given visual is alive and in the scene.
+ * @param viewer
+ * @param visual
+ * @returns
+ */
+function isFeatureAlive(viewer, feature) {
+    if (!(viewer === null || viewer === void 0 ? void 0 : viewer.scene) || viewer.isDestroyed()) {
+        return false;
+    }
+    var cTileset = feature === null || feature === void 0 ? void 0 : feature.tileset;
+    if (!cTileset) {
+        return false;
+    }
+    if (cTileset.isDestroyed() || !viewer.scene.primitives.contains(cTileset)) {
+        return false;
+    }
+    return true;
+}
+var _lastMark = 0;
+var generateMark = function () {
+    _lastMark += 1;
+    return _lastMark;
+};
+function setMark(color, mark) {
+    color["NEXTSPACE_PROPERTY_MARK"] = mark;
+}
+function assertColorMark(mark, color) {
+    return color["NEXTSPACE_PROPERTY_MARK"] == mark;
+}
+var CesiumAnimatedProperty;
+(function (CesiumAnimatedProperty) {
+    /**
+     * Example:
+     * ```
+     * const myEntity = null; // Get an Entity from somewhere.
+     *
+     * const animateColor = new AnimateColor({
+     *     viewer: viewer,
+     *     color: Cesium.Color.RED,
+     *     startColor: myEntity.model.color,
+     *     type: "LINEAR",
+     *     durationMs: 1000
+     * });
+     *
+     * myEntity.model.color = new Cesium.CallbackProperty(() => {
+     *     return animateColor.GetValue();
+     * }, false);
+     * ```
+     */
+    var AnimateColor = /** @class */ (function () {
+        function AnimateColor(params) {
+            var _a;
+            this.viewer = params.viewer;
+            this.color = params.color;
+            this.durationMs = params.durationMs;
+            this.startColor = getColor(this.viewer, params.startColor);
+            if ((_a = this.startColor) === null || _a === void 0 ? void 0 : _a.clone) {
+                this.startColor = this.startColor.clone();
+            }
+            if (!this.startColor) {
+                this.startColor = Color.WHITE.clone();
+                console.warn("No start color provided. Using WHITE as start color. Animation may not work as expected.");
+            }
+            this.startTime = new Date();
+        }
+        /**
+         * Returns the calculated color at the provided time.
+         * @returns
+         */
+        AnimateColor.prototype.GetColor = function () {
+            var now = new Date();
+            var elapsedMs = now.getTime() - this.startTime.getTime();
+            // Animation over.
+            if (elapsedMs >= this.durationMs) {
+                return this.color;
+            }
+            try {
+                var progress = elapsedMs / this.durationMs;
+                return Color.lerp(this.startColor, this.color, progress, new Color());
+            }
+            catch (e) {
+                console.error(e);
+            }
+            // Failed to calculate color.
+            // We'll just return the target color.
+            return this.color;
+        };
+        /**
+         * Returns the calculated color as a material property.
+         * @returns
+         */
+        AnimateColor.prototype.GetMaterial = function () {
+            var color = this.GetColor();
+            return new ColorMaterialProperty(color);
+        };
+        return AnimateColor;
+    }());
+    CesiumAnimatedProperty.AnimateColor = AnimateColor;
+    var AnimateNumber = /** @class */ (function () {
+        function AnimateNumber(params) {
+            this.paused = false;
+            this.paused = Boolean(params.startPaused);
+            this.viewer = params.viewer;
+            this.value = params.value;
+            this.durationMs = params.durationMs;
+            this.startValue = getNumber(this.viewer, params.startValue);
+            if (!this.startValue) {
+                this.startValue = 0;
+            }
+            if (!this.paused) {
+                this.startTime = new Date();
+            }
+        }
+        AnimateNumber.prototype.Play = function () {
+            if (this.paused) {
+                this.paused = false;
+                this.startTime = new Date();
+            }
+        };
+        AnimateNumber.prototype.GetValue = function () {
+            if (this.paused) {
+                return this.startValue;
+            }
+            var now = new Date();
+            var elapsedMs = now.getTime() - this.startTime.getTime();
+            // Animation over.
+            if (elapsedMs >= this.durationMs) {
+                return this.value;
+            }
+            try {
+                var progress = elapsedMs / this.durationMs;
+                return Math$1.lerp(this.startValue, this.value, progress);
+            }
+            catch (e) {
+                console.error(e);
+            }
+            // Failed to calculate value.
+            // We'll just return the target value.
+            return this.value;
+        };
+        return AnimateNumber;
+    }());
+    CesiumAnimatedProperty.AnimateNumber = AnimateNumber;
+    /**
+     * Animates the color of a feature.
+     * This is handled separately from the AnimateColor class as Tileset features do not support Cesium callback properties.
+     *
+     * Example:
+     * ```
+     * const animateColor = AnimateTFeatureColor({
+     *    viewer: viewer,
+     *    feature: feature,
+     *    color: Cesium.Color.RED,
+     *    startColor: feature.color,
+     *    durationMs: 1000
+     * });
+     * ```
+     * @param params
+     * @returns
+     */
+    function AnimateTFeatureColor(params) {
+        var viewer = params.viewer, feature = params.feature, color = params.color, startColor = params.startColor, durationMs = params.durationMs;
+        ClearTFeatureColorAnimation(feature);
+        if (!startColor) {
+            if (feature.color) {
+                startColor = feature.color;
+                if (startColor.clone) {
+                    startColor = startColor.clone();
+                }
+            }
+            else {
+                startColor = Color.WHITE.clone();
+            }
+        }
+        // Don't animate if the colour is the same.
+        var curColor = getColor(viewer, feature.color);
+        if (curColor && Color.WHITE.equals(curColor)) {
+            curColor = null;
+        }
+        var colorTmp = color == null || Color.WHITE.equals(color) ? null : color;
+        if (!curColor && !colorTmp) {
+            return function () { };
+        }
+        else if (curColor && colorTmp && curColor.equals(colorTmp)) {
+            return function () { };
+        }
+        // Marks are used to detect external changes to the feature's color.
+        // If an external change is detected, the animation will stop.
+        var mark = generateMark();
+        setMark(feature.color, mark);
+        setMark(startColor, mark);
+        setMark(color, mark);
+        var startTime = new Date();
+        var removal = viewer.scene.postUpdate.addEventListener(function () {
+            if (!isFeatureAlive(viewer, feature)) {
+                removal === null || removal === void 0 ? void 0 : removal();
+                removal = null;
+                return;
+            }
+            if (!assertColorMark(mark, feature.color)) {
+                removal === null || removal === void 0 ? void 0 : removal();
+                removal = null;
+                return;
+            }
+            var now = new Date();
+            var elapsedMs = now.getTime() - startTime.getTime();
+            // Animation over.
+            if (elapsedMs >= durationMs) {
+                feature.color = color;
+                removal === null || removal === void 0 ? void 0 : removal();
+                removal = null;
+                return;
+            }
+            try {
+                var progress = elapsedMs / durationMs;
+                var newColor = Color.lerp(startColor, color, progress, new Color());
+                setMark(newColor, mark);
+                feature.color = newColor;
+                return;
+            }
+            catch (e) {
+                console.error(e);
+            }
+            // Failed to calculate color.
+            // We'll just set the target color and stop the animation.
+            feature.color = color;
+        });
+        // Return a function to stop the animation.
+        feature["ANIMATED_COLOR_REMOVAL"] = removal;
+        return function () {
+            removal === null || removal === void 0 ? void 0 : removal();
+            removal = null;
+        };
+    }
+    CesiumAnimatedProperty.AnimateTFeatureColor = AnimateTFeatureColor;
+    function ClearTFeatureColorAnimation(feature) {
+        if (feature && feature["ANIMATED_COLOR_REMOVAL"]) {
+            feature["ANIMATED_COLOR_REMOVAL"]();
+            feature["ANIMATED_COLOR_REMOVAL"] = null;
+        }
+    }
+    CesiumAnimatedProperty.ClearTFeatureColorAnimation = ClearTFeatureColorAnimation;
+})(CesiumAnimatedProperty || (CesiumAnimatedProperty = {}));
+
 /**
  * Returns if a given visual can be styled by this utility.
  * @param viewer
@@ -1020,7 +1296,7 @@ function storeColor(viewer, key, color, graphic) {
  * @param graphic
  * @returns
  */
-function getColor(viewer, key, graphic) {
+function getColor$1(viewer, key, graphic) {
     var color = graphic[getStoreKey(key)];
     // If no color is stored for the default color, we'll calculate and store it.
     if (!color) {
@@ -1050,6 +1326,8 @@ function getColor(viewer, key, graphic) {
 function applyOpacity(viewer, opacity, graphic) {
     refreshColor(viewer, graphic, opacity);
 }
+var ANIMATE_COLOR_MS = 200;
+var ANIMATE_COLOR_HIGHLIGHT_MS = 200;
 /**
  * Applies a color to a graphic based on the current key states.
  * Eg: if the graphic is selected, it will apply the selected color.
@@ -1058,7 +1336,7 @@ function applyOpacity(viewer, opacity, graphic) {
  * @param opacity
  */
 function refreshColor(viewer, graphic, opacity) {
-    var _a;
+    var _a, _b;
     // Calculate what color key we should apply.
     var key = "default";
     if (getKeyState(graphic, "select")) {
@@ -1069,11 +1347,12 @@ function refreshColor(viewer, graphic, opacity) {
     }
     // This ensures that the default color is always stored prior to applying a new color.
     if (key != "default") {
-        getColor(viewer, "default", graphic);
+        getColor$1(viewer, "default", graphic);
     }
-    var color = (_a = getColor(viewer, key, graphic)) !== null && _a !== void 0 ? _a : Color.WHITE;
+    var color = (_a = getColor$1(viewer, key, graphic)) !== null && _a !== void 0 ? _a : Color.WHITE;
     // If we're highlighting and it's selected, don't change the color.
     if (key != "highlight" || getKeyState(graphic, "select") == false) {
+        var animateMs = key == "highlight" ? ANIMATE_COLOR_HIGHLIGHT_MS : ANIMATE_COLOR_MS;
         color = color.clone();
         // Multiply opacity if one is set.
         if (opacity != null) {
@@ -1089,10 +1368,34 @@ function refreshColor(viewer, graphic, opacity) {
             }
         }
         if (graphic instanceof Cesium3DTileFeature) {
-            graphic.color = color;
+            CesiumAnimatedProperty.ClearTFeatureColorAnimation(graphic);
+            if (key == "default") {
+                graphic.color = color;
+            }
+            else {
+                CesiumAnimatedProperty.AnimateTFeatureColor({
+                    color: color.clone(),
+                    durationMs: animateMs,
+                    feature: graphic,
+                    viewer: viewer,
+                    startColor: ((_b = graphic.color) === null || _b === void 0 ? void 0 : _b.clone) ? graphic.color.clone() : graphic.color
+                });
+            }
         }
         else if (graphic instanceof ModelGraphics) {
-            graphic.color = new ConstantProperty(color);
+            // graphic.color = new Cesium.ConstantProperty(color);
+            var animateColor_1 = new CesiumAnimatedProperty.AnimateColor({
+                color: color,
+                durationMs: animateMs,
+                viewer: viewer,
+                startColor: graphic.color
+            });
+            if (graphic.color instanceof CallbackProperty) {
+                graphic.color.setCallback(function () { return animateColor_1.GetColor(); }, false);
+            }
+            else {
+                graphic.color = new CallbackProperty(function () { return animateColor_1.GetColor(); }, false);
+            }
         }
         else if (graphic instanceof PolygonGraphics) {
             graphic.material = new ColorMaterialProperty(color);
@@ -1104,10 +1407,34 @@ function refreshColor(viewer, graphic, opacity) {
             graphic.material = new ColorMaterialProperty(color);
         }
         else if (graphic instanceof PointGraphics) {
-            graphic.color = new ConstantProperty(color);
+            // graphic.color = new Cesium.ConstantProperty(color);
+            var animateColor_2 = new CesiumAnimatedProperty.AnimateColor({
+                color: color,
+                durationMs: animateMs,
+                viewer: viewer,
+                startColor: graphic.color
+            });
+            if (graphic.color instanceof CallbackProperty) {
+                graphic.color.setCallback(function () { return animateColor_2.GetColor(); }, false);
+            }
+            else {
+                graphic.color = new CallbackProperty(function () { return animateColor_2.GetColor(); }, false);
+            }
         }
         else if (graphic instanceof BillboardGraphics) {
-            graphic.color = new ConstantProperty(color);
+            // graphic.color = new Cesium.ConstantProperty(color);
+            var animateColor_3 = new CesiumAnimatedProperty.AnimateColor({
+                color: color,
+                durationMs: animateMs,
+                viewer: viewer,
+                startColor: graphic.color
+            });
+            if (graphic.color instanceof CallbackProperty) {
+                graphic.color.setCallback(function () { return animateColor_3.GetColor(); }, false);
+            }
+            else {
+                graphic.color = new CallbackProperty(function () { return animateColor_3.GetColor(); }, false);
+            }
         }
         else if (graphic instanceof EllipseGraphics) {
             graphic.material = new ColorMaterialProperty(color);
@@ -1208,6 +1535,64 @@ var CesiumEntityStyler;
         }
     }
     CesiumEntityStyler.Refresh = Refresh;
+    function BakeDefaultColor(params) {
+        var viewer = params.viewer, entity = params.entity, override = params.override;
+        if (!entity) {
+            return;
+        }
+        var parts = EntityUtils.GatherEntity({
+            entity: entity
+        });
+        for (var i = 0; i < parts.length; i++) {
+            var part = parts[i];
+            if (!isAlive(viewer, part)) {
+                continue;
+            }
+            // If we're not overriding then we check to ensure a colour is not already set.
+            if (override == false) {
+                var stored = part[getStoreKey("default")];
+                if (stored) {
+                    continue;
+                }
+            }
+            if (part instanceof Cesium3DTileFeature) {
+                var opacity = getAppliedOpacity(part);
+                storeColor(viewer, "default", calculateCurColor(viewer, part), part);
+                refreshColor(viewer, part, opacity);
+            }
+            else if (part instanceof Entity) {
+                if (part.billboard) {
+                    storeColor(viewer, "default", calculateCurColor(viewer, part.billboard), part.billboard);
+                    refreshColor(viewer, part.billboard, getAppliedOpacity(part.billboard));
+                }
+                if (part.model) {
+                    storeColor(viewer, "default", calculateCurColor(viewer, part.model), part.model);
+                    refreshColor(viewer, part.model, getAppliedOpacity(part.model));
+                }
+                if (part.polyline) {
+                    storeColor(viewer, "default", calculateCurColor(viewer, part.polyline), part.polyline);
+                    refreshColor(viewer, part.polyline, getAppliedOpacity(part.polyline));
+                }
+                if (part.polygon) {
+                    storeColor(viewer, "default", calculateCurColor(viewer, part.polygon), part.polygon);
+                    refreshColor(viewer, part.polygon, getAppliedOpacity(part.polygon));
+                }
+                if (part.corridor) {
+                    storeColor(viewer, "default", calculateCurColor(viewer, part.corridor), part.corridor);
+                    refreshColor(viewer, part.corridor, getAppliedOpacity(part.corridor));
+                }
+                if (part.point) {
+                    storeColor(viewer, "default", calculateCurColor(viewer, part.point), part.point);
+                    refreshColor(viewer, part.point, getAppliedOpacity(part.point));
+                }
+                if (part.ellipse) {
+                    storeColor(viewer, "default", calculateCurColor(viewer, part.ellipse), part.ellipse);
+                    refreshColor(viewer, part.ellipse, getAppliedOpacity(part.ellipse));
+                }
+            }
+        }
+    }
+    CesiumEntityStyler.BakeDefaultColor = BakeDefaultColor;
     /**
      * Updates the default colour of a graphic.
      * This will not change the graphic's state to use it if the entity is selected/highlighted.
@@ -4257,7 +4642,7 @@ var POINT_BILLBOARD_PADDING = 1;
 var createCircleBillboard = function (size, colorCss) {
     var key = size + "-" + colorCss;
     var cacheData = _billboardCache.Get(key);
-    if ((cacheData === null || cacheData === void 0 ? void 0 : cacheData.canvas) instanceof HTMLCanvasElement) {
+    if ((cacheData === null || cacheData === void 0 ? void 0 : cacheData.canvasDataUri) && typeof (cacheData === null || cacheData === void 0 ? void 0 : cacheData.canvasDataUri) == "string") {
         return cacheData;
     }
     // Slight padding to avoid corners clipping.
@@ -4271,7 +4656,7 @@ var createCircleBillboard = function (size, colorCss) {
     context.fillStyle = colorCss;
     context.fill();
     var data = {
-        canvas: canvas,
+        canvasDataUri: canvas.toDataURL("image/png"),
         colorCss: colorCss,
         size: size,
         height: canvasSize,
@@ -4306,7 +4691,7 @@ var createImageBillboard = function (url) {
                         var context = canvas_1.getContext("2d");
                         context.drawImage(image_1, 0, 0);
                         var data = {
-                            canvas: canvas_1,
+                            canvasDataUri: canvas_1.toDataURL("image/png"),
                             height: image_1.height
                         };
                         res(data);
@@ -4422,11 +4807,11 @@ function extractMetadataFromFileUrl(url) {
 var EntityRenderEngine;
 (function (EntityRenderEngine) {
     function Render(params) {
-        var _a, _b, _c, _d, _e, _f, _g, _h;
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
         return __awaiter(this, void 0, void 0, function () {
-            var groupRenderParams, i, entity, geometry, cEntities, models, multiGeometry, polygons, polylines, points, i, entity, id, zoomItem, displayType, newRenderId, existingRego, oldRenderId, mParams, mEntities, i, entity, id, cEntity, _loop_1, i, pParams, pEntities, i, entity, cEntity, pParams, pEntities, i, entity, cEntity, pParams, pEntities, i, entity, cEntity;
-            return __generator(this, function (_j) {
-                switch (_j.label) {
+            var groupRenderParams, i, entity, geometry, cEntities, models, multiGeometry, polygons, polylines, points, i, entity, id, zoomItem, displayType, existingRego, newRenderId, oldRenderId, mParams, mEntities, i, entity, id, cEntity, _loop_1, i, pParams, pEntities, i, entity, cEntity, pParams, pEntities, i, entity, cEntity, pParams, pEntities, i, entity, cEntity;
+            return __generator(this, function (_m) {
+                switch (_m.label) {
                     case 0:
                         groupRenderParams = {
                             apiGetter: params.apiGetter,
@@ -4468,21 +4853,36 @@ var EntityRenderEngine;
                                 displayType = ZoomControl.EDisplayType.Geometry;
                             }
                             if (displayType != ZoomControl.EDisplayType.Hidden) {
-                                newRenderId = getRenderGroupId(zoomItem, (_b = params.viewer) === null || _b === void 0 ? void 0 : _b.terrainProvider);
                                 existingRego = params.visualRegister.GetRego({
                                     entityId: id,
                                     menuItemId: params.menuItemId
                                 });
+                                newRenderId = getRenderGroupId(zoomItem, (_b = params.viewer) === null || _b === void 0 ? void 0 : _b.terrainProvider);
                                 oldRenderId = (_c = existingRego === null || existingRego === void 0 ? void 0 : existingRego.visual) === null || _c === void 0 ? void 0 : _c._renderGroup;
-                                if (!params.force && newRenderId == oldRenderId && !(existingRego === null || existingRego === void 0 ? void 0 : existingRego.stale)) {
+                                if (!params.force &&
+                                    newRenderId == oldRenderId &&
+                                    !(existingRego === null || existingRego === void 0 ? void 0 : existingRego.stale) &&
+                                    // If historic metadata is different then it's also stale.
+                                    ((existingRego === null || existingRego === void 0 ? void 0 : existingRego.historicDateTime) == ((_d = entity.Bruce) === null || _d === void 0 ? void 0 : _d.historicDateTime))) {
+                                    // No sorting category needed. Already rendered the way we want.
                                     cEntities[id] = existingRego.visual;
                                 }
                                 else {
+                                    // Add so we can re-use the graphic and update it.
+                                    if (existingRego && newRenderId == oldRenderId) {
+                                        cEntities[id] = existingRego.visual;
+                                        // Flag as no longer stale as we're unlikely to recreate the rego if we're reusing the graphic.
+                                        existingRego.stale = false;
+                                        // Update metadata for the same reason.
+                                        existingRego.historicDateTime = (_e = entity.Bruce) === null || _e === void 0 ? void 0 : _e.historicDateTime;
+                                        existingRego.historicAttrKey = (_f = entity.Bruce) === null || _f === void 0 ? void 0 : _f.historicAttrKey;
+                                        existingRego.entityTypeId = entity.Bruce["EntityType.ID"];
+                                    }
                                     if (displayType == ZoomControl.EDisplayType.Model3D) {
                                         models.push(entity);
                                     }
                                     else if (displayType == ZoomControl.EDisplayType.Geometry) {
-                                        if ((_e = (_d = entity.geometry) === null || _d === void 0 ? void 0 : _d.MultiGeometry) === null || _e === void 0 ? void 0 : _e.length) {
+                                        if ((_h = (_g = entity.geometry) === null || _g === void 0 ? void 0 : _g.MultiGeometry) === null || _h === void 0 ? void 0 : _h.length) {
                                             multiGeometry.push(entity);
                                         }
                                         else {
@@ -4497,10 +4897,10 @@ var EntityRenderEngine;
                             }
                         }
                         if (!(models.length > 0)) return [3 /*break*/, 2];
-                        mParams = __assign(__assign({}, groupRenderParams), { entities: models });
+                        mParams = __assign(__assign({}, groupRenderParams), { rendered: cEntities, entities: models });
                         return [4 /*yield*/, Model3d.RenderGroup(mParams)];
                     case 1:
-                        mEntities = _j.sent();
+                        mEntities = _m.sent();
                         for (i = 0; i < mParams.entities.length; i++) {
                             entity = mParams.entities[i];
                             id = entity.Bruce.ID;
@@ -4512,20 +4912,20 @@ var EntityRenderEngine;
                                 multiGeometry.push(entity);
                             }
                         }
-                        _j.label = 2;
+                        _m.label = 2;
                     case 2:
                         if (!(multiGeometry.length > 0)) return [3 /*break*/, 6];
                         _loop_1 = function (i) {
                             var entity, pParams, zoomItem, j, subEntity, cPoly, rendered, cLines, cPoints, rootEntity_1, firstEntity;
-                            return __generator(this, function (_k) {
-                                switch (_k.label) {
+                            return __generator(this, function (_o) {
+                                switch (_o.label) {
                                     case 0:
                                         entity = multiGeometry[i];
-                                        if (!((_g = (_f = entity.geometry) === null || _f === void 0 ? void 0 : _f.MultiGeometry) === null || _g === void 0 ? void 0 : _g.length)) {
+                                        if (!((_k = (_j = entity.geometry) === null || _j === void 0 ? void 0 : _j.MultiGeometry) === null || _k === void 0 ? void 0 : _k.length)) {
                                             polygons.push(entity);
                                             return [2 /*return*/, "continue"];
                                         }
-                                        pParams = __assign(__assign({}, groupRenderParams), { entities: [] });
+                                        pParams = __assign(__assign({}, groupRenderParams), { entities: [], rendered: cEntities });
                                         zoomItem = pParams.zoomItems[entity.Bruce.ID];
                                         for (j = 0; j < entity.geometry.MultiGeometry.length; j++) {
                                             subEntity = __assign(__assign({}, entity), { geometry: entity.geometry.MultiGeometry[j], Bruce: __assign(__assign({}, entity.Bruce), { ID: ObjectUtils.UId() }) });
@@ -4534,7 +4934,7 @@ var EntityRenderEngine;
                                         }
                                         return [4 /*yield*/, Polygon.RenderGroup(pParams)];
                                     case 1:
-                                        cPoly = _k.sent();
+                                        cPoly = _o.sent();
                                         Object.keys(cPoly).forEach(function (key) {
                                             if (cPoly[key]) {
                                                 pParams.entities = pParams.entities.filter(function (e) { return e.Bruce.ID != key; });
@@ -4543,7 +4943,7 @@ var EntityRenderEngine;
                                         rendered = Object.values(cPoly);
                                         return [4 /*yield*/, Polyline.RenderGroup(pParams)];
                                     case 2:
-                                        cLines = _k.sent();
+                                        cLines = _o.sent();
                                         Object.keys(cLines).forEach(function (key) {
                                             if (cLines[key]) {
                                                 pParams.entities = pParams.entities.filter(function (e) { return e.Bruce.ID != key; });
@@ -4553,9 +4953,9 @@ var EntityRenderEngine;
                                         if (!!rendered.length) return [3 /*break*/, 4];
                                         return [4 /*yield*/, Point.RenderGroup(pParams)];
                                     case 3:
-                                        cPoints = _k.sent();
+                                        cPoints = _o.sent();
                                         rendered = rendered.concat(Object.values(cPoints));
-                                        _k.label = 4;
+                                        _o.label = 4;
                                     case 4:
                                         rendered = rendered.filter(function (x) { return x != null; });
                                         if (rendered.length) {
@@ -4563,7 +4963,7 @@ var EntityRenderEngine;
                                                 id: ObjectUtils.UId(10)
                                             });
                                             rootEntity_1._siblingGraphics = [];
-                                            rootEntity_1._renderGroup = getRenderGroupId(zoomItem, (_h = params.viewer) === null || _h === void 0 ? void 0 : _h.terrainProvider);
+                                            rootEntity_1._renderGroup = getRenderGroupId(zoomItem, (_l = params.viewer) === null || _l === void 0 ? void 0 : _l.terrainProvider);
                                             rootEntity_1._siblingGraphics = rootEntity_1._siblingGraphics.concat(rendered);
                                             cEntities[entity.Bruce.ID] = rootEntity_1;
                                             firstEntity = rendered[0];
@@ -4582,22 +4982,22 @@ var EntityRenderEngine;
                             });
                         };
                         i = 0;
-                        _j.label = 3;
+                        _m.label = 3;
                     case 3:
                         if (!(i < multiGeometry.length)) return [3 /*break*/, 6];
                         return [5 /*yield**/, _loop_1(i)];
                     case 4:
-                        _j.sent();
-                        _j.label = 5;
+                        _m.sent();
+                        _m.label = 5;
                     case 5:
                         i++;
                         return [3 /*break*/, 3];
                     case 6:
                         if (!(polygons.length > 0)) return [3 /*break*/, 8];
-                        pParams = __assign(__assign({}, groupRenderParams), { entities: polygons });
+                        pParams = __assign(__assign({}, groupRenderParams), { entities: polygons, rendered: cEntities });
                         return [4 /*yield*/, Polygon.RenderGroup(pParams)];
                     case 7:
-                        pEntities = _j.sent();
+                        pEntities = _m.sent();
                         for (i = 0; i < pParams.entities.length; i++) {
                             entity = pParams.entities[i];
                             cEntity = pEntities[entity.Bruce.ID];
@@ -4608,13 +5008,13 @@ var EntityRenderEngine;
                                 polylines.push(entity);
                             }
                         }
-                        _j.label = 8;
+                        _m.label = 8;
                     case 8:
                         if (!(polylines.length > 0)) return [3 /*break*/, 10];
-                        pParams = __assign(__assign({}, groupRenderParams), { entities: polylines });
+                        pParams = __assign(__assign({}, groupRenderParams), { entities: polylines, rendered: cEntities });
                         return [4 /*yield*/, Polyline.RenderGroup(pParams)];
                     case 9:
-                        pEntities = _j.sent();
+                        pEntities = _m.sent();
                         for (i = 0; i < pParams.entities.length; i++) {
                             entity = pParams.entities[i];
                             cEntity = pEntities[entity.Bruce.ID];
@@ -4625,13 +5025,13 @@ var EntityRenderEngine;
                                 points.push(entity);
                             }
                         }
-                        _j.label = 10;
+                        _m.label = 10;
                     case 10:
                         if (!(points.length > 0)) return [3 /*break*/, 12];
-                        pParams = __assign(__assign({}, groupRenderParams), { entities: points });
+                        pParams = __assign(__assign({}, groupRenderParams), { entities: points, rendered: cEntities });
                         return [4 /*yield*/, Point.RenderGroup(pParams)];
                     case 11:
-                        pEntities = _j.sent();
+                        pEntities = _m.sent();
                         for (i = 0; i < pParams.entities.length; i++) {
                             entity = pParams.entities[i];
                             cEntity = pEntities[entity.Bruce.ID];
@@ -4639,7 +5039,7 @@ var EntityRenderEngine;
                                 cEntities[entity.Bruce.ID] = cEntity;
                             }
                         }
-                        _j.label = 12;
+                        _m.label = 12;
                     case 12: return [2 /*return*/, cEntities];
                 }
             });
@@ -4692,11 +5092,11 @@ var EntityRenderEngine;
         }
         Point.CreateCircleBillboard = CreateCircleBillboard;
         function Render(params) {
-            var _a, _b;
+            var _a, _b, _c, _d;
             return __awaiter(this, void 0, void 0, function () {
-                var entity, style, type, cEntity, siblings, iconUrlRows, icon, iconUrl, metadata, api, image, e_5, iconScale, disableDepthTest, bColor, cColor, heightRef, radius, bFill, cFill, outline, cOutline, outlineWidth, bOutline, heightRef, pos3d, extrusion, outlineExtrusion, bColor, cColor, size, heightRef, circleBillboard, disableDepthTest;
-                return __generator(this, function (_c) {
-                    switch (_c.label) {
+                var entity, style, type, cEntity, siblings, prepareExistingGraphic, iconUrlRows, icon, iconUrl, metadata, api, image, e_5, iconScale, disableDepthTest, bColor, cColor_1, heightRef, currentImgKey, radius, bFill, cFill, outline, cOutline, outlineWidth, bOutline, heightRef, pos3d, extrusion, hasOutline, outlineExtrusion, outlineEntity, bColor, cColor, size, heightRef, circleBillboard, disableDepthTest, imgKey, currentImgKey;
+                return __generator(this, function (_e) {
+                    switch (_e.label) {
                         case 0:
                             entity = params.entity;
                             style = params.style;
@@ -4709,6 +5109,27 @@ var EntityRenderEngine;
                             }
                             cEntity = null;
                             siblings = [];
+                            prepareExistingGraphic = function (cEntity, siblings) {
+                                if (siblings === void 0) { siblings = 0; }
+                                // Gather entity in case previous version had sibling graphics we no longer need.
+                                var parts = EntityUtils.GatherEntity({
+                                    entity: cEntity,
+                                });
+                                if (parts.length > 1) {
+                                    // We'll cull all except the allowed number of siblings.
+                                    cEntity._siblingGraphics = cEntity._siblingGraphics.slice(0, siblings);
+                                    // We'll remove all that aren't in the allowed (direct) list.
+                                    for (var i = 0; i < parts.length - 1; i++) {
+                                        var part = parts[i];
+                                        if (part && part instanceof Entity && params.viewer.entities.contains(part) && !cEntity._siblingGraphics.includes(part)) {
+                                            params.viewer.entities.remove(part);
+                                        }
+                                    }
+                                    if (cEntity._parentEntity) {
+                                        console.warn("Point.Render: Parent entity was not null. This should not happen.");
+                                    }
+                                }
+                            };
                             if (!(type == Style.EPointType.Icon)) return [3 /*break*/, 9];
                             iconUrlRows = style.iconUrl == null ? [] : style.iconUrl;
                             iconUrlRows.forEach(function (row) {
@@ -4725,36 +5146,36 @@ var EntityRenderEngine;
                             api = params.apiGetter.getApi(metadata.accountId);
                             return [4 /*yield*/, api.Loading];
                         case 1:
-                            _c.sent();
+                            _e.sent();
                             iconUrl = ClientFile.GetUrl({
                                 api: api,
                                 fileId: metadata.fileId,
                                 viaCdn: true
                             });
-                            _c.label = 2;
+                            _e.label = 2;
                         case 2:
                             if (!(!iconUrl && style.iconId)) return [3 /*break*/, 4];
                             return [4 /*yield*/, params.api.Loading];
                         case 3:
-                            _c.sent();
+                            _e.sent();
                             iconUrl = ClientFile.GetUrl({
                                 api: params.api,
                                 fileId: style.iconId,
                                 viaCdn: true
                             });
-                            _c.label = 4;
+                            _e.label = 4;
                         case 4:
                             image = null;
                             if (!iconUrl) return [3 /*break*/, 8];
-                            _c.label = 5;
+                            _e.label = 5;
                         case 5:
-                            _c.trys.push([5, 7, , 8]);
+                            _e.trys.push([5, 7, , 8]);
                             return [4 /*yield*/, createImageBillboard(iconUrl)];
                         case 6:
-                            image = _c.sent();
+                            image = _e.sent();
                             return [3 /*break*/, 8];
                         case 7:
-                            e_5 = _c.sent();
+                            e_5 = _e.sent();
                             // Expanding the logging here so we can figure out why this is happening.
                             // Most of the time the file is missing but we're getting some strange errors so I am including logging on the API settings as well.
                             OneTimeError("ENTITY_RENDER_ENGINE_ICON_URL_ERROR_" + iconUrl, {
@@ -4773,34 +5194,64 @@ var EntityRenderEngine;
                                 disableDepthTest = Boolean(style.renderOnTop);
                                 if (iconScale > 0) {
                                     bColor = style.iconTintColor ? Calculator.GetColor(style.iconTintColor, entity, params.tags) : null;
-                                    cColor = bColor ? colorToCColor(bColor) : undefined;
+                                    cColor_1 = bColor ? colorToCColor(bColor) : undefined;
                                     heightRef = getHeightRef(style);
-                                    cEntity = new Entity({
-                                        id: ObjectUtils.UId(10),
-                                        billboard: {
-                                            horizontalOrigin: HorizontalOrigin.CENTER,
-                                            verticalOrigin: VerticalOrigin.BOTTOM,
-                                            image: image.canvas,
-                                            heightReference: getHeightRef(style),
-                                            scale: iconScale,
-                                            disableDepthTestDistance: disableDepthTest ? Number.POSITIVE_INFINITY : undefined,
-                                            distanceDisplayCondition: getDisplayCondition(params.minDistance, params.maxDistance),
-                                            color: cColor
-                                            // Would be great once we have a setting for this.
-                                            // translucencyByDistance: getTranslucencyByDistance(params.minDistance, params.maxDistance),
-                                        },
-                                        position: EntityUtils.GetPos({
+                                    if (!params.rendered || !params.rendered.billboard) {
+                                        cEntity = new Entity({
+                                            id: ObjectUtils.UId(10),
+                                            billboard: {
+                                                horizontalOrigin: HorizontalOrigin.CENTER,
+                                                verticalOrigin: VerticalOrigin.BOTTOM,
+                                                image: image.canvasDataUri,
+                                                heightReference: getHeightRef(style),
+                                                scale: iconScale,
+                                                disableDepthTestDistance: disableDepthTest ? Number.POSITIVE_INFINITY : undefined,
+                                                distanceDisplayCondition: getDisplayCondition(params.minDistance, params.maxDistance),
+                                                color: new CallbackProperty(function () { return cColor_1; }, true),
+                                                // Would be great once we have a setting for this.
+                                                // translucencyByDistance: getTranslucencyByDistance(params.minDistance, params.maxDistance),
+                                            },
+                                            position: EntityUtils.GetPos({
+                                                viewer: params.viewer,
+                                                entity: entity,
+                                                recordHeightRef: heightRef,
+                                                returnHeightRef: heightRef
+                                            }),
+                                            show: true
+                                        });
+                                    }
+                                    else {
+                                        prepareExistingGraphic(params.rendered);
+                                        cEntity = params.rendered;
+                                        currentImgKey = cEntity.billboard._billboardImgKey;
+                                        if (currentImgKey != iconUrl) {
+                                            cEntity.billboard.image = new ConstantProperty(image.canvasDataUri);
+                                        }
+                                        cEntity.billboard.scale = new ConstantProperty(iconScale);
+                                        cEntity.billboard.heightReference = new ConstantProperty(getHeightRef(style));
+                                        cEntity.billboard.disableDepthTestDistance = new ConstantProperty(disableDepthTest ? Number.POSITIVE_INFINITY : undefined);
+                                        cEntity.billboard.distanceDisplayCondition = new ConstantProperty(getDisplayCondition(params.minDistance, params.maxDistance));
+                                        cEntity.position = new ConstantPositionProperty(EntityUtils.GetPos({
                                             viewer: params.viewer,
                                             entity: entity,
                                             recordHeightRef: heightRef,
                                             returnHeightRef: heightRef
-                                        }),
-                                        show: true
-                                    });
+                                        }));
+                                        // We'll use "SetDefaultColor" to updating the internal reference and to allow for an animation.
+                                        CesiumEntityStyler.SetDefaultColor({
+                                            color: cColor_1,
+                                            entity: cEntity,
+                                            viewer: params.viewer,
+                                            override: true,
+                                            requestRender: false
+                                        });
+                                        cEntity.show = true;
+                                    }
                                     cEntity.billboard._billboardSize = image.height;
+                                    cEntity.billboard._billboardImgKey = iconUrl;
                                 }
                             }
-                            _c.label = 9;
+                            _e.label = 9;
                         case 9:
                             if (type == Style.EPointType.Cylinder) {
                                 radius = EnsureNumber(Calculator.GetNumber(style.CylinderRadius, entity, params.tags));
@@ -4825,46 +5276,97 @@ var EntityRenderEngine;
                                     returnHeightRef: heightRef
                                 });
                                 extrusion = getCylinderExtrusion(entity, params.tags, heightRef, style.CylinderFillExtrusion);
-                                cEntity = new Entity({
-                                    id: ObjectUtils.UId(10),
-                                    ellipse: {
-                                        semiMajorAxis: radius,
-                                        semiMinorAxis: radius,
-                                        material: cFill,
-                                        outlineWidth: null,
-                                        extrudedHeight: extrusion.value,
-                                        heightReference: heightRef,
-                                        extrudedHeightReference: extrusion.exHeightRef,
-                                        height: Cartographic.fromCartesian(pos3d).height,
-                                        zIndex: 1,
-                                        distanceDisplayCondition: getDisplayCondition(params.minDistance, params.maxDistance)
-                                    },
-                                    position: pos3d === null || pos3d === void 0 ? void 0 : pos3d.clone(),
-                                    show: true
-                                });
-                                if (outline && outlineWidth > 0) {
-                                    outlineExtrusion = getCylinderExtrusion(entity, params.tags, heightRef, style.CylinderBorderExtrusion);
-                                    // If this doesn't have its own extrusion, we must make it match the sibling.
-                                    // This way they render in a uniform way.
-                                    if (!outlineExtrusion.value && extrusion.value) {
-                                        outlineExtrusion.exHeightRef = extrusion.exHeightRef;
-                                    }
-                                    siblings.push(new Entity({
+                                hasOutline = outline && outlineWidth > 0;
+                                if (!params.rendered || !params.rendered.ellipse) {
+                                    cEntity = new Entity({
                                         id: ObjectUtils.UId(10),
                                         ellipse: {
-                                            semiMajorAxis: radius + outlineWidth,
-                                            semiMinorAxis: radius + outlineWidth,
-                                            material: cOutline,
-                                            outlineWidth: undefined,
-                                            extrudedHeight: outlineExtrusion.value,
+                                            semiMajorAxis: radius,
+                                            semiMinorAxis: radius,
+                                            material: cFill,
+                                            outlineWidth: null,
+                                            extrudedHeight: extrusion.value,
                                             heightReference: heightRef,
-                                            extrudedHeightReference: outlineExtrusion.exHeightRef,
+                                            extrudedHeightReference: extrusion.exHeightRef,
                                             height: Cartographic.fromCartesian(pos3d).height,
-                                            zIndex: 2,
+                                            zIndex: 1,
                                             distanceDisplayCondition: getDisplayCondition(params.minDistance, params.maxDistance)
                                         },
-                                        position: pos3d === null || pos3d === void 0 ? void 0 : pos3d.clone()
-                                    }));
+                                        position: pos3d === null || pos3d === void 0 ? void 0 : pos3d.clone(),
+                                        show: true
+                                    });
+                                }
+                                else {
+                                    prepareExistingGraphic(params.rendered, hasOutline ? 1 : 0);
+                                    cEntity = params.rendered;
+                                    cEntity.ellipse.semiMajorAxis = new ConstantProperty(radius);
+                                    cEntity.ellipse.semiMinorAxis = new ConstantProperty(radius);
+                                    cEntity.ellipse.outlineWidth = undefined;
+                                    cEntity.ellipse.extrudedHeight = new ConstantProperty(extrusion.value);
+                                    cEntity.ellipse.heightReference = new ConstantProperty(heightRef);
+                                    cEntity.ellipse.extrudedHeightReference = new ConstantProperty(extrusion.exHeightRef);
+                                    cEntity.ellipse.height = new ConstantProperty(Cartographic.fromCartesian(pos3d).height);
+                                    cEntity.ellipse.zIndex = new ConstantProperty(1);
+                                    cEntity.ellipse.distanceDisplayCondition = new ConstantProperty(getDisplayCondition(params.minDistance, params.maxDistance));
+                                    cEntity.position = new ConstantPositionProperty(pos3d === null || pos3d === void 0 ? void 0 : pos3d.clone());
+                                    // We'll use "SetDefaultColor" to updating the internal reference and to allow for an animation.
+                                    // WARNING: ellipse does not support animation (yet?).
+                                    CesiumEntityStyler.SetDefaultColor({
+                                        color: cFill,
+                                        entity: cEntity,
+                                        viewer: params.viewer,
+                                        override: true,
+                                        requestRender: false
+                                    });
+                                    cEntity.show = true;
+                                }
+                                if (hasOutline) {
+                                    outlineExtrusion = getCylinderExtrusion(entity, params.tags, heightRef, style.CylinderBorderExtrusion);
+                                    // If this doesn't have its own extrusion, we must make it match the sibling.
+                                    // This way they render in a uniform way.
+                                    if (!outlineExtrusion.value && extrusion.value) {
+                                        outlineExtrusion.exHeightRef = extrusion.exHeightRef;
+                                    }
+                                    outlineEntity = (_d = (_c = params.rendered) === null || _c === void 0 ? void 0 : _c._siblingGraphics) === null || _d === void 0 ? void 0 : _d[0];
+                                    if (outlineEntity && outlineEntity.ellipse) {
+                                        outlineEntity.ellipse.semiMajorAxis = new ConstantProperty(radius + outlineWidth);
+                                        outlineEntity.ellipse.semiMinorAxis = new ConstantProperty(radius + outlineWidth);
+                                        outlineEntity.ellipse.extrudedHeight = new ConstantProperty(outlineExtrusion.value);
+                                        outlineEntity.ellipse.heightReference = new ConstantProperty(heightRef);
+                                        outlineEntity.ellipse.extrudedHeightReference = new ConstantProperty(outlineExtrusion.exHeightRef);
+                                        outlineEntity.ellipse.height = new ConstantProperty(Cartographic.fromCartesian(pos3d).height);
+                                        outlineEntity.ellipse.zIndex = new ConstantProperty(2);
+                                        outlineEntity.ellipse.distanceDisplayCondition = new ConstantProperty(getDisplayCondition(params.minDistance, params.maxDistance));
+                                        // We'll use "SetDefaultColor" to updating the internal reference and to allow for an animation.
+                                        // WARNING: ellipse does not support animation (yet?).
+                                        CesiumEntityStyler.SetDefaultColor({
+                                            color: cOutline,
+                                            entity: outlineEntity,
+                                            viewer: params.viewer,
+                                            override: true,
+                                            requestRender: false
+                                        });
+                                        outlineEntity.show = true;
+                                    }
+                                    else {
+                                        outlineEntity = new Entity({
+                                            id: ObjectUtils.UId(10),
+                                            ellipse: {
+                                                semiMajorAxis: radius + outlineWidth,
+                                                semiMinorAxis: radius + outlineWidth,
+                                                material: cOutline,
+                                                outlineWidth: undefined,
+                                                extrudedHeight: outlineExtrusion.value,
+                                                heightReference: heightRef,
+                                                extrudedHeightReference: outlineExtrusion.exHeightRef,
+                                                height: Cartographic.fromCartesian(pos3d).height,
+                                                zIndex: 2,
+                                                distanceDisplayCondition: getDisplayCondition(params.minDistance, params.maxDistance)
+                                            },
+                                            position: pos3d === null || pos3d === void 0 ? void 0 : pos3d.clone()
+                                        });
+                                    }
+                                    siblings.push(outlineEntity);
                                 }
                             }
                             if (!cEntity) {
@@ -4881,33 +5383,66 @@ var EntityRenderEngine;
                                 heightRef = getHeightRef(style);
                                 circleBillboard = createCircleBillboard(size, cColor.toCssColorString());
                                 disableDepthTest = Boolean(style.renderOnTop);
-                                cEntity = new Entity({
-                                    id: ObjectUtils.UId(10),
-                                    // point: {
-                                    //     pixelSize: size,
-                                    //     color: cColor,
-                                    //     heightReference: getHeightRef(style),
-                                    //     distanceDisplayCondition: getDisplayCondition(params.minDistance, params.maxDistance)
-                                    // },
-                                    // We are generating a billboard instead of using the point.
-                                    // This is because points were behaving strangely where they would appear oblong shapes.
-                                    // This occurred consistently when rendering many icons and points at the same time.
-                                    billboard: {
-                                        height: circleBillboard.height,
-                                        width: circleBillboard.width,
-                                        image: circleBillboard.canvas,
-                                        heightReference: heightRef,
-                                        distanceDisplayCondition: getDisplayCondition(params.minDistance, params.maxDistance),
-                                        disableDepthTestDistance: disableDepthTest ? Number.POSITIVE_INFINITY : undefined
-                                    },
-                                    position: EntityUtils.GetPos({
+                                if (!params.rendered || !params.rendered.billboard) {
+                                    cEntity = new Entity({
+                                        id: ObjectUtils.UId(10),
+                                        // point: {
+                                        //     pixelSize: size,
+                                        //     color: cColor,
+                                        //     heightReference: getHeightRef(style),
+                                        //     distanceDisplayCondition: getDisplayCondition(params.minDistance, params.maxDistance)
+                                        // },
+                                        // We are generating a billboard instead of using the point.
+                                        // This is because points were behaving strangely where they would appear oblong shapes.
+                                        // This occurred consistently when rendering many icons and points at the same time.
+                                        billboard: {
+                                            height: circleBillboard.height,
+                                            width: circleBillboard.width,
+                                            image: circleBillboard.canvasDataUri,
+                                            color: new CallbackProperty(function () { return undefined; }, true),
+                                            heightReference: heightRef,
+                                            distanceDisplayCondition: getDisplayCondition(params.minDistance, params.maxDistance),
+                                            disableDepthTestDistance: disableDepthTest ? Number.POSITIVE_INFINITY : undefined
+                                        },
+                                        position: EntityUtils.GetPos({
+                                            viewer: params.viewer,
+                                            entity: entity,
+                                            recordHeightRef: heightRef,
+                                            returnHeightRef: heightRef
+                                        }),
+                                        show: true
+                                    });
+                                }
+                                else {
+                                    prepareExistingGraphic(params.rendered);
+                                    cEntity = params.rendered;
+                                    imgKey = "".concat(size, "-").concat(cColor.toCssColorString());
+                                    currentImgKey = cEntity.billboard._billboardImgKey;
+                                    if (currentImgKey != imgKey) {
+                                        cEntity.billboard.image = new ConstantProperty(circleBillboard.canvasDataUri);
+                                    }
+                                    cEntity.billboard.height = new ConstantProperty(circleBillboard.height);
+                                    cEntity.billboard.width = new ConstantProperty(circleBillboard.width);
+                                    cEntity.billboard.heightReference = new ConstantProperty(heightRef);
+                                    cEntity.billboard.distanceDisplayCondition = new ConstantProperty(getDisplayCondition(params.minDistance, params.maxDistance));
+                                    cEntity.billboard.disableDepthTestDistance = new ConstantProperty(disableDepthTest ? Number.POSITIVE_INFINITY : undefined);
+                                    cEntity.position = new ConstantPositionProperty(EntityUtils.GetPos({
                                         viewer: params.viewer,
                                         entity: entity,
                                         recordHeightRef: heightRef,
                                         returnHeightRef: heightRef
-                                    }),
-                                    show: true
-                                });
+                                    }));
+                                    // We'll use "SetDefaultColor" to updating the internal reference and to allow for an animation.
+                                    CesiumEntityStyler.SetDefaultColor({
+                                        color: cColor,
+                                        entity: cEntity,
+                                        viewer: params.viewer,
+                                        override: true,
+                                        requestRender: false
+                                    });
+                                    cEntity.show = true;
+                                    cEntity.billboard._billboardImgKey = imgKey;
+                                }
                                 cEntity.billboard._billboardSize = Math.ceil(circleBillboard.height / 2);
                             }
                             if (cEntity) {
@@ -4920,16 +5455,16 @@ var EntityRenderEngine;
         }
         Point.Render = Render;
         function RenderGroup(params) {
-            var _a, _b, _c;
+            var _a, _b, _c, _d;
             return __awaiter(this, void 0, void 0, function () {
-                var api, cEntities, i, entity, zoomItem, style, _d, tagIds, tags, pStyle, cEntity, name_2;
-                return __generator(this, function (_e) {
-                    switch (_e.label) {
+                var api, cEntities, i, entity, zoomItem, style, _e, tagIds, tags, pStyle, cEntity, name_2;
+                return __generator(this, function (_f) {
+                    switch (_f.label) {
                         case 0:
                             api = params.apiGetter.getApi();
                             cEntities = {};
                             i = 0;
-                            _e.label = 1;
+                            _f.label = 1;
                         case 1:
                             if (!(i < params.entities.length)) return [3 /*break*/, 11];
                             entity = params.entities[i];
@@ -4937,13 +5472,13 @@ var EntityRenderEngine;
                             if (!(zoomItem.StyleID != -1)) return [3 /*break*/, 3];
                             return [4 /*yield*/, getStyle(api, entity, zoomItem.StyleID)];
                         case 2:
-                            _d = (_a = (_e.sent())) === null || _a === void 0 ? void 0 : _a.Settings;
+                            _e = (_a = (_f.sent())) === null || _a === void 0 ? void 0 : _a.Settings;
                             return [3 /*break*/, 4];
                         case 3:
-                            _d = zoomItem.Style;
-                            _e.label = 4;
+                            _e = zoomItem.Style;
+                            _f.label = 4;
                         case 4:
-                            style = _d;
+                            style = _e;
                             tagIds = entity.Bruce["Layer.ID"];
                             tags = [];
                             if (!(tagIds && tagIds.length > 0)) return [3 /*break*/, 6];
@@ -4952,8 +5487,8 @@ var EntityRenderEngine;
                                     tagIds: tagIds
                                 })];
                         case 5:
-                            tags = (_e.sent()).tags;
-                            _e.label = 6;
+                            tags = (_f.sent()).tags;
+                            _f.label = 6;
                         case 6:
                             pStyle = (_b = style === null || style === void 0 ? void 0 : style.pointStyle) !== null && _b !== void 0 ? _b : {};
                             return [4 /*yield*/, Render({
@@ -4964,20 +5499,21 @@ var EntityRenderEngine;
                                     api: api,
                                     apiGetter: params.apiGetter,
                                     maxDistance: zoomItem.MaxZoom,
-                                    minDistance: zoomItem.MinZoom
+                                    minDistance: zoomItem.MinZoom,
+                                    rendered: (_c = params.rendered) === null || _c === void 0 ? void 0 : _c[entity.Bruce.ID]
                                 })];
                         case 7:
-                            cEntity = _e.sent();
+                            cEntity = _f.sent();
                             if (!cEntity) return [3 /*break*/, 9];
                             return [4 /*yield*/, getName(api, entity)];
                         case 8:
-                            name_2 = _e.sent();
+                            name_2 = _f.sent();
                             cEntity.name = name_2;
-                            cEntity._renderGroup = getRenderGroupId(zoomItem, (_c = params.viewer) === null || _c === void 0 ? void 0 : _c.terrainProvider);
-                            _e.label = 9;
+                            cEntity._renderGroup = getRenderGroupId(zoomItem, (_d = params.viewer) === null || _d === void 0 ? void 0 : _d.terrainProvider);
+                            _f.label = 9;
                         case 9:
                             cEntities[entity.Bruce.ID] = cEntity;
-                            _e.label = 10;
+                            _f.label = 10;
                         case 10:
                             i++;
                             return [3 /*break*/, 1];
@@ -5062,52 +5598,110 @@ var EntityRenderEngine;
             if (style.drapeOver == "ALL") {
                 classification = ClassificationType.BOTH;
             }
-            var cEntity = new Entity({
-                id: ObjectUtils.UId(10),
-                polyline: units == "px" ? {
-                    positions: posses,
-                    material: cColor,
-                    width: width,
-                    classificationType: classification,
-                    arcType: ArcType.GEODESIC,
-                    zIndex: getZIndex(style, entity, params.tags),
-                    clampToGround: heightRef == HeightReference.CLAMP_TO_GROUND,
-                    distanceDisplayCondition: getDisplayCondition(params.minDistance, params.maxDistance)
-                } : null,
-                corridor: units == "m" ? {
-                    positions: posses,
-                    material: cColor,
-                    width: width,
-                    classificationType: classification,
-                    heightReference: heightRef,
-                    zIndex: getZIndex(style, entity, params.tags),
-                    distanceDisplayCondition: getDisplayCondition(params.minDistance, params.maxDistance, width),
-                    cornerType: CornerType.MITERED,
-                    shadows: ShadowMode.ENABLED,
-                    fill: true
-                } : null,
-                position: EntityUtils.GetPos({
+            var cEntity = null;
+            if (!params.rendered || ((!params.rendered.polyline && units == "px") ||
+                (!params.rendered.corridor && units == "m"))) {
+                cEntity = new Entity({
+                    id: ObjectUtils.UId(10),
+                    polyline: units == "px" ? {
+                        positions: posses,
+                        material: cColor,
+                        width: width,
+                        classificationType: classification,
+                        arcType: ArcType.GEODESIC,
+                        zIndex: getZIndex(style, entity, params.tags),
+                        clampToGround: heightRef == HeightReference.CLAMP_TO_GROUND,
+                        distanceDisplayCondition: getDisplayCondition(params.minDistance, params.maxDistance)
+                    } : null,
+                    corridor: units == "m" ? {
+                        positions: posses,
+                        material: cColor,
+                        width: width,
+                        classificationType: classification,
+                        heightReference: heightRef,
+                        zIndex: getZIndex(style, entity, params.tags),
+                        distanceDisplayCondition: getDisplayCondition(params.minDistance, params.maxDistance, width),
+                        cornerType: CornerType.MITERED,
+                        shadows: ShadowMode.ENABLED,
+                        fill: true
+                    } : null,
+                    position: EntityUtils.GetPos({
+                        viewer: params.viewer,
+                        entity: entity,
+                        recordHeightRef: heightRef,
+                        returnHeightRef: heightRef
+                    }),
+                    show: true
+                });
+            }
+            else {
+                // Gather entity in case previous version had sibling graphics we no longer need.
+                var parts = EntityUtils.GatherEntity({
+                    entity: cEntity,
+                });
+                if (parts.length > 1) {
+                    // Kill all expect last part. Last one is the primary entity.
+                    for (var i = 0; i < parts.length - 1; i++) {
+                        var part = parts[i];
+                        if (part && part instanceof Entity && params.viewer.entities.contains(part)) {
+                            params.viewer.entities.remove(part);
+                        }
+                    }
+                    cEntity._siblingGraphics = [];
+                    if (cEntity._parentEntity) {
+                        console.warn("Polyline.Render: Parent entity was not null. This should not happen.");
+                    }
+                }
+                cEntity = params.rendered;
+                if (units == "px") {
+                    cEntity.polyline.positions = new ConstantProperty(posses);
+                    cEntity.polyline.width = new ConstantProperty(width);
+                    cEntity.polyline.classificationType = new ConstantProperty(classification);
+                    cEntity.polyline.zIndex = new ConstantProperty(getZIndex(style, entity, params.tags));
+                    cEntity.polyline.clampToGround = new ConstantProperty(heightRef == HeightReference.CLAMP_TO_GROUND);
+                    cEntity.polyline.distanceDisplayCondition = new ConstantProperty(getDisplayCondition(params.minDistance, params.maxDistance));
+                    cEntity.corridor = undefined;
+                }
+                else {
+                    cEntity.corridor.positions = new ConstantProperty(posses);
+                    cEntity.corridor.width = new ConstantProperty(width);
+                    cEntity.corridor.classificationType = new ConstantProperty(classification);
+                    cEntity.corridor.heightReference = new ConstantProperty(heightRef);
+                    cEntity.corridor.zIndex = new ConstantProperty(getZIndex(style, entity, params.tags));
+                    cEntity.corridor.distanceDisplayCondition = new ConstantProperty(getDisplayCondition(params.minDistance, params.maxDistance, width));
+                    cEntity.polyline = undefined;
+                }
+                // We'll use "SetDefaultColor" to updating the internal reference and to allow for an animation.
+                // WARNING: polyline does not support animation (yet?).
+                CesiumEntityStyler.SetDefaultColor({
+                    color: cColor,
+                    entity: cEntity,
+                    viewer: params.viewer,
+                    override: true,
+                    requestRender: false
+                });
+                cEntity.position = new ConstantPositionProperty(EntityUtils.GetPos({
                     viewer: params.viewer,
                     entity: entity,
                     recordHeightRef: heightRef,
                     returnHeightRef: heightRef
-                }),
-                show: true
-            });
+                }));
+                cEntity.show = true;
+            }
             return cEntity;
         }
         Polyline.Render = Render;
         function RenderGroup(params) {
-            var _a, _b, _c;
+            var _a, _b, _c, _d;
             return __awaiter(this, void 0, void 0, function () {
-                var api, cEntities, i, entity, zoomItem, style, _d, tagIds, tags, lStyle, cEntity, name_3;
-                return __generator(this, function (_e) {
-                    switch (_e.label) {
+                var api, cEntities, i, entity, zoomItem, style, _e, tagIds, tags, lStyle, cEntity, name_3;
+                return __generator(this, function (_f) {
+                    switch (_f.label) {
                         case 0:
                             api = params.apiGetter.getApi();
                             cEntities = {};
                             i = 0;
-                            _e.label = 1;
+                            _f.label = 1;
                         case 1:
                             if (!(i < params.entities.length)) return [3 /*break*/, 9];
                             entity = params.entities[i];
@@ -5115,13 +5709,13 @@ var EntityRenderEngine;
                             if (!(zoomItem.StyleID != -1)) return [3 /*break*/, 3];
                             return [4 /*yield*/, getStyle(api, entity, zoomItem.StyleID)];
                         case 2:
-                            _d = (_a = (_e.sent())) === null || _a === void 0 ? void 0 : _a.Settings;
+                            _e = (_a = (_f.sent())) === null || _a === void 0 ? void 0 : _a.Settings;
                             return [3 /*break*/, 4];
                         case 3:
-                            _d = zoomItem.Style;
-                            _e.label = 4;
+                            _e = zoomItem.Style;
+                            _f.label = 4;
                         case 4:
-                            style = _d;
+                            style = _e;
                             tagIds = entity.Bruce["Layer.ID"];
                             tags = [];
                             if (!(tagIds && tagIds.length > 0)) return [3 /*break*/, 6];
@@ -5130,8 +5724,8 @@ var EntityRenderEngine;
                                     tagIds: tagIds
                                 })];
                         case 5:
-                            tags = (_e.sent()).tags;
-                            _e.label = 6;
+                            tags = (_f.sent()).tags;
+                            _f.label = 6;
                         case 6:
                             lStyle = (_b = style === null || style === void 0 ? void 0 : style.polylineStyle) !== null && _b !== void 0 ? _b : {};
                             cEntity = Render({
@@ -5140,16 +5734,17 @@ var EntityRenderEngine;
                                 tags: tags,
                                 viewer: params.viewer,
                                 maxDistance: zoomItem.MaxZoom,
-                                minDistance: zoomItem.MinZoom
+                                minDistance: zoomItem.MinZoom,
+                                rendered: (_c = params.rendered) === null || _c === void 0 ? void 0 : _c[entity.Bruce.ID]
                             });
                             if (!cEntity) return [3 /*break*/, 8];
                             return [4 /*yield*/, getName(api, entity)];
                         case 7:
-                            name_3 = _e.sent();
+                            name_3 = _f.sent();
                             cEntity.name = name_3;
-                            cEntity._renderGroup = getRenderGroupId(zoomItem, (_c = params.viewer) === null || _c === void 0 ? void 0 : _c.terrainProvider);
+                            cEntity._renderGroup = getRenderGroupId(zoomItem, (_d = params.viewer) === null || _d === void 0 ? void 0 : _d.terrainProvider);
                             cEntities[entity.Bruce.ID] = cEntity;
-                            _e.label = 8;
+                            _f.label = 8;
                         case 8:
                             i++;
                             return [3 /*break*/, 1];
@@ -5163,7 +5758,7 @@ var EntityRenderEngine;
     var Polygon;
     (function (Polygon) {
         function Render(params) {
-            var _a, _b;
+            var _a, _b, _c, _d;
             var entity = params.entity;
             var pRings = (_a = entity.geometry) === null || _a === void 0 ? void 0 : _a.Polygon;
             if (pRings == null || pRings.length <= 0) {
@@ -5220,30 +5815,85 @@ var EntityRenderEngine;
             if (style.drapeOver == "ALL") {
                 classification = ClassificationType.BOTH;
             }
-            var cEntity = new Entity({
-                id: ObjectUtils.UId(10),
-                polygon: {
-                    hierarchy: new PolygonHierarchy(posses, holePosses.map(function (x) { return new PolygonHierarchy(x); })),
-                    material: cFillColor,
-                    extrudedHeight: extrusion.value,
-                    extrudedHeightReference: extrusion.exHeightRef,
-                    shadows: ShadowMode.ENABLED,
-                    heightReference: heightRef,
-                    classificationType: classification,
-                    perPositionHeight: heightRef == HeightReference.CLAMP_TO_GROUND ? false : true,
-                    zIndex: zIndex,
-                    distanceDisplayCondition: getDisplayCondition(params.minDistance, params.maxDistance, width <= 0 || !cLineColor || units == "m" ? size : null, true)
-                },
-                position: EntityUtils.GetPos({
+            var prepareExistingGraphic = function (cEntity, siblings) {
+                if (siblings === void 0) { siblings = 0; }
+                // Gather entity in case previous version had sibling graphics we no longer need.
+                var parts = EntityUtils.GatherEntity({
+                    entity: cEntity,
+                });
+                if (parts.length > 1) {
+                    // We'll cull all except the allowed number of siblings.
+                    cEntity._siblingGraphics = cEntity._siblingGraphics.slice(0, siblings);
+                    // We'll remove all that aren't in the allowed (direct) list.
+                    for (var i = 0; i < parts.length - 1; i++) {
+                        var part = parts[i];
+                        if (part && part instanceof Entity && params.viewer.entities.contains(part) && !cEntity._siblingGraphics.includes(part)) {
+                            params.viewer.entities.remove(part);
+                        }
+                    }
+                    if (cEntity._parentEntity) {
+                        console.warn("Point.Render: Parent entity was not null. This should not happen.");
+                    }
+                }
+            };
+            var hasOutline = width > 0 && cLineColor;
+            var cEntity = null;
+            if (!params.rendered || !params.rendered.polygon) {
+                cEntity = new Entity({
+                    id: ObjectUtils.UId(10),
+                    polygon: {
+                        hierarchy: new PolygonHierarchy(posses, holePosses.map(function (x) { return new PolygonHierarchy(x); })),
+                        material: cFillColor,
+                        extrudedHeight: extrusion.value,
+                        extrudedHeightReference: extrusion.exHeightRef,
+                        shadows: ShadowMode.ENABLED,
+                        heightReference: heightRef,
+                        classificationType: classification,
+                        perPositionHeight: heightRef == HeightReference.CLAMP_TO_GROUND ? false : true,
+                        zIndex: zIndex,
+                        distanceDisplayCondition: getDisplayCondition(params.minDistance, params.maxDistance, width <= 0 || !cLineColor || units == "m" ? size : null, true)
+                    },
+                    position: EntityUtils.GetPos({
+                        viewer: params.viewer,
+                        entity: entity,
+                        recordHeightRef: heightRef,
+                        returnHeightRef: heightRef
+                    }),
+                    show: true
+                });
+            }
+            else {
+                // Polygons can have more siblings for the related hole graphics.
+                // So this is a "good enough" way rather than perfect as it only preserves the outline.
+                prepareExistingGraphic(params.rendered, hasOutline ? 1 : 0);
+                cEntity = params.rendered;
+                cEntity.polygon.hierarchy = new ConstantProperty(new PolygonHierarchy(posses, holePosses.map(function (x) { return new PolygonHierarchy(x); })));
+                cEntity.polygon.extrudedHeight = new ConstantProperty(extrusion.value);
+                cEntity.polygon.extrudedHeightReference = new ConstantProperty(extrusion.exHeightRef);
+                cEntity.polygon.shadows = new ConstantProperty(ShadowMode.ENABLED);
+                cEntity.polygon.heightReference = new ConstantProperty(heightRef);
+                cEntity.polygon.classificationType = new ConstantProperty(classification);
+                cEntity.polygon.perPositionHeight = new ConstantProperty(heightRef == HeightReference.CLAMP_TO_GROUND ? false : true);
+                cEntity.polygon.zIndex = new ConstantProperty(zIndex);
+                cEntity.polygon.distanceDisplayCondition = new ConstantProperty(getDisplayCondition(params.minDistance, params.maxDistance, width <= 0 || !cLineColor || units == "m" ? size : null, true));
+                cEntity.position = new ConstantPositionProperty(EntityUtils.GetPos({
                     viewer: params.viewer,
                     entity: entity,
                     recordHeightRef: heightRef,
                     returnHeightRef: heightRef
-                }),
-                show: true
-            });
-            cEntity._siblingGraphics = [];
-            if (width > 0 && cLineColor) {
+                }));
+                // We'll use "SetDefaultColor" to updating the internal reference and to allow for an animation.
+                // WARNING: polygon does not support animation (yet?).
+                CesiumEntityStyler.SetDefaultColor({
+                    color: cFillColor,
+                    entity: cEntity,
+                    viewer: params.viewer,
+                    override: true,
+                    requestRender: false
+                });
+                cEntity.show = true;
+            }
+            if (hasOutline) {
                 var borderHeight = undefined;
                 if (heightRef != HeightReference.CLAMP_TO_GROUND) {
                     if (flattenPoints) {
@@ -5267,33 +5917,62 @@ var EntityRenderEngine;
                 else {
                     borderPosses = posses.map(function (x) { return x.clone ? x.clone() : __assign({}, x); });
                 }
-                var cEntityBorder = new Entity({
-                    id: ObjectUtils.UId(10),
-                    polyline: units == "px" ? new PolylineGraphics({
-                        positions: borderPosses,
-                        material: cLineColor,
-                        width: width,
-                        clampToGround: heightRef == HeightReference.CLAMP_TO_GROUND,
-                        classificationType: ClassificationType.TERRAIN,
-                        arcType: ArcType.GEODESIC,
-                        zIndex: zIndex,
-                        distanceDisplayCondition: getDisplayCondition(params.minDistance, params.maxDistance)
-                    }) : null,
-                    corridor: units == "m" ? {
-                        positions: borderPosses,
-                        material: cLineColor,
-                        heightReference: heightRef,
-                        height: borderHeight,
-                        width: width,
-                        fill: true,
-                        zIndex: zIndex + 1,
-                        cornerType: CornerType.MITERED,
-                        classificationType: classification,
-                        distanceDisplayCondition: getDisplayCondition(params.minDistance, params.maxDistance, width),
-                        shadows: ShadowMode.ENABLED
-                    } : null,
-                    show: true
-                });
+                var cEntityBorder = (_d = (_c = params.rendered) === null || _c === void 0 ? void 0 : _c._siblingGraphics) === null || _d === void 0 ? void 0 : _d[0];
+                cEntity._siblingGraphics = [];
+                if (!cEntityBorder || ((!cEntityBorder.polyline && units == "px") ||
+                    (!cEntityBorder.corridor && units == "m"))) {
+                    cEntityBorder = new Entity({
+                        id: ObjectUtils.UId(10),
+                        polyline: units == "px" ? new PolylineGraphics({
+                            positions: borderPosses,
+                            material: cLineColor,
+                            width: width,
+                            clampToGround: heightRef == HeightReference.CLAMP_TO_GROUND,
+                            classificationType: ClassificationType.TERRAIN,
+                            arcType: ArcType.GEODESIC,
+                            zIndex: zIndex,
+                            distanceDisplayCondition: getDisplayCondition(params.minDistance, params.maxDistance)
+                        }) : null,
+                        corridor: units == "m" ? {
+                            positions: borderPosses,
+                            material: cLineColor,
+                            heightReference: heightRef,
+                            height: borderHeight,
+                            width: width,
+                            fill: true,
+                            zIndex: zIndex + 1,
+                            cornerType: CornerType.MITERED,
+                            classificationType: classification,
+                            distanceDisplayCondition: getDisplayCondition(params.minDistance, params.maxDistance, width),
+                            shadows: ShadowMode.ENABLED
+                        } : null,
+                        show: true
+                    });
+                }
+                else {
+                    if (units == "px") {
+                        cEntityBorder.polyline.positions = new ConstantProperty(borderPosses);
+                        cEntityBorder.polyline.width = new ConstantProperty(width);
+                        cEntityBorder.polyline.clampToGround = new ConstantProperty(heightRef == HeightReference.CLAMP_TO_GROUND);
+                        cEntityBorder.polyline.classificationType = new ConstantProperty(ClassificationType.TERRAIN);
+                        cEntityBorder.polyline.zIndex = new ConstantProperty(zIndex);
+                        cEntityBorder.polyline.distanceDisplayCondition = new ConstantProperty(getDisplayCondition(params.minDistance, params.maxDistance));
+                        cEntityBorder.polyline.material = new ColorMaterialProperty(cLineColor);
+                        cEntityBorder.corridor = undefined;
+                    }
+                    else {
+                        cEntityBorder.corridor.positions = new ConstantProperty(borderPosses);
+                        cEntityBorder.corridor.heightReference = new ConstantProperty(heightRef);
+                        cEntityBorder.corridor.height = new ConstantProperty(borderHeight);
+                        cEntityBorder.corridor.width = new ConstantProperty(width);
+                        cEntityBorder.corridor.fill = new ConstantProperty(true);
+                        cEntityBorder.corridor.zIndex = new ConstantProperty(zIndex + 1);
+                        cEntityBorder.corridor.distanceDisplayCondition = new ConstantProperty(getDisplayCondition(params.minDistance, params.maxDistance, width));
+                        cEntityBorder.corridor.material = new ColorMaterialProperty(cLineColor);
+                        cEntityBorder.polyline = undefined;
+                    }
+                    cEntityBorder.show = true;
+                }
                 cEntityBorder._parentEntity = cEntity;
                 cEntity._siblingGraphics.push(cEntityBorder);
                 for (var i = 0; i < holePosses.length; i++) {
@@ -5330,20 +6009,23 @@ var EntityRenderEngine;
                     cEntityHole._parentEntity = cEntity;
                 }
             }
+            else {
+                cEntity._siblingGraphics = [];
+            }
             return cEntity;
         }
         Polygon.Render = Render;
         function RenderGroup(params) {
-            var _a, _b, _c;
+            var _a, _b, _c, _d;
             return __awaiter(this, void 0, void 0, function () {
-                var api, cEntities, i, entity, zoomItem, style, _d, tagIds, tags, pStyle, cEntity, name_4;
-                return __generator(this, function (_e) {
-                    switch (_e.label) {
+                var api, cEntities, i, entity, zoomItem, style, _e, tagIds, tags, pStyle, cEntity, name_4;
+                return __generator(this, function (_f) {
+                    switch (_f.label) {
                         case 0:
                             api = params.apiGetter.getApi();
                             cEntities = {};
                             i = 0;
-                            _e.label = 1;
+                            _f.label = 1;
                         case 1:
                             if (!(i < params.entities.length)) return [3 /*break*/, 9];
                             entity = params.entities[i];
@@ -5351,13 +6033,13 @@ var EntityRenderEngine;
                             if (!(zoomItem.StyleID != -1)) return [3 /*break*/, 3];
                             return [4 /*yield*/, getStyle(api, entity, zoomItem.StyleID)];
                         case 2:
-                            _d = (_a = (_e.sent())) === null || _a === void 0 ? void 0 : _a.Settings;
+                            _e = (_a = (_f.sent())) === null || _a === void 0 ? void 0 : _a.Settings;
                             return [3 /*break*/, 4];
                         case 3:
-                            _d = zoomItem.Style;
-                            _e.label = 4;
+                            _e = zoomItem.Style;
+                            _f.label = 4;
                         case 4:
-                            style = _d;
+                            style = _e;
                             tagIds = entity.Bruce["Layer.ID"];
                             tags = [];
                             if (!(tagIds && tagIds.length > 0)) return [3 /*break*/, 6];
@@ -5366,8 +6048,8 @@ var EntityRenderEngine;
                                     tagIds: tagIds
                                 })];
                         case 5:
-                            tags = (_e.sent()).tags;
-                            _e.label = 6;
+                            tags = (_f.sent()).tags;
+                            _f.label = 6;
                         case 6:
                             pStyle = (_b = style === null || style === void 0 ? void 0 : style.polygonStyle) !== null && _b !== void 0 ? _b : {};
                             cEntity = Render({
@@ -5376,16 +6058,17 @@ var EntityRenderEngine;
                                 tags: tags,
                                 viewer: params.viewer,
                                 maxDistance: zoomItem.MaxZoom,
-                                minDistance: zoomItem.MinZoom
+                                minDistance: zoomItem.MinZoom,
+                                rendered: (_c = params.rendered) === null || _c === void 0 ? void 0 : _c[entity.Bruce.ID]
                             });
                             if (!cEntity) return [3 /*break*/, 8];
                             return [4 /*yield*/, getName(api, entity)];
                         case 7:
-                            name_4 = _e.sent();
+                            name_4 = _f.sent();
                             cEntity.name = name_4;
-                            cEntity._renderGroup = getRenderGroupId(zoomItem, (_c = params.viewer) === null || _c === void 0 ? void 0 : _c.terrainProvider);
+                            cEntity._renderGroup = getRenderGroupId(zoomItem, (_d = params.viewer) === null || _d === void 0 ? void 0 : _d.terrainProvider);
                             cEntities[entity.Bruce.ID] = cEntity;
-                            _e.label = 8;
+                            _f.label = 8;
                         case 8:
                             i++;
                             return [3 /*break*/, 1];
@@ -5449,22 +6132,99 @@ var EntityRenderEngine;
                     color = colorToCColor(bColor);
                 }
             }
-            var cEntity = new Entity({
+            /*
+            const cEntity: ICesiumEntityExt = new Cesium.Entity({
                 id: ObjectUtils.UId(10),
                 model: {
                     uri: params.lodUrl,
                     heightReference: heightRef,
                     scale: scale * styleScale,
-                    shadows: ShadowMode.ENABLED,
+                    shadows: Cesium.ShadowMode.ENABLED,
                     colorBlendAmount: blendAmount,
                     colorBlendMode: blendMode,
-                    color: color,
+                    color: new Cesium.CallbackProperty(() => color, true),
                     distanceDisplayCondition: getDisplayCondition(params.minDistance, params.maxDistance)
                 },
-                orientation: new ConstantProperty(orientation),
+                orientation: new Cesium.ConstantProperty(orientation),
                 position: pos,
                 show: true
             });
+            */
+            var animateScale = null;
+            var cEntity = params.rendered;
+            if (!cEntity || !cEntity.model) {
+                cEntity = new Entity({
+                    id: ObjectUtils.UId(10),
+                    model: {
+                        uri: params.lodUrl,
+                        heightReference: heightRef,
+                        scale: new CallbackProperty(function () { return scale * styleScale; }, true),
+                        shadows: ShadowMode.ENABLED,
+                        colorBlendAmount: blendAmount,
+                        colorBlendMode: blendMode,
+                        color: new CallbackProperty(function () { return color; }, true),
+                        distanceDisplayCondition: getDisplayCondition(params.minDistance, params.maxDistance)
+                    },
+                    orientation: new ConstantProperty(orientation),
+                    position: pos,
+                    show: true
+                });
+            }
+            else {
+                // Gather entity in case previous version had sibling graphics we no longer need.
+                var parts = EntityUtils.GatherEntity({
+                    entity: cEntity,
+                });
+                if (parts.length > 1) {
+                    // Kill all expect last part. Last one is the primary entity.
+                    for (var i = 0; i < parts.length - 1; i++) {
+                        var part = parts[i];
+                        if (part && part instanceof Entity && params.viewer.entities.contains(part)) {
+                            params.viewer.entities.remove(part);
+                        }
+                    }
+                    cEntity._siblingGraphics = [];
+                    if (cEntity._parentEntity) {
+                        console.warn("Model3d.Render: Parent entity was not null. This should not happen.");
+                    }
+                }
+                var currentUri = getValue$1(params.viewer, cEntity.model.uri);
+                if (currentUri != params.lodUrl) {
+                    cEntity.model.uri = new ConstantProperty(params.lodUrl);
+                }
+                cEntity.model.heightReference = new ConstantProperty(heightRef);
+                cEntity.model.shadows = new ConstantProperty(ShadowMode.ENABLED);
+                cEntity.model.colorBlendAmount = new ConstantProperty(blendAmount);
+                cEntity.model.colorBlendMode = new ConstantProperty(blendMode);
+                cEntity.model.distanceDisplayCondition = new ConstantProperty(getDisplayCondition(params.minDistance, params.maxDistance));
+                cEntity.orientation = new ConstantProperty(orientation);
+                cEntity.position = new ConstantPositionProperty(pos);
+                // Same file but different scale. We'll animate the scale.
+                var prevClientFileId = cEntity.model._clientFileId;
+                if (prevClientFileId == params.lodClientFileId) {
+                    animateScale = new CesiumAnimatedProperty.AnimateNumber({
+                        durationMs: 200,
+                        value: scale * styleScale,
+                        viewer: params.viewer,
+                        startValue: cEntity.model.scale,
+                        startPaused: true
+                    });
+                    cEntity.model.scale = new CallbackProperty(function () { return animateScale.GetValue(); }, false);
+                }
+                else {
+                    cEntity.model.scale = new CallbackProperty(function () { return scale * styleScale; }, true);
+                }
+                // We'll use "SetDefaultColor" to updating the internal reference and to allow for an animation.
+                // cEntity.model.color = new Cesium.CallbackProperty(() => color, true);
+                CesiumEntityStyler.SetDefaultColor({
+                    color: color,
+                    entity: cEntity,
+                    viewer: params.viewer,
+                    override: true,
+                    requestRender: false
+                });
+                cEntity.show = true;
+            }
             var fileRadiusKey = "model3d_".concat(params.lodUrl, "_").concat(scale * styleScale, "_radius");
             var heightProm = _fileRadiusCache.Get(fileRadiusKey);
             if (!heightProm) {
@@ -5543,6 +6303,10 @@ var EntityRenderEngine;
                         VisualRegisterCuller.MarkShouldRecheck(params.viewer);
                     }
                 }
+                // Rough estimate on when the model is ready in the scene.
+                if (animateScale) {
+                    animateScale.Play();
+                }
             });
             var model = cEntity.model;
             model._radiusLoaded = false;
@@ -5555,16 +6319,16 @@ var EntityRenderEngine;
         }
         Model3d.Render = Render;
         function RenderGroup(params) {
-            var _a, _b, _c, _d, _e;
+            var _a, _b, _c, _d, _e, _f;
             return __awaiter(this, void 0, void 0, function () {
-                var api, cEntities, reqBody, i, entity, zoomItem, style, _f, tagIds, tags, mStyle, group, level, catId, lodData, _loop_2, i;
-                return __generator(this, function (_g) {
-                    switch (_g.label) {
+                var api, cEntities, reqBody, i, entity, zoomItem, style, _g, tagIds, tags, mStyle, group, level, catId, lodData, _loop_2, i;
+                return __generator(this, function (_h) {
+                    switch (_h.label) {
                         case 0:
                             api = params.apiGetter.getApi();
                             return [4 /*yield*/, api.Loading];
                         case 1:
-                            _g.sent();
+                            _h.sent();
                             cEntities = {};
                             reqBody = {
                                 "strict": false,
@@ -5572,7 +6336,7 @@ var EntityRenderEngine;
                                 "Items": []
                             };
                             i = 0;
-                            _g.label = 2;
+                            _h.label = 2;
                         case 2:
                             if (!(i < params.entities.length)) return [3 /*break*/, 9];
                             entity = params.entities[i];
@@ -5580,13 +6344,13 @@ var EntityRenderEngine;
                             if (!(zoomItem.StyleID != -1)) return [3 /*break*/, 4];
                             return [4 /*yield*/, getStyle(api, entity, zoomItem.StyleID)];
                         case 3:
-                            _f = (_a = (_g.sent())) === null || _a === void 0 ? void 0 : _a.Settings;
+                            _g = (_a = (_h.sent())) === null || _a === void 0 ? void 0 : _a.Settings;
                             return [3 /*break*/, 5];
                         case 4:
-                            _f = zoomItem.Style;
-                            _g.label = 5;
+                            _g = zoomItem.Style;
+                            _h.label = 5;
                         case 5:
-                            style = _f;
+                            style = _g;
                             tagIds = entity.Bruce["Layer.ID"];
                             tags = [];
                             if (!(tagIds && tagIds.length > 0)) return [3 /*break*/, 7];
@@ -5595,8 +6359,8 @@ var EntityRenderEngine;
                                     tagIds: tagIds
                                 })];
                         case 6:
-                            tags = (_g.sent()).tags;
-                            _g.label = 7;
+                            tags = (_h.sent()).tags;
+                            _h.label = 7;
                         case 7:
                             mStyle = (_b = style === null || style === void 0 ? void 0 : style.modelStyle) !== null && _b !== void 0 ? _b : {};
                             group = mStyle.lodGroup ? Calculator.GetString(mStyle.lodGroup, entity, tags) : null;
@@ -5617,7 +6381,7 @@ var EntityRenderEngine;
                                 "group": group,
                                 "level": level
                             });
-                            _g.label = 8;
+                            _h.label = 8;
                         case 8:
                             i++;
                             return [3 /*break*/, 2];
@@ -5626,24 +6390,24 @@ var EntityRenderEngine;
                                 filter: reqBody
                             })];
                         case 10:
-                            lodData = (_g.sent()).lods;
+                            lodData = (_h.sent()).lods;
                             _loop_2 = function (i) {
-                                var entity, zoomItem, style, _h, tagIds, tags, lod, mStyle, cEntity, name_5;
-                                return __generator(this, function (_j) {
-                                    switch (_j.label) {
+                                var entity, zoomItem, style, _j, tagIds, tags, lod, mStyle, cEntity, name_5;
+                                return __generator(this, function (_k) {
+                                    switch (_k.label) {
                                         case 0:
                                             entity = params.entities[i];
                                             zoomItem = params.zoomItems[entity.Bruce.ID];
                                             if (!(zoomItem.StyleID != -1)) return [3 /*break*/, 2];
                                             return [4 /*yield*/, getStyle(api, entity, zoomItem.StyleID)];
                                         case 1:
-                                            _h = (_c = (_j.sent())) === null || _c === void 0 ? void 0 : _c.Settings;
+                                            _j = (_c = (_k.sent())) === null || _c === void 0 ? void 0 : _c.Settings;
                                             return [3 /*break*/, 3];
                                         case 2:
-                                            _h = zoomItem.Style;
-                                            _j.label = 3;
+                                            _j = zoomItem.Style;
+                                            _k.label = 3;
                                         case 3:
-                                            style = _h;
+                                            style = _j;
                                             tagIds = entity.Bruce["Layer.ID"];
                                             tags = [];
                                             if (!(tagIds && tagIds.length > 0)) return [3 /*break*/, 5];
@@ -5652,8 +6416,8 @@ var EntityRenderEngine;
                                                     tagIds: tagIds
                                                 })];
                                         case 4:
-                                            tags = (_j.sent()).tags;
-                                            _j.label = 5;
+                                            tags = (_k.sent()).tags;
+                                            _k.label = 5;
                                         case 5:
                                             lod = lodData.find(function (x) { return x.entityId == entity.Bruce.ID; });
                                             if (!(lod === null || lod === void 0 ? void 0 : lod.clientFileId)) {
@@ -5661,6 +6425,7 @@ var EntityRenderEngine;
                                             }
                                             mStyle = (_d = style === null || style === void 0 ? void 0 : style.modelStyle) !== null && _d !== void 0 ? _d : {};
                                             cEntity = Render({
+                                                rendered: (_e = params.rendered) === null || _e === void 0 ? void 0 : _e[entity.Bruce.ID],
                                                 entity: entity,
                                                 style: mStyle,
                                                 tags: tags,
@@ -5677,23 +6442,23 @@ var EntityRenderEngine;
                                             if (!cEntity) return [3 /*break*/, 7];
                                             return [4 /*yield*/, getName(api, entity)];
                                         case 6:
-                                            name_5 = _j.sent();
+                                            name_5 = _k.sent();
                                             cEntity.name = name_5;
-                                            cEntity._renderGroup = getRenderGroupId(zoomItem, (_e = params.viewer) === null || _e === void 0 ? void 0 : _e.terrainProvider);
+                                            cEntity._renderGroup = getRenderGroupId(zoomItem, (_f = params.viewer) === null || _f === void 0 ? void 0 : _f.terrainProvider);
                                             cEntities[entity.Bruce.ID] = cEntity;
-                                            _j.label = 7;
+                                            _k.label = 7;
                                         case 7: return [2 /*return*/];
                                     }
                                 });
                             };
                             i = 0;
-                            _g.label = 11;
+                            _h.label = 11;
                         case 11:
                             if (!(i < params.entities.length)) return [3 /*break*/, 14];
                             return [5 /*yield**/, _loop_2(i)];
                         case 12:
-                            _g.sent();
-                            _g.label = 13;
+                            _h.sent();
+                            _h.label = 13;
                         case 13:
                             i++;
                             return [3 /*break*/, 11];
@@ -8997,7 +9762,8 @@ var EntitiesRenderManager;
                 // So for multiple tags we'll manually sort on UI end...
                 tagIds: (tagsToRender === null || tagsToRender === void 0 ? void 0 : tagsToRender.length) ? tagsToRender : [],
                 debugShowBounds: Boolean(window === null || window === void 0 ? void 0 : window.ENTITIES_RENDER_MANAGER_SHOW_BOUNDS),
-                cdn: this.item.cdnEnabled
+                cdn: this.item.cdnEnabled,
+                historicAttrKey: this.item.BruceEntity.historicAttrKey
             });
             var minMax = RenderManager.GetZoomMinMax({
                 zoomControl: this.item.CameraZoomSettings
@@ -9559,23 +10325,37 @@ var EntitiesRenderManager;
          * @returns
          */
         Manager.prototype.renderAsIndividuals = function (entities, force) {
-            var _a, _b, _c;
+            var _a, _b, _c, _d, _e, _f, _g;
             if (force === void 0) { force = false; }
             return __awaiter(this, void 0, void 0, function () {
-                var cEntities, i, entity, id, cEntity, visual, wasClustered, tagIds, rego;
-                return __generator(this, function (_d) {
-                    switch (_d.label) {
-                        case 0: return [4 /*yield*/, EntityRenderEngine.Render({
-                                viewer: this.viewer,
-                                apiGetter: this.apiGetter,
-                                entities: entities,
-                                menuItemId: this.item.id,
-                                visualRegister: this.visualsManager,
-                                zoomControl: this.item.CameraZoomSettings,
-                                force: force
-                            })];
+                var toRemove, i, entity, cEntities, i, entity, id, cEntity, visual, wasClustered, tagIds, rego;
+                return __generator(this, function (_h) {
+                    switch (_h.label) {
+                        case 0:
+                            if ((_a = this.item.BruceEntity) === null || _a === void 0 ? void 0 : _a.historicAttrKey) {
+                                toRemove = entities.filter(function (x) { var _a; return !((_a = x.Bruce) === null || _a === void 0 ? void 0 : _a.historicAttrKey); });
+                                for (i = 0; i < toRemove.length; i++) {
+                                    entity = toRemove[i];
+                                    this.visualsManager.RemoveRegos({
+                                        entityId: entity.Bruce.ID,
+                                        menuItemId: this.item.id,
+                                        requestRender: false
+                                    });
+                                    (_b = this.clustering) === null || _b === void 0 ? void 0 : _b.RemoveEntity(entity.Bruce.ID, false);
+                                }
+                                entities = entities.filter(function (x) { var _a; return !!((_a = x.Bruce) === null || _a === void 0 ? void 0 : _a.historicAttrKey); });
+                            }
+                            return [4 /*yield*/, EntityRenderEngine.Render({
+                                    viewer: this.viewer,
+                                    apiGetter: this.apiGetter,
+                                    entities: entities,
+                                    menuItemId: this.item.id,
+                                    visualRegister: this.visualsManager,
+                                    zoomControl: this.item.CameraZoomSettings,
+                                    force: force
+                                })];
                         case 1:
-                            cEntities = _d.sent();
+                            cEntities = _h.sent();
                             if (this.disposed) {
                                 this.doDispose();
                                 return [2 /*return*/];
@@ -9586,13 +10366,13 @@ var EntitiesRenderManager;
                                 cEntity = cEntities[id];
                                 this.renderedEntities[id] = !!cEntity;
                                 if (cEntity) {
-                                    visual = (_a = this.visualsManager.GetRego({
+                                    visual = (_c = this.visualsManager.GetRego({
                                         entityId: id,
                                         menuItemId: this.item.id
-                                    })) === null || _a === void 0 ? void 0 : _a.visual;
+                                    })) === null || _c === void 0 ? void 0 : _c.visual;
                                     if (!visual || visual != cEntity) {
                                         wasClustered = this.clustering ? this.clustering.AddEntity(id, cEntity, false) : false;
-                                        tagIds = (_b = entity.Bruce) === null || _b === void 0 ? void 0 : _b["Layer.ID"];
+                                        tagIds = (_d = entity.Bruce) === null || _d === void 0 ? void 0 : _d["Layer.ID"];
                                         rego = {
                                             entityId: id,
                                             menuItemId: this.item.id,
@@ -9603,7 +10383,9 @@ var EntitiesRenderManager;
                                             tagIds: tagIds ? [].concat(tagIds) : [],
                                             overrideShow: wasClustered ? false : null,
                                             name: cEntity.name,
-                                            cdn: this.item.cdnEnabled
+                                            cdn: this.item.cdnEnabled,
+                                            historicDateTime: (_e = entity.Bruce) === null || _e === void 0 ? void 0 : _e.historicDateTime,
+                                            historicAttrKey: (_f = entity.Bruce) === null || _f === void 0 ? void 0 : _f.historicAttrKey
                                         };
                                         this.visualsManager.AddRego({
                                             rego: rego,
@@ -9617,7 +10399,7 @@ var EntitiesRenderManager;
                                         menuItemId: this.item.id,
                                         requestRender: false
                                     });
-                                    (_c = this.clustering) === null || _c === void 0 ? void 0 : _c.RemoveEntity(id, false);
+                                    (_g = this.clustering) === null || _g === void 0 ? void 0 : _g.RemoveEntity(id, false);
                                 }
                             }
                             this.viewer.scene.requestRender();
@@ -11798,6 +12580,16 @@ var TilesetRenderEngine;
         };
         Styler.prototype.QueueEntities = function (entities, highPriority) {
             if (highPriority === void 0) { highPriority = false; }
+            // We set a default colour right away to avoid race conditions at later times.
+            for (var i = 0; i < entities.length; i++) {
+                var entity = entities[i];
+                this.styledEntityIds[entity.entityId] = true;
+                CesiumEntityStyler.BakeDefaultColor({
+                    entity: entity.visual,
+                    viewer: this.viewer,
+                    override: false
+                });
+            }
             for (var i = 0; i < entities.length; i++) {
                 var entity = entities[i];
                 this.queueTilesetFeatureStyle(entity, highPriority);
@@ -12829,12 +13621,13 @@ var EntityFilterGetter;
         EStatus["Loading"] = "LOADING";
     })(EStatus = EntityFilterGetter.EStatus || (EntityFilterGetter.EStatus = {}));
     var Getter = /** @class */ (function () {
-        function Getter(api, viewPort, typeId, batchSize, attrFilter, viaCdn) {
+        function Getter(api, viewer, viewPort, typeId, batchSize, attrFilter, historicAttrKey, viaCdn) {
             this.onUpdate = null;
             this.LastStateUpdates = {};
             this.onStateUpdate = null;
             this.onScanUpdate = null;
             this.viewPortChangeRemoval = null;
+            this.viewerDateTimeChangeRemoval = null;
             this.cells = null;
             this.registeredItems = {};
             this.getterLoopId = 0;
@@ -12845,10 +13638,12 @@ var EntityFilterGetter;
             this.viewCenter = null;
             this.api = api;
             this.typeId = typeId;
+            this.historicAttrKey = historicAttrKey;
             this.viaCdn = Boolean(viaCdn);
             this.batchSize = isNaN(batchSize) ? 300 : batchSize;
             this.viewPort = viewPort;
             this.attrFilter = attrFilter;
+            this.viewer = viewer;
             this.updateBounds();
         }
         Object.defineProperty(Getter.prototype, "OnUpdate", {
@@ -12887,7 +13682,14 @@ var EntityFilterGetter;
          * @returns
          */
         Getter.prototype.getIntegrityId = function () {
-            return this.tagIds == null ? "" : this.tagIds.join();
+            var integrity = this.tagIds == null ? "" : this.tagIds.join();
+            if (this.historicAttrKey) {
+                integrity += this.historicAttrKey;
+                if (this.historicAttrDateTime) {
+                    integrity += this.historicAttrDateTime;
+                }
+            }
+            return integrity;
         };
         Getter.prototype.viewAreaSub = function () {
             var _this = this;
@@ -12900,6 +13702,57 @@ var EntityFilterGetter;
         Getter.prototype.viewAreaDispose = function () {
             var _a;
             (_a = this.viewPortChangeRemoval) === null || _a === void 0 ? void 0 : _a.call(this);
+            this.viewPortChangeRemoval = null;
+        };
+        /**
+         * Monitors the Cesium viewer and updates the historic data filter values.
+         * If there is no historic attr set, this will do nothing.
+         */
+        Getter.prototype.viewerDateTimeSub = function () {
+            var _this = this;
+            this.viewerDateTimeDispose();
+            if (!this.historicAttrKey) {
+                return;
+            }
+            var delayQueue = new DelayQueue(function () {
+                var current = _this.getIntegrityId();
+                _this.updateHistoricDateTime();
+                if (current != _this.getIntegrityId()) {
+                    _this.updateState();
+                }
+            }, 250);
+            var postUpdateRemoval = this.viewer.scene.postUpdate.addEventListener(function () {
+                if (delayQueue) {
+                    delayQueue.Call();
+                }
+            });
+            this.viewerDateTimeChangeRemoval = function () {
+                delayQueue === null || delayQueue === void 0 ? void 0 : delayQueue.Dispose();
+                postUpdateRemoval === null || postUpdateRemoval === void 0 ? void 0 : postUpdateRemoval();
+                delayQueue = null;
+                postUpdateRemoval = null;
+            };
+        };
+        Getter.prototype.updateHistoricDateTime = function () {
+            var newDateTime = JulianDate.toDate(this.viewer.clock.currentTime);
+            // Has previous value. Let's compare.
+            if (this.historicAttrDateTime) {
+                var oldDateTime = new Date(this.historicAttrDateTime);
+                // Change must be at least 0.1 seconds.
+                // TODO: This is just a random value I picked. We may need to make a setting or refine this.
+                if (Math.abs(newDateTime.getTime() - oldDateTime.getTime()) < 100) {
+                    return;
+                }
+            }
+            this.historicAttrDateTime = newDateTime.toISOString();
+            // Set min/max to be the value increased/decreased by 1 minute.
+            this.historicAttrDateTimeMin = new Date(newDateTime.getTime() - 60000).toISOString();
+            this.historicAttrDateTimeMax = new Date(newDateTime.getTime() + 60000).toISOString();
+        };
+        Getter.prototype.viewerDateTimeDispose = function () {
+            var _a;
+            (_a = this.viewerDateTimeChangeRemoval) === null || _a === void 0 ? void 0 : _a.call(this);
+            this.viewerDateTimeChangeRemoval = null;
         };
         Getter.prototype.GetMenuItems = function () {
             return Object.keys(this.registeredItems);
@@ -12959,8 +13812,10 @@ var EntityFilterGetter;
                 this.minHeight = minHeight;
                 this.maxHeight = maxHeight;
                 this.updateBounds();
+                this.updateHistoricDateTime();
                 this.startGetterLoop();
                 this.viewAreaSub();
+                this.viewerDateTimeSub();
             }
             else {
                 this.getterLoopId += 1;
@@ -13056,6 +13911,9 @@ var EntityFilterGetter;
                             _j.trys.push([8, 10, , 11]);
                             return [4 /*yield*/, Entity$1.GetList({
                                     api: this.api,
+                                    historicKey: this.historicAttrKey,
+                                    historicFrom: this.historicAttrKey ? this.historicAttrDateTimeMin : null,
+                                    historicTo: this.historicAttrKey ? this.historicAttrDateTimeMax : null,
                                     filter: {
                                         pageSize: PAGE_SIZE,
                                         pageIndex: curCell.FetchPageIndex,
@@ -13153,6 +14011,7 @@ function createFilterGetterCacheKey(params) {
     cacheKey += params.batchSize;
     cacheKey += String(params.cdn);
     cacheKey += JSON.stringify(params.tagIds ? params.tagIds : []);
+    cacheKey += params.historicAttrKey ? params.historicAttrKey : "";
     // This could potentially crash, but if it crashes here then it would crash during API request anyways.
     cacheKey += JSON.stringify(params.attrFilter ? params.attrFilter : {});
     return cacheKey;
@@ -13168,7 +14027,7 @@ var SharedGetters;
             var cacheKey = createFilterGetterCacheKey(params);
             var getter = this.data[cacheKey];
             if (!getter) {
-                getter = new EntityFilterGetter.Getter(params.api, params.monitor, params.typeId, params.batchSize, params.attrFilter, params.cdn);
+                getter = new EntityFilterGetter.Getter(params.api, params.viewer, params.monitor, params.typeId, params.batchSize, params.attrFilter, params.historicAttrKey, params.cdn);
                 this.data[cacheKey] = getter;
                 /**
                  * Debug option.
@@ -22578,7 +23437,7 @@ var ViewRenderEngine;
     ViewRenderEngine.Render = Render;
 })(ViewRenderEngine || (ViewRenderEngine = {}));
 
-var VERSION = "3.7.3";
+var VERSION = "3.7.5";
 
 export { VERSION, CesiumViewMonitor, ViewerUtils, MenuItemManager, EntityRenderEngine, MenuItemCreator, VisualsRegister, RenderManager, EntitiesIdsRenderManager, EntitiesLoadedRenderManager, EntitiesRenderManager, EntityRenderManager, TilesetCadRenderManager, TilesetArbRenderManager, TilesetEntitiesRenderManager, TilesetOsmRenderManager, TilesetPointcloudRenderManager, TilesetGooglePhotosRenderManager, DataSourceStaticKmlManager, RelationsRenderManager, SharedGetters, CesiumParabola, EntityLabel, ViewRenderEngine, TileRenderEngine, TilesetRenderEngine, CESIUM_INSPECTOR_KEY, CESIUM_TIMELINE_KEY, ViewUtils, DrawingUtils, MeasureUtils, EntityUtils, CesiumEntityStyler, Draw3dPolygon, Draw3dPolyline };
 //# sourceMappingURL=bruce-cesium.es5.js.map