bruce-cesium 7.2.1 → 7.2.3

package/dist/bruce-cesium.umd.js

@@ -9033,7 +9033,8 @@
                         entityId: rego.entityId,
                         menuItemId: rego.menuItemId,
                         doUpdate: false,
-                        requestRender: false
+                        requestRender: false,
+                        keepVisual: rego.visual
                     });
                 }
                 const entityId = rego.entityId;
@@ -9326,7 +9327,9 @@
                         exports.EntityLabel.Detatch({
                             rego
                         });
-                        if (doRemove != false) {
+                        // Never tear down the graphic the caller is registering: the renderers hand back
+                        // the same object when they reuse it, so removing it here destroys what replaces it.
+                        if (doRemove != false && rego.visual !== params.keepVisual) {
                             removeEntity(this.viewer, rego.visual);
                         }
                         rego.visual = null;
@@ -9380,7 +9383,9 @@
                         exports.EntityLabel.Detatch({
                             rego
                         });
-                        if (doRemove != false) {
+                        // Never tear down the graphic the caller is registering: the renderers hand back
+                        // the same object when they reuse it, so removing it here destroys what replaces it.
+                        if (doRemove != false && rego.visual !== params.keepVisual) {
                             removeEntity(this.viewer, rego.visual);
                         }
                         rego.visual = null;
@@ -40171,6 +40176,107 @@
             data[i + 3] = Math.round(srcAlpha * maskAlpha * 255);
         }
     }
+    /**
+     * The colour a ramp gives a normalised value.
+     * @param sorted stops in ascending position, normalised into the texture's value range
+     */
+    function SampleRamp(sorted, t) {
+        let upper = 0;
+        while (upper < sorted.length && sorted[upper].position < t) {
+            upper++;
+        }
+        if (upper === 0) {
+            return sorted[0].color;
+        }
+        if (upper >= sorted.length) {
+            return sorted[sorted.length - 1].color;
+        }
+        const a = sorted[upper - 1];
+        const b = sorted[upper];
+        const span = b.position - a.position;
+        // Equal positions are a hard step rather than a division by zero, which is how a band
+        // gets a crisp edge instead of a gradient into its neighbour.
+        const f = span > 0 ? (t - a.position) / span : 1;
+        return {
+            red: a.color.red + (b.color.red - a.color.red) * f,
+            green: a.color.green + (b.color.green - a.color.green) * f,
+            blue: a.color.blue + (b.color.blue - a.color.blue) * f,
+            alpha: a.color.alpha + (b.color.alpha - a.color.alpha) * f
+        };
+    }
+    /**
+     * A ramp baked into RGBA bytes, for a shader that cannot walk stops per fragment.
+     * @param steps entries in the lookup, each covering an equal slice of the value range
+     */
+    function RampLookup(stops, low, high, steps = 256) {
+        const sorted = stops && stops.length > 0
+            ? stops.slice().sort((a, b) => a.position - b.position)
+            : null;
+        const out = new Uint8Array(steps * 4);
+        for (let i = 0; i < steps; i++) {
+            const t = steps > 1 ? i / (steps - 1) : 0;
+            const color = sorted
+                ? SampleRamp(sorted, t)
+                : {
+                    red: low.red + (high.red - low.red) * t,
+                    green: low.green + (high.green - low.green) * t,
+                    blue: low.blue + (high.blue - low.blue) * t,
+                    alpha: low.alpha + (high.alpha - low.alpha) * t
+                };
+            out[i * 4] = Math.round(color.red);
+            out[i * 4 + 1] = Math.round(color.green);
+            out[i * 4 + 2] = Math.round(color.blue);
+            out[i * 4 + 3] = Math.round(Math.min(1, Math.max(0, color.alpha)) * 255);
+        }
+        return out;
+    }
+    function ApplyGradientStops(imageData, stops) {
+        if (!stops || stops.length === 0) {
+            return;
+        }
+        const sorted = stops.slice().sort((a, b) => a.position - b.position);
+        const data = imageData.data;
+        for (let i = 0; i < data.length; i += 4) {
+            const t = data[i] / 255;
+            const color = SampleRamp(sorted, t);
+            data[i] = Math.round(color.red);
+            data[i + 1] = Math.round(color.green);
+            data[i + 2] = Math.round(color.blue);
+            const srcAlpha = data[i + 3] / 255;
+            data[i + 3] = Math.round(srcAlpha * color.alpha * 255);
+        }
+    }
+    /**
+     * Draws the texture's own cell grid into the tinted pixels.
+     *
+     * Drawn in texture space rather than screen space so it stays with the cells it describes and needs
+     * no per-frame work as the camera moves.
+     */
+    function ApplyCellBorders(imageData, cellTexels, widthTexels, color) {
+        if (!(cellTexels > 0) || !(widthTexels > 0) || !color || color.alpha <= 0) {
+            return;
+        }
+        const { width, height, data } = imageData;
+        const edge = Math.max(1, Math.round(widthTexels));
+        for (let y = 0; y < height; y++) {
+            const onRow = (y % cellTexels) < edge;
+            for (let x = 0; x < width; x++) {
+                if (!onRow && (x % cellTexels) >= edge) {
+                    continue;
+                }
+                const i = (y * width + x) * 4;
+                // Only where something is already drawn, so a border cannot invent coverage the data
+                // does not have.
+                if (data[i + 3] === 0) {
+                    continue;
+                }
+                const a = color.alpha;
+                data[i] = Math.round(data[i] * (1 - a) + color.red * a);
+                data[i + 1] = Math.round(data[i + 1] * (1 - a) + color.green * a);
+                data[i + 2] = Math.round(data[i + 2] * (1 - a) + color.blue * a);
+            }
+        }
+    }
     function loadImage(src) {
         return new Promise((res, rej) => {
             const image = new Image();
@@ -40180,28 +40286,318 @@
         });
     }
 
-    var TextureFrameSeriesAnimator;
     (function (TextureFrameSeriesAnimator) {
+        TextureFrameSeriesAnimator.LAYOUT_TILES = "tiles";
+        // The only generation this renderer draws. Anything else is refused rather than half read: the
+        // shapes differ enough that a partial reading produces a plausible wrong surface, which is worse
+        // than an empty one.
+        TextureFrameSeriesAnimator.SUPPORTED_VERSION = 3;
+        // Value in R at 8 bits, or high in R and low in G at 16.
+        TextureFrameSeriesAnimator.FORMAT_U8 = "u8";
+        TextureFrameSeriesAnimator.FORMAT_RG16 = "rg16";
+        // Declared as a field with one value, so a second mode can be added later without an absent
+        // Encoding having to mean anything.
+        TextureFrameSeriesAnimator.ENCODING_ABSOLUTE = "absolute";
+        TextureFrameSeriesAnimator.LAYER_VALUE = "Value";
+        TextureFrameSeriesAnimator.LAYER_VALUE_MIN = "ValueMin";
+        TextureFrameSeriesAnimator.LAYER_VALUE_MAX = "ValueMax";
+        TextureFrameSeriesAnimator.LAYER_BASELINE = "Baseline";
+        // The per-texel correction that was applied, published only on an archive that was transformed.
+        TextureFrameSeriesAnimator.LAYER_VALUE_SHIFT = "ValueShift";
+        /**
+         * Turns a published value map into the flat shape this renderer works in, or null when it cannot be drawn.
+         * @param published the archive's Data.generation
+         */
+        function Adapt(published) {
+            if (!published || published.Version !== TextureFrameSeriesAnimator.SUPPORTED_VERSION) {
+                const found = published && published.Version != null ? published.Version : "none";
+                const at = published && published.Identity ? published.Identity.Generated : undefined;
+                // In theory should be no files.
+                console.warn("bruce-cesium: value map version " + found + " is not supported (this build reads "
+                    + TextureFrameSeriesAnimator.SUPPORTED_VERSION + "), so nothing will be drawn for it."
+                    + (at ? " The archive was generated at " + at + " and needs regenerating." : ""));
+                return null;
+            }
+            const geometry = published.Geometry || {};
+            const tiles = published.Tiles || [];
+            if (geometry.Layout !== TextureFrameSeriesAnimator.LAYOUT_TILES || tiles.length === 0) {
+                const at = published.Identity ? published.Identity.Generated : undefined;
+                console.warn("bruce-cesium: value map declares no tiles, so nothing will be drawn for it."
+                    + (at ? " The archive was generated at " + at + " and needs regenerating." : ""));
+                return null;
+            }
+            const value = published.Value || {};
+            if (value.Encoding && value.Encoding !== TextureFrameSeriesAnimator.ENCODING_ABSOLUTE) {
+                const at = published.Identity ? published.Identity.Generated : undefined;
+                console.warn("bruce-cesium: value map encoding " + value.Encoding + " is not supported"
+                    + " (this build reads " + TextureFrameSeriesAnimator.ENCODING_ABSOLUTE + "), so nothing will be drawn for it."
+                    + (at ? " The archive was generated at " + at + " and needs regenerating." : ""));
+                return null;
+            }
+            const series = published.Series || {};
+            const layerRange = declaredRange(published, TextureFrameSeriesAnimator.LAYER_VALUE_MIN);
+            const flat = {
+                Frames: [],
+                ValueMin: value.Min,
+                ValueMax: value.Max,
+                Format: value.Format || TextureFrameSeriesAnimator.FORMAT_U8,
+                Encoding: value.Encoding || TextureFrameSeriesAnimator.ENCODING_ABSOLUTE,
+                Units: value.Units,
+                West: geometry.West,
+                East: geometry.East,
+                South: geometry.South,
+                North: geometry.North,
+                ResolutionX: geometry.ResolutionX,
+                ResolutionY: geometry.ResolutionY,
+                PixelPlacement: geometry.PixelPlacement,
+                Times: series.Times,
+                ExtremesValueMin: layerRange ? layerRange.min : undefined,
+                ExtremesValueMax: layerRange ? layerRange.max : undefined,
+                // The delivered values are what gets drawn. What the source called them, and any shift
+                // applied on the way, travel for labels and analysis rather than for placement.
+                SourceVerticalDatum: published.ValueSource ? published.ValueSource.VerticalDatum : undefined,
+                Transform: published.ValueSource ? published.ValueSource.Transform : undefined,
+                SourceUnits: published.ValueSource ? published.ValueSource.Units : undefined,
+                SourceValueMin: published.ValueSource ? published.ValueSource.Min : undefined,
+                SourceValueMax: published.ValueSource ? published.ValueSource.Max : undefined
+            };
+            flat.Tiles = tiles.map((tile) => adaptTile(tile, series.Times));
+            // The coarsest tile covers the whole extent, so it is what a caller wanting one time list reads.
+            flat.Frames = flat.Tiles[0].Frames;
+            warnIfUnshifted(published, flat);
+            return flat;
+        }
+        TextureFrameSeriesAnimator.Adapt = Adapt;
+        /*
+         * Says so when an archive's heights are not on the ellipsoid they will be drawn against.
+         */
+        function warnIfUnshifted(published, flat) {
+            const datum = flat.SourceVerticalDatum;
+            if (!datum || datum === TextureFrameSeriesAnimator.DATUM_ELLIPSOIDAL || flat.Transform) {
+                return;
+            }
+            const at = published.Identity ? published.Identity.Generated : undefined;
+            console.warn("bruce-cesium: value map heights are in " + datum + " and report no transform, so"
+                + " they are not ellipsoidal and will draw at the wrong height when placed absolutely."
+                + (at ? " The archive was generated at " + at + " and needs regenerating with the shift"
+                    + " applied." : ""));
+        }
+        /*
+         * The Min and Max a named layer declares, since a statistics layer is encoded over the true data
+         * range rather than over the frames' own.
+         */
+        function declaredRange(published, name) {
+            const layers = published.Layers || [];
+            for (const layer of layers) {
+                if (layer.Name === name && typeof layer.Min === "number" && typeof layer.Max === "number") {
+                    return { min: layer.Min, max: layer.Max };
+                }
+            }
+            return null;
+        }
+        /*
+         * One tile, with its per-time value rasters lined up against the shared time list.
+         */
+        function adaptTile(tile, times) {
+            const layers = tile.Layers || {};
+            const perTime = layers[TextureFrameSeriesAnimator.LAYER_VALUE] || [];
+            const frames = perTime.map((entry, index) => ({
+                Timestamp: times && times[index] ? times[index] : "",
+                ByteOffset: entry.Bytes.Offset,
+                ByteLength: entry.Bytes.Length
+            }));
+            return {
+                Level: tile.Level,
+                X: tile.X,
+                Y: tile.Y,
+                West: tile.West,
+                East: tile.East,
+                South: tile.South,
+                North: tile.North,
+                TexelMetres: tile.TexelMetres,
+                ResolutionX: tile.ResolutionX,
+                ResolutionY: tile.ResolutionY,
+                Frames: frames,
+                Floor: single(layers[TextureFrameSeriesAnimator.LAYER_VALUE_MIN]),
+                Ceiling: single(layers[TextureFrameSeriesAnimator.LAYER_VALUE_MAX]),
+                BaselineMask: single(layers[TextureFrameSeriesAnimator.LAYER_BASELINE])
+            };
+        }
+        function single(layer) {
+            if (!layer || !layer.Bytes) {
+                return undefined;
+            }
+            return { ByteOffset: layer.Bytes.Offset, ByteLength: layer.Bytes.Length };
+        }
+        /**
+         * How to turn a delivered value into the number the source published, or null when the archive
+         * does not say enough to do it.
+         * @param metadata the archive's Data.generation
+         */
+        function SourceMap(metadata) {
+            if (!metadata) {
+                return null;
+            }
+            const { ValueMin, ValueMax, SourceValueMin, SourceValueMax } = metadata;
+            if (typeof ValueMin !== "number" || typeof ValueMax !== "number"
+                || typeof SourceValueMin !== "number" || typeof SourceValueMax !== "number") {
+                return null;
+            }
+            const delivered = ValueMax - ValueMin;
+            // A single delivered value describes no line, so all that can be recovered is where it sits.
+            const scale = delivered !== 0 ? (SourceValueMax - SourceValueMin) / delivered : 1;
+            return { scale, offset: SourceValueMin - ValueMin * scale };
+        }
+        TextureFrameSeriesAnimator.SourceMap = SourceMap;
+        /**
+         * A delivered value in the source's own terms, or unchanged when it cannot be turned back.
+         * @param map from SourceMap(), null when the archive does not say enough
+         */
+        function ToSource(map, value) {
+            return map ? value * map.scale + map.offset : value;
+        }
+        TextureFrameSeriesAnimator.ToSource = ToSource;
+        /**
+         * Whether the archive's frames carry a 16 bit value packed across R and G.
+         *
+         * Every consumer that reads a texel has to ask: taking R alone from a packed frame yields a
+         * plausible surface quantised to 255 steps of the full range rather than an obvious failure.
+         * @param metadata the archive's Data.generation
+         */
+        function IsPackedValue(metadata) {
+            return Boolean(metadata && metadata.Format === TextureFrameSeriesAnimator.FORMAT_RG16);
+        }
+        TextureFrameSeriesAnimator.IsPackedValue = IsPackedValue;
+        /**
+         * The normalised 0 to 1 value at a texel, from whichever format the archive packed it in.
+         * @param metadata the archive's Data.generation
+         * @param pixels untinted RGBA value pixels
+         * @param at index of the texel's red channel
+         */
+        function NormalisedAt(metadata, pixels, at) {
+            if (IsPackedValue(metadata)) {
+                return (pixels[at] * 256 + pixels[at + 1]) / 65535;
+            }
+            return pixels[at] / 255;
+        }
+        TextureFrameSeriesAnimator.NormalisedAt = NormalisedAt;
+        // Values already sit on the ellipsoid Cesium measures against, so nothing is added to place them.
+        TextureFrameSeriesAnimator.DATUM_ELLIPSOIDAL = "WGS84";
+        /**
+         * Whether the values are heights against a vertical datum rather than a thickness.
+         *
+         * A thickness rises from wherever the polygon sits and a height already knows where it belongs, so
+         * this is what decides whether the polygon's own altitude may be added underneath it.
+         * @param metadata the archive's Data.generation
+         */
+        function IsDatumHeight(metadata) {
+            return Boolean(metadata && metadata.SourceVerticalDatum);
+        }
+        TextureFrameSeriesAnimator.IsDatumHeight = IsDatumHeight;
+        /**
+         * The archive's tiles, which Adapt() guarantees are present.
+         * @param metadata the archive's Data.generation
+         */
+        function TilesOf(metadata) {
+            return (metadata && metadata.Tiles) || [];
+        }
+        TextureFrameSeriesAnimator.TilesOf = TilesOf;
+        /**
+         * Turns a value in the attribute's own units into the 0 to 1 position the ramp is indexed by.
+         *
+         * Stops are authored in real units, since "hide anything under 0.1 m" is the sentence a user
+         * actually has, and the archive's own published range is what makes that expressible.
+         * @param metadata the archive's Data.generation
+         * @param value in the attribute's units
+         */
+        function NormalisePosition(metadata, value) {
+            const lo = metadata && typeof metadata.ValueMin === "number" ? metadata.ValueMin : 0;
+            const hi = metadata && typeof metadata.ValueMax === "number" ? metadata.ValueMax : 1;
+            const span = hi - lo;
+            if (!(span > 0)) {
+                return 0;
+            }
+            return Math.min(1, Math.max(0, (value - lo) / span));
+        }
+        TextureFrameSeriesAnimator.NormalisePosition = NormalisePosition;
         /**
          * Detects whether a ClientFile's `Data.generation` metadata describes a frame archive rather than a single static image,
          * so a caller can decide whether to construct an Animator or fall back to the existing static-texture path.
-         * @param data ClientFile.Data (the `IFile.Data` field), as returned by ClientFile.Get().
+         * @param data ClientFile.Data
          */
         function IsFrameArchiveMetadata(data) {
-            return Boolean(data && data.generation && Array.isArray(data.generation.Frames) && data.generation.Frames.length > 0);
+            const generation = data && data.generation;
+            if (!generation) {
+                return false;
+            }
+            return (typeof generation.Version === "number" ||
+                (Array.isArray(generation.Frames) && generation.Frames.length > 0));
         }
         TextureFrameSeriesAnimator.IsFrameArchiveMetadata = IsFrameArchiveMetadata;
-        // How far covered values bleed outward into uncovered texels before the GPU samples them.
+        // First resolvable static number out of a calculator field list, since that is all a border needs.
+        function resolveNumber(fields) {
+            if (!fields) {
+                return 0;
+            }
+            for (const field of fields) {
+                const value = Number(field && field.value);
+                if (Number.isFinite(value)) {
+                    return value;
+                }
+            }
+            return 0;
+        }
+        // First resolvable static colour out of a calculator field list.
+        function resolveColor(fields) {
+            if (!fields) {
+                return null;
+            }
+            for (const field of fields) {
+                const parsed = typeof (field === null || field === void 0 ? void 0 : field.value) === "string"
+                    ? BModels.Color.ColorFromStr(field.value)
+                    : null;
+                if (parsed) {
+                    return parsed;
+                }
+            }
+            return null;
+        }
+        /*
+         * Everything about an Animator that a style can change, as a comparable string.
+         */
+        function AppearanceSignature(options) {
+            var _a, _b, _c;
+            return JSON.stringify([
+                (_a = options.textureColorMask) !== null && _a !== void 0 ? _a : null,
+                (_b = options.cellBorder) !== null && _b !== void 0 ? _b : null,
+                (_c = options.cellTexels) !== null && _c !== void 0 ? _c : null,
+                Boolean(options.maskBaseline)
+            ]);
+        }
+        TextureFrameSeriesAnimator.AppearanceSignature = AppearanceSignature;
+        const MAX_COMPOSITE_TEXELS = 2048;
         const VALUE_DILATE_PASSES = 2;
         /*
-         * Bleeds covered values outward into uncovered texels, leaving alpha untouched.
+         * Rewrites a packed 16 bit value as the 8 bit grey the colour ramps index on.
          *
-         * The GPU samples the value texture with linear filtering, so an uncovered texel's RGB still gets
-         * averaged into the vertices next to it even though its alpha is zero. Land sits at one end of the
-         * ramp, so without this the coastline grows a row of spikes exactly where the data stops. Masking the
-         * baseline creates more of these edges, which is what makes this necessary rather than cosmetic.
+         * All three channels, since a ramp is free to read any of them and a leftover low byte in G would
+         * show up as a green cast on the one that reads them all.
+         */
+        function flattenPacked(pixels, packed) {
+            if (!packed) {
+                return;
+            }
+            for (let i = 0; i < pixels.length; i += 4) {
+                const grey = Math.round((pixels[i] * 256 + pixels[i + 1]) / 65535 * 255);
+                pixels[i] = grey;
+                pixels[i + 1] = grey;
+                pixels[i + 2] = grey;
+            }
+        }
+        /*
+         * Bleeds covered values outward into uncovered texels, leaving alpha untouched.
          */
-        function dilateValues(value, width, height, passes) {
+        function dilateValues(value, width, height, passes, packed) {
             const texels = width * height;
             const filled = new Uint8Array(texels);
             for (let p = 0; p < texels; p++) {
@@ -40225,15 +40621,25 @@
                                 if (nx < 0 || ny < 0 || nx >= width || ny >= height || !wasFilled[ny * width + nx]) {
                                     continue;
                                 }
-                                sum += source[(ny * width + nx) * 4];
+                                const at = (ny * width + nx) * 4;
+                                // Averaged as a value rather than per byte: averaging a packed low byte
+                                // on its own wraps at every 256th step and speckles the bled edge.
+                                sum += packed ? source[at] * 256 + source[at + 1] : source[at];
                                 hits++;
                             }
                         }
                         if (hits > 0) {
                             const v = Math.round(sum / hits);
-                            value[p * 4] = v;
-                            value[p * 4 + 1] = v;
-                            value[p * 4 + 2] = v;
+                            if (packed) {
+                                value[p * 4] = (v >> 8) & 255;
+                                value[p * 4 + 1] = v & 255;
+                                value[p * 4 + 2] = 0;
+                            }
+                            else {
+                                value[p * 4] = v;
+                                value[p * 4 + 1] = v;
+                                value[p * 4 + 2] = v;
+                            }
                             filled[p] = 1;
                         }
                     }
@@ -40245,7 +40651,7 @@
         const DEFAULT_HIGH_COLOR = { red: 21, green: 96, blue: 196, alpha: 0.92 };
         class Animator {
             constructor(options) {
-                var _a, _b;
+                var _a, _b, _c;
                 this.removeOnTick = null;
                 this.removeCrossfadeTick = null;
                 this.disposed = false;
@@ -40273,6 +40679,9 @@
                 this.poolIdx = 0;
                 this.valueDims = null;
                 this.presentVersion = 0;
+                this.extremesLoad = null;
+                this.floorPixels = null;
+                this.ceilingPixels = null;
                 if (!options.entity.polygon) {
                     throw new Error("TextureFrameSeriesAnimator requires an entity with polygon graphics.");
                 }
@@ -40284,16 +40693,40 @@
                 this.archiveUrl = options.archiveUrl;
                 this.frames = options.frames;
                 this.crossfadeMs = (_a = options.crossfadeMs) !== null && _a !== void 0 ? _a : DEFAULT_CROSSFADE_MS;
+                this.appearance = AppearanceSignature(options);
                 const mask = options.textureColorMask;
                 this.lowColor = (mask && BModels.Color.ColorFromStr(mask.minColor)) || DEFAULT_LOW_COLOR;
                 this.highColor = (mask && BModels.Color.ColorFromStr(mask.maxColor)) || DEFAULT_HIGH_COLOR;
+                // Positions are authored in the attribute's units and normalised once here, so the
+                // per-pixel loop stays a comparison against 0 to 1 like the two-colour path.
+                const points = mask && mask.points;
+                this.rampStops = (points && points.length > 0)
+                    ? points.map((p) => ({
+                        position: NormalisePosition(options.metadata, p.position),
+                        color: BModels.Color.ColorFromStr(p.color) || DEFAULT_LOW_COLOR
+                    }))
+                    : null;
+                const border = options.cellBorder;
+                const borderWidth = border ? resolveNumber(border.width) : 0;
+                const borderColor = border ? resolveColor(border.color) : null;
+                // Zero width or a fully transparent colour means no grid, matching how the polygon's own
+                // outline behaves, so an existing style that wants no border keeps getting none.
+                this.cellBorder = (border && borderWidth > 0 && borderColor && borderColor.alpha > 0)
+                    ? {
+                        cellTexels: Math.max(1, Math.round((_b = options.cellTexels) !== null && _b !== void 0 ? _b : 1)),
+                        widthTexels: borderWidth,
+                        color: borderColor
+                    }
+                    : null;
                 this.frameDates = this.frames.map((f) => Cesium.JulianDate.fromIso8601(f.Timestamp));
                 this.frameCache = new Array(this.frames.length).fill(null);
                 this.frameDims = new Array(this.frames.length).fill(null);
                 this.valueCache = new Array(this.frames.length).fill(null);
                 this.produceValueCanvas = Boolean(options.produceValueCanvas);
-                this.baselineMaskEntry = options.baselineMask || null;
-                this.maskBaseline = (_b = options.maskBaseline) !== null && _b !== void 0 ? _b : Boolean(options.baselineMask);
+                this.metadata = options.metadata;
+                this.drapeExtent = options.drapeExtent;
+                this.tiles = TilesOf(options.metadata);
+                this.maskBaseline = (_c = options.maskBaseline) !== null && _c !== void 0 ? _c : this.tiles.some((tile) => Boolean(tile.BaselineMask));
                 this.valueCanvas = this.produceValueCanvas ? document.createElement("canvas") : null;
                 this.driveMaterial = options.driveMaterial !== false;
                 this.originalMaterial = options.entity.polygon.material;
@@ -40329,6 +40762,10 @@
             IsDisposed() {
                 return this.disposed;
             }
+            // What this Animator was built to look like, for deciding whether it can be reused.
+            GetAppearanceSignature() {
+                return this.appearance;
+            }
             /**
              * The archive URL this instance was constructed with,
              * lets a caller re-rendering the same entity tell whether an existing instance is already correct, without reaching into private state.
@@ -40343,6 +40780,15 @@
             GetImageProperty() {
                 return this.imageProperty;
             }
+            /**
+             * The presented frame's TINTED pixels, where alpha is what the ramp actually painted.
+             *
+             * Distinct from the value canvas, whose alpha only says a texel has data. A cell can hold a
+             * reading and still be painted nothing, which is exactly what a hidden floor band does.
+             */
+            GetDisplayedPixels() {
+                return this.displayedPixels;
+            }
             /**
              * The untinted canvas carrying the presented frame's value in RGB and its coverage in alpha,
              * or null unless the instance was constructed with produceValueCanvas.
@@ -40455,10 +40901,20 @@
                 });
             }
             async fetchAndTint(idx) {
-                const entry = this.frames[idx];
-                const start = entry.ByteOffset;
-                const end = entry.ByteOffset + entry.ByteLength - 1;
-                const response = await fetch(this.archiveUrl, { headers: { Range: `bytes=${start}-${end}` } });
+                const tiles = this.tiles;
+                // Every tile's frame for one timestep sits contiguously, because the generator writes
+                // frame major. So a tiled frame is still ONE range request, not one per tile.
+                let lo = Number.MAX_SAFE_INTEGER;
+                let hi = 0;
+                for (const tile of tiles) {
+                    const at = tile.Frames[idx];
+                    if (!at) {
+                        continue;
+                    }
+                    lo = Math.min(lo, at.ByteOffset);
+                    hi = Math.max(hi, at.ByteOffset + at.ByteLength);
+                }
+                const response = await fetch(this.archiveUrl, { headers: { Range: `bytes=${lo}-${hi - 1}` } });
                 const buffer = await response.arrayBuffer();
                 if (this.disposed) {
                     return;
@@ -40469,7 +40925,7 @@
                 if (this.disposed) {
                     return;
                 }
-                const decoded = await this.decodeAndTint(buffer);
+                const decoded = await this.composeTiles(tiles, idx, buffer, lo);
                 if (this.disposed) {
                     return;
                 }
@@ -40480,39 +40936,292 @@
                     this.beginCrossfadeTo(idx);
                 }
             }
-            /**
-             * Decodes one frame's raw PNG bytes (as returned by a Range GET) and applies the grayscale color mask.
+            /*
+             * Draws every tile of one frame into a single raster covering the drape extent.
              */
-            async decodeAndTint(buffer) {
-                const blob = new Blob([buffer], { type: "image/png" });
-                const objectUrl = URL.createObjectURL(blob);
-                let image;
-                try {
-                    image = await loadImage(objectUrl);
-                }
-                finally {
-                    URL.revokeObjectURL(objectUrl);
-                }
+            async composeTiles(tiles, idx, buffer, spanStart) {
+                const target = this.compositeExtent();
+                const size = this.compositeSize(tiles, target);
                 const canvas = document.createElement("canvas");
-                canvas.width = image.width;
-                canvas.height = image.height;
+                canvas.width = size.width;
+                canvas.height = size.height;
                 const ctx = canvas.getContext("2d");
-                ctx.drawImage(image, 0, 0);
-                const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
+                ctx.imageSmoothingEnabled = false;
+                ctx.clearRect(0, 0, size.width, size.height);
+                const images = await this.decodeSlices(buffer, spanStart, tiles.map((tile) => tile.Frames[idx]));
+                for (let i = 0; i < tiles.length; i++) {
+                    const image = images[i];
+                    if (!image || this.disposed) {
+                        continue;
+                    }
+                    const at = this.tileRect(tiles[i], target, size);
+                    ctx.drawImage(image, at.x, at.y, at.w, at.h);
+                }
+                return this.tint(ctx.getImageData(0, 0, size.width, size.height));
+            }
+            /*
+             * Where a composited frame is draped, which is the polygon's rectangle when there is one.
+             */
+            compositeExtent() {
+                if (this.drapeExtent) {
+                    return this.drapeExtent;
+                }
+                const m = this.metadata;
+                return {
+                    West: m && m.West != null ? m.West : -180,
+                    East: m && m.East != null ? m.East : 180,
+                    South: m && m.South != null ? m.South : -90,
+                    North: m && m.North != null ? m.North : 90
+                };
+            }
+            /*
+             * Composite resolution, capped by what can be uploaded as a texture every frame.
+             */
+            compositeSize(tiles, target) {
+                let finest = Number.MAX_VALUE;
+                for (const tile of tiles) {
+                    if (tile.TexelMetres > 0) {
+                        finest = Math.min(finest, tile.TexelMetres);
+                    }
+                }
+                if (!(finest > 0) || finest === Number.MAX_VALUE) {
+                    finest = 1;
+                }
+                const mid = (target.South + target.North) / 2 * Math.PI / 180;
+                const widthM = Math.max((target.East - target.West) * 111320 * Math.cos(mid), 1);
+                const heightM = Math.max((target.North - target.South) * 110574, 1);
+                let width = Math.ceil(widthM / finest);
+                let height = Math.ceil(heightM / finest);
+                const longest = Math.max(width, height);
+                if (longest > MAX_COMPOSITE_TEXELS) {
+                    const shrink = MAX_COMPOSITE_TEXELS / longest;
+                    width = Math.max(1, Math.round(width * shrink));
+                    height = Math.max(1, Math.round(height * shrink));
+                }
+                return { width: Math.max(1, width), height: Math.max(1, height) };
+            }
+            /*
+             * Applies the ramp, borders and baseline mask to raw value pixels, whatever produced them.
+             */
+            tint(imageData) {
+                const canvas = { width: imageData.width, height: imageData.height };
                 // Copied before tinting: the ramp is a lerp between two colours, so the value cannot be
                 // recovered from the tinted pixels afterwards.
                 const valuePixels = this.produceValueCanvas ? new Uint8ClampedArray(imageData.data) : undefined;
-                ApplyGrayscaleColorMask(imageData, this.lowColor, this.highColor);
+                // The ramp indexes on R as an 8 bit grey, so a packed frame is flattened to one here
+                // rather than teaching every ramp function a second format.
+                // The copy above keeps the packed pair, which is what displacement and labels read.
+                flattenPacked(imageData.data, IsPackedValue(this.metadata));
+                // Stops win when supplied: they can express a band and a hidden floor, which a two
+                // colour ramp cannot. The pair stays the fallback so an older style still draws.
+                if (this.rampStops && this.rampStops.length > 0) {
+                    ApplyGradientStops(imageData, this.rampStops);
+                }
+                else {
+                    ApplyGrayscaleColorMask(imageData, this.lowColor, this.highColor);
+                }
+                if (this.cellBorder) {
+                    ApplyCellBorders(imageData, this.cellBorder.cellTexels, this.cellBorder.widthTexels, this.cellBorder.color);
+                }
                 this.applyBaselineMask(imageData.data, valuePixels, canvas.width, canvas.height);
                 if (valuePixels) {
-                    dilateValues(valuePixels, canvas.width, canvas.height, VALUE_DILATE_PASSES);
+                    dilateValues(valuePixels, canvas.width, canvas.height, VALUE_DILATE_PASSES, IsPackedValue(this.metadata));
                 }
                 return { pixels: imageData.data, width: canvas.width, height: canvas.height, valuePixels };
             }
+            /*
+             * Paints one frame's composited pixels onto a canvas.
+             */
+            writeInto(canvas, pixels, dims) {
+                canvas.width = dims.width;
+                canvas.height = dims.height;
+                const ctx = canvas.getContext("2d");
+                const image = ctx.createImageData(dims.width, dims.height);
+                image.data.set(pixels);
+                ctx.putImageData(image, 0, 0);
+            }
+            /**
+             * The archive's per-cell floor and ceiling rasters, once EnsureExtremes has resolved.
+             */
+            GetExtremes() {
+                return { floor: this.floorPixels, ceiling: this.ceilingPixels };
+            }
+            /**
+             * Fetches and decodes the floor and ceiling rasters, at most once.
+             */
+            EnsureExtremes() {
+                if (!this.extremesLoad) {
+                    this.extremesLoad = this.loadTiledExtremes();
+                }
+                return this.extremesLoad;
+            }
+            /*
+             * Composites each tile's baseline mask into one covering the composited frames.
+             */
+            async loadTiledBaselineMask() {
+                const tiles = this.tiles;
+                const entries = tiles.map((tile) => tile.BaselineMask);
+                let lo = Number.MAX_SAFE_INTEGER;
+                let hi = 0;
+                for (const at of entries) {
+                    if (!at) {
+                        continue;
+                    }
+                    lo = Math.min(lo, at.ByteOffset);
+                    hi = Math.max(hi, at.ByteOffset + at.ByteLength);
+                }
+                if (!(hi > lo)) {
+                    return;
+                }
+                try {
+                    const response = await fetch(this.archiveUrl, { headers: { Range: `bytes=${lo}-${hi - 1}` } });
+                    const block = await response.arrayBuffer();
+                    if (this.disposed) {
+                        return;
+                    }
+                    const images = await this.decodeSlices(block, lo, entries);
+                    if (this.disposed) {
+                        return;
+                    }
+                    const target = this.compositeExtent();
+                    const size = this.compositeSize(tiles, target);
+                    const canvas = document.createElement("canvas");
+                    canvas.width = size.width;
+                    canvas.height = size.height;
+                    const ctx = canvas.getContext("2d");
+                    ctx.imageSmoothingEnabled = false;
+                    ctx.clearRect(0, 0, size.width, size.height);
+                    for (let i = 0; i < tiles.length; i++) {
+                        if (!images[i]) {
+                            continue;
+                        }
+                        const at = this.tileRect(tiles[i], target, size);
+                        ctx.drawImage(images[i], at.x, at.y, at.w, at.h);
+                    }
+                    const pixels = ctx.getImageData(0, 0, size.width, size.height).data;
+                    const flags = new Uint8Array(size.width * size.height);
+                    for (let p = 0; p < flags.length; p++) {
+                        flags[p] = pixels[p * 4 + 3] >= 128 ? 1 : 0;
+                    }
+                    this.baselineFlags = flags;
+                    this.baselineDims = { width: size.width, height: size.height };
+                }
+                catch (e) {
+                    console.warn("TextureFrameSeriesAnimator: could not load the tiled baseline mask.", e);
+                }
+            }
+            /*
+             * Composites each tile's floor and ceiling into rasters matching the composited frames.
+             *
+             * A label indexes them by the same texel as the value canvas, so they have to be laid out the
+             * same way rather than fetched as whole-extent rasters.
+             */
+            async loadTiledExtremes() {
+                const tiles = this.tiles;
+                const target = this.compositeExtent();
+                const size = this.compositeSize(tiles, target);
+                // One request for the whole extremes block. They sit contiguously after the frames, so
+                // fetching per tile would be 164 round trips for an 82 tile pyramid.
+                let lo = Number.MAX_SAFE_INTEGER;
+                let hi = 0;
+                for (const tile of tiles) {
+                    for (const at of [tile.Floor, tile.Ceiling]) {
+                        if (!at) {
+                            continue;
+                        }
+                        lo = Math.min(lo, at.ByteOffset);
+                        hi = Math.max(hi, at.ByteOffset + at.ByteLength);
+                    }
+                }
+                if (!(hi > lo)) {
+                    return;
+                }
+                const response = await fetch(this.archiveUrl, { headers: { Range: `bytes=${lo}-${hi - 1}` } });
+                const block = await response.arrayBuffer();
+                if (this.disposed) {
+                    return;
+                }
+                const draw = async (pick) => {
+                    const images = await this.decodeSlices(block, lo, tiles.map(pick));
+                    if (this.disposed) {
+                        return null;
+                    }
+                    const canvas = document.createElement("canvas");
+                    canvas.width = size.width;
+                    canvas.height = size.height;
+                    const ctx = canvas.getContext("2d");
+                    ctx.imageSmoothingEnabled = false;
+                    ctx.clearRect(0, 0, size.width, size.height);
+                    let drew = false;
+                    for (let i = 0; i < tiles.length; i++) {
+                        const image = images[i];
+                        if (!image) {
+                            continue;
+                        }
+                        const at = this.tileRect(tiles[i], target, size);
+                        ctx.drawImage(image, at.x, at.y, at.w, at.h);
+                        drew = true;
+                    }
+                    return drew ? ctx.getImageData(0, 0, size.width, size.height) : null;
+                };
+                try {
+                    this.floorPixels = await draw((tile) => tile.Floor);
+                    this.ceilingPixels = await draw((tile) => tile.Ceiling);
+                }
+                catch (e) {
+                    console.warn("TextureFrameSeriesAnimator: could not load the tiled extremes.", e);
+                }
+            }
+            /*
+             * Where one tile lands on the composite, snapped to whole pixels.
+             *
+             * Rounding each edge rather than the origin and size is what makes neighbours meet exactly:
+             * a tile's right edge and the next tile's left edge round to the same pixel, so no seam of
+             * background shows between them.
+             */
+            tileRect(tile, target, size) {
+                const spanLon = target.East - target.West;
+                const spanLat = target.North - target.South;
+                const x0 = Math.round((tile.West - target.West) / spanLon * size.width);
+                const x1 = Math.round((tile.East - target.West) / spanLon * size.width);
+                const y0 = Math.round((target.North - tile.North) / spanLat * size.height);
+                const y1 = Math.round((target.North - tile.South) / spanLat * size.height);
+                return { x: x0, y: y0, w: Math.max(1, x1 - x0), h: Math.max(1, y1 - y0) };
+            }
+            /*
+             * Decodes many tile images at once.
+             *
+             * Serially awaiting each decode makes a frame cost as many round trips through the image
+             * decoder as there are tiles, which for an 82 tile pyramid is seconds rather than one.
+             */
+            decodeSlices(block, base, entries) {
+                return Promise.all(entries.map(async (at) => {
+                    if (!at) {
+                        return null;
+                    }
+                    const slice = block.slice(at.ByteOffset - base, at.ByteOffset - base + at.ByteLength);
+                    const objectUrl = URL.createObjectURL(new Blob([slice], { type: "image/png" }));
+                    try {
+                        return await loadImage(objectUrl);
+                    }
+                    catch {
+                        return null;
+                    }
+                    finally {
+                        URL.revokeObjectURL(objectUrl);
+                    }
+                }));
+            }
             /**
              * Fetches and decodes the archive's static baseline mask, at most once.
              */
             ensureBaselineMask() {
+                if (this.maskBaseline && this.tiles) {
+                    if (!this.baselineLoad) {
+                        this.baselineLoad = this.loadTiledBaselineMask();
+                    }
+                    return this.baselineLoad;
+                }
                 if (!this.maskBaseline || !this.baselineMaskEntry) {
                     return Promise.resolve();
                 }
@@ -40625,24 +41334,17 @@
             presentPixels(pixels, dims, valuePixels) {
                 this.poolIdx = 1 - this.poolIdx;
                 const target = this.pool[this.poolIdx];
-                target.width = dims.width;
-                target.height = dims.height;
-                const ctx = target.getContext("2d");
-                const imgData = ctx.createImageData(dims.width, dims.height);
-                imgData.data.set(pixels);
-                ctx.putImageData(imgData, 0, 0);
+                this.writeInto(target, pixels, dims);
                 this.displayedPixels = pixels;
                 if (this.valueCanvas && valuePixels) {
-                    this.valueCanvas.width = dims.width;
-                    this.valueCanvas.height = dims.height;
-                    const valueCtx = this.valueCanvas.getContext("2d");
-                    const valueImgData = valueCtx.createImageData(dims.width, dims.height);
-                    valueImgData.data.set(valuePixels);
-                    valueCtx.putImageData(valueImgData, 0, 0);
+                    this.writeInto(this.valueCanvas, valuePixels, dims);
                     this.displayedValuePixels = valuePixels;
                     this.valueDims = dims;
                 }
                 this.presentVersion++;
+                if (this.viewer && this.viewer.scene && this.viewer.scene.requestRenderMode) {
+                    this.viewer.scene.requestRender();
+                }
             }
         }
         TextureFrameSeriesAnimator.Animator = Animator;
@@ -40652,7 +41354,727 @@
         function Now() {
             return typeof performance !== "undefined" ? performance.now() : Date.now();
         }
-    })(TextureFrameSeriesAnimator || (TextureFrameSeriesAnimator = {}));
+    })(exports.TextureFrameSeriesAnimator || (exports.TextureFrameSeriesAnimator = {}));
+
+    (function (TextureValueLabels) {
+        // Off by default: a caller can still set a floor, but thinning is the mechanism that keeps a
+        // distant view readable.
+        const DEFAULT_MIN_CELL_PIXELS = 0;
+        const MIN_VISIBLE_PIXELS = 60;
+        const MAX_STRIDE = 512;
+        const STRIDE_HYSTERESIS = 1.4;
+        const DEFAULT_MIN_SPACING_PIXELS = 78;
+        const DEFAULT_MAX_LABELS = 240;
+        const LABEL_RADIUS = 4;
+        const LABEL_FONT = "600 11px ui-monospace, SFMono-Regular, Menlo, monospace";
+        // Clear space either side of a label box, so neighbours read as separate.
+        const LABEL_GAP_PIXELS = 16;
+        const LABEL_ANCHOR_COLOR = "rgba(255,255,255,0.85)";
+        // 8 rather than 5: below this a cell reads as texture rather than as a boundary, and it also
+        // bounds the worst case, since a full screen of 8 px cells fits inside MAX_GRID_CELLS.
+        const DEFAULT_MIN_GRID_CELL_PIXELS = 8;
+        const DEFAULT_GRID_WIDTH_PIXELS = 1;
+        // Enough for a full screen at the minimum legible cell size, with headroom for an oblique view
+        // whose texel window is larger than the screen. The budget is shared across tiles, so sizing it
+        // too tightly made the grid depend on which tile happened to be walked first.
+        const MAX_GRID_CELLS = 40000;
+        // Probes per side when hunting a labellable cell inside one lattice block.
+        const MAX_LABEL_PROBES_PER_SIDE = 8;
+        const TILE_OUTLINE_ALPHA = 0.45;
+        // Cells per grid square at the coarsest. Beyond this a tile is outlined instead.
+        const MAX_GRID_STRIDE = 256;
+        const LINE_HEIGHT = 13;
+        /**
+         * A clip outline from a projected ring, or null when the ring cannot be drawn.
+         * @param projected one entry per ring vertex, null where the vertex has no window coordinate
+         */
+        function ClipOutline(projected) {
+            if (projected.length < 3) {
+                return null;
+            }
+            const out = [];
+            for (const at of projected) {
+                if (!at) {
+                    return null;
+                }
+                out.push(at);
+            }
+            return out;
+        }
+        TextureValueLabels.ClipOutline = ClipOutline;
+        /**
+         * One cell's numbers as a label should print them, or null where the texture has no data there.
+         * @param params at is the index of the cell's red channel. sourceMap is derived from the metadata
+         * when omitted, which a caller reading many cells should hoist rather than repeat.
+         */
+        function ReadingAt(params) {
+            const { metadata, source, floor, ceiling, at } = params;
+            if (source.data[at + 3] < 128) {
+                return null;
+            }
+            const lo = metadata && typeof metadata.ValueMin === "number" ? metadata.ValueMin : 0;
+            const hi = metadata && typeof metadata.ValueMax === "number" ? metadata.ValueMax : 1;
+            const normalised = exports.TextureFrameSeriesAnimator.NormalisedAt(metadata, source.data, at);
+            const toSource = params.sourceMap !== undefined
+                ? params.sourceMap
+                : exports.TextureFrameSeriesAnimator.SourceMap(metadata);
+            const inSource = (value) => exports.TextureFrameSeriesAnimator.ToSource(toSource, value);
+            const reading = { value: inSource(lo + normalised * (hi - lo)) };
+            const eLo = metadata && metadata.ExtremesValueMin;
+            const eHi = metadata && metadata.ExtremesValueMax;
+            if (typeof eLo === "number" && typeof eHi === "number") {
+                if (floor) {
+                    reading.floor = inSource(eLo + decode16(floor.data, at) * (eHi - eLo));
+                }
+                if (ceiling) {
+                    reading.ceiling = inSource(eLo + decode16(ceiling.data, at) * (eHi - eLo));
+                }
+            }
+            return reading;
+        }
+        TextureValueLabels.ReadingAt = ReadingAt;
+        /**
+         * The unit a label's value line should name, or undefined when the archive states none.
+         * @param metadata the archive's Data.generation
+         */
+        function LabelUnits(metadata) {
+            if (!metadata) {
+                return undefined;
+            }
+            const recovered = exports.TextureFrameSeriesAnimator.SourceMap(metadata);
+            return (recovered && metadata.SourceUnits) || metadata.Units;
+        }
+        TextureValueLabels.LabelUnits = LabelUnits;
+        /**
+         * How many cells apart labels should sit, as a power of two.
+         * @param options cellPixels is one cell's size on screen, held is the stride already in use
+         */
+        function ChooseLabelStride(options) {
+            const { cellPixels, visibleCols, visibleRows, maxLabels, minSpacingPixels } = options;
+            const fits = (s, slack) => cellPixels * s >= minSpacingPixels / slack
+                && Math.ceil(visibleCols / s) * Math.ceil(visibleRows / s) <= maxLabels * slack;
+            let stride = 1;
+            while (stride < MAX_STRIDE && !fits(stride, 1)) {
+                stride *= 2;
+            }
+            const held = options.held;
+            if (held && fits(held, STRIDE_HYSTERESIS)) {
+                if (held === stride / 2 && cellPixels * held >= minSpacingPixels / STRIDE_HYSTERESIS) {
+                    return held;
+                }
+                if (held === stride * 2 && cellPixels * stride < minSpacingPixels * STRIDE_HYSTERESIS) {
+                    return held;
+                }
+            }
+            return stride;
+        }
+        TextureValueLabels.ChooseLabelStride = ChooseLabelStride;
+        class Labels {
+            constructor(options) {
+                this.sourceMap = null;
+                this.source = null;
+                this.painted = null;
+                this.floor = null;
+                this.ceiling = null;
+                this.disposed = false;
+                this.drawn = 0;
+                this.stride = 0;
+                this.viewer = options.viewer;
+                this.extent = options.extent;
+                this.settings = options.settings || {};
+                this.metadata = options.metadata;
+                // Once per overlay rather than once per cell: a label pass probes thousands of texels
+                // looking for one worth labelling, and the map cannot change while the metadata does not.
+                this.sourceMap = exports.TextureFrameSeriesAnimator.SourceMap(options.metadata);
+                this.tiles = options.tiles;
+                this.clipRing = options.clipRing;
+                this.canvas = document.createElement("canvas");
+                this.canvas.style.position = "absolute";
+                this.canvas.style.inset = "0";
+                this.canvas.style.pointerEvents = "none";
+                const parent = this.viewer.canvas.parentElement;
+                if (parent) {
+                    parent.appendChild(this.canvas);
+                }
+                this.ctx = this.canvas.getContext("2d");
+            }
+            SetExtent(extent) {
+                this.extent = extent;
+            }
+            /**
+             * The current frame's decoded values, as the animator's value canvas already provides them.
+             * @param source value pixels, one texel per cell
+             */
+            SetSource(source) {
+                this.source = source;
+            }
+            /**
+             * The tinted pixels of the same frame, so the grid can skip cells the ramp painted nothing in.
+             * @param painted RGBA of the presented frame, or null to fall back to coverage alone
+             */
+            SetPainted(painted) {
+                this.painted = painted;
+            }
+            /**
+             * The archive's per-cell extremes, when it publishes them. Without these a label can still
+             * print the current reading, just not the range behind it.
+             */
+            SetExtremes(floor, ceiling) {
+                this.floor = floor;
+                this.ceiling = ceiling;
+            }
+            GetDrawnCount() {
+                return this.drawn;
+            }
+            Clear() {
+                this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
+                this.drawn = 0;
+            }
+            Dispose() {
+                this.disposed = true;
+                if (this.canvas.parentElement) {
+                    this.canvas.parentElement.removeChild(this.canvas);
+                }
+            }
+            /**
+             * Redraws every visible label. Cheap enough to call per rendered frame, because the cell
+             * count it considers is bounded by the view rather than by the texture.
+             */
+            Render() {
+                var _a, _b, _c;
+                if (this.disposed || !this.source) {
+                    return;
+                }
+                const view = this.viewer.canvas;
+                if (this.canvas.width !== view.clientWidth || this.canvas.height !== view.clientHeight) {
+                    this.canvas.width = view.clientWidth;
+                    this.canvas.height = view.clientHeight;
+                }
+                this.Clear();
+                const cols = this.source.width;
+                const rows = this.source.height;
+                const window = this.visibleTexels(cols, rows);
+                if (!window) {
+                    return;
+                }
+                const midCol = (window.col0 + window.col1) / 2;
+                const midRow = (window.row0 + window.row1) / 2;
+                const a = this.project(this.lonAt(midCol, cols), this.latAt(midRow, rows));
+                const b = this.project(this.lonAt(midCol + 1, cols), this.latAt(midRow + 1, rows));
+                if (!a || !b) {
+                    return;
+                }
+                const cellPixels = Math.min(Math.abs(b.x - a.x), Math.abs(b.y - a.y));
+                // Ahead of the label threshold on purpose: a grid still reads at a cell size where a
+                // number no longer fits.
+                this.drawGrid(window, cols, rows, cellPixels);
+                if (cellPixels < ((_a = this.settings.minCellPixels) !== null && _a !== void 0 ? _a : DEFAULT_MIN_CELL_PIXELS)) {
+                    return;
+                }
+                const visibleWidth = cellPixels * (window.col1 - window.col0 + 1);
+                const visibleHeight = cellPixels * (window.row1 - window.row0 + 1);
+                if (Math.max(visibleWidth, visibleHeight) < MIN_VISIBLE_PIXELS) {
+                    return;
+                }
+                const parts = this.settings.parts || ["value", "floor", "ceiling"];
+                this.ctx.font = LABEL_FONT;
+                this.ctx.textAlign = "center";
+                const maxLabels = (_b = this.settings.maxLabels) !== null && _b !== void 0 ? _b : DEFAULT_MAX_LABELS;
+                this.stride = ChooseLabelStride({
+                    cellPixels,
+                    visibleCols: window.col1 - window.col0 + 1,
+                    visibleRows: window.row1 - window.row0 + 1,
+                    maxLabels,
+                    // Measured, not assumed: the spacing that keeps labels apart is whatever the widest
+                    // one is, so changing what a label says cannot quietly start overlapping them.
+                    minSpacingPixels: Math.max((_c = this.settings.minSpacingPixels) !== null && _c !== void 0 ? _c : DEFAULT_MIN_SPACING_PIXELS, this.widestLabel(parts)),
+                    held: this.stride
+                });
+                const stride = this.stride;
+                const firstRow = Math.floor(window.row0 / stride) * stride;
+                const firstCol = Math.floor(window.col0 / stride) * stride;
+                for (let row = firstRow; row <= window.row1 && this.drawn < maxLabels; row += stride) {
+                    for (let col = firstCol; col <= window.col1 && this.drawn < maxLabels; col += stride) {
+                        const found = this.readNear(col, row, cols, rows, stride);
+                        if (!found) {
+                            continue;
+                        }
+                        const point = this.project(this.lonAt(found.col, cols), this.latAt(found.row, rows));
+                        if (!point || point.x < 0 || point.y < 0
+                            || point.x > this.canvas.width || point.y > this.canvas.height) {
+                            continue;
+                        }
+                        this.drawLabel(point, found.reading, parts, this.cellOutline(found.col, found.row, cols, rows));
+                    }
+                }
+            }
+            /*
+             * Outlines each covered cell, from a projected lattice of its corners.
+             */
+            drawGrid(window, cols, rows, cellPixels) {
+                var _a, _b;
+                const color = this.settings.gridColor;
+                if (!color) {
+                    return;
+                }
+                if (this.tiles && this.tiles.length) {
+                    this.ctx.save();
+                    this.applyRingClip();
+                    this.drawTileGrid(color);
+                    this.ctx.restore();
+                    return;
+                }
+                if (cellPixels < ((_a = this.settings.minGridCellPixels) !== null && _a !== void 0 ? _a : DEFAULT_MIN_GRID_CELL_PIXELS)) {
+                    return;
+                }
+                // Corners are shared by four cells, so projecting the lattice once rather than per cell
+                // cuts the work by about four and keeps neighbouring outlines exactly coincident.
+                const wide = window.col1 - window.col0 + 1;
+                const high = window.row1 - window.row0 + 1;
+                if (wide * high > MAX_GRID_CELLS) {
+                    return;
+                }
+                const lattice = new Array((wide + 1) * (high + 1));
+                for (let r = 0; r <= high; r++) {
+                    for (let c = 0; c <= wide; c++) {
+                        // Corners sit half a texel out from the centres lonAt/latAt return.
+                        const lon = this.lonAt(window.col0 + c - 0.5, cols);
+                        const lat = this.latAt(window.row0 + r - 0.5, rows);
+                        lattice[r * (wide + 1) + c] = this.project(lon, lat);
+                    }
+                }
+                const path = new Path2D();
+                let drew = false;
+                for (let r = 0; r < high; r++) {
+                    for (let c = 0; c < wide; c++) {
+                        if (!this.isCovered(window.col0 + c, window.row0 + r, cols)) {
+                            continue;
+                        }
+                        const tl = lattice[r * (wide + 1) + c];
+                        const tr = lattice[r * (wide + 1) + c + 1];
+                        const bl = lattice[(r + 1) * (wide + 1) + c];
+                        const br = lattice[(r + 1) * (wide + 1) + c + 1];
+                        if (!tl || !tr || !bl || !br) {
+                            continue;
+                        }
+                        path.moveTo(tl.x, tl.y);
+                        path.lineTo(tr.x, tr.y);
+                        path.lineTo(br.x, br.y);
+                        path.lineTo(bl.x, bl.y);
+                        path.closePath();
+                        drew = true;
+                    }
+                }
+                if (!drew) {
+                    return;
+                }
+                this.ctx.strokeStyle = color;
+                this.ctx.lineWidth = (_b = this.settings.gridWidthPixels) !== null && _b !== void 0 ? _b : DEFAULT_GRID_WIDTH_PIXELS;
+                this.ctx.stroke(path);
+                +" alpha" + this.ctx.globalAlpha;
+            }
+            /*
+             * Restricts drawing to the polygon, so nothing is ruled over ground it does not cover.
+             */
+            applyRingClip() {
+                const ring = this.clipRing;
+                if (!ring || ring.length < 3) {
+                    return;
+                }
+                const outline = ClipOutline(ring.map(point => this.project(point.lon, point.lat)));
+                if (!outline) {
+                    return;
+                }
+                const path = new Path2D();
+                path.moveTo(outline[0].x, outline[0].y);
+                for (let i = 1; i < outline.length; i++) {
+                    path.lineTo(outline[i].x, outline[i].y);
+                }
+                path.closePath();
+                this.ctx.clip(path);
+            }
+            /*
+             * The cell of whichever tile covers a point, as screen corners.
+             */
+            tileCellOutline(lon, lat) {
+                for (const tile of this.tiles) {
+                    if (lon < tile.West || lon > tile.East || lat < tile.South || lat > tile.North) {
+                        continue;
+                    }
+                    const c = (Math.min(tile.ResolutionX - 1, Math.max(0, Math.floor((lon - tile.West) / (tile.East - tile.West) * tile.ResolutionX))));
+                    const r = (Math.min(tile.ResolutionY - 1, Math.max(0, Math.floor((tile.North - lat) / (tile.North - tile.South) * tile.ResolutionY))));
+                    const w0 = tile.West + (c / tile.ResolutionX) * (tile.East - tile.West);
+                    const w1 = tile.West + ((c + 1) / tile.ResolutionX) * (tile.East - tile.West);
+                    const n0 = tile.North - (r / tile.ResolutionY) * (tile.North - tile.South);
+                    const n1 = tile.North - ((r + 1) / tile.ResolutionY) * (tile.North - tile.South);
+                    const corners = [
+                        this.project(w0, n0), this.project(w1, n0),
+                        this.project(w1, n1), this.project(w0, n1)
+                    ];
+                    return corners.every((q) => q) ? corners : null;
+                }
+                return null;
+            }
+            /*
+             * Outlines each tile's own cells, so cell size still shows where the mesh is refined.
+             */
+            drawTileGrid(color) {
+                var _a, _b, _c;
+                const view = this.viewer.camera.computeViewRectangle(Cesium.Ellipsoid.WGS84);
+                if (!view) {
+                    return;
+                }
+                const west = Cesium.Math.toDegrees(view.west);
+                const east = Cesium.Math.toDegrees(view.east);
+                const south = Cesium.Math.toDegrees(view.south);
+                const north = Cesium.Math.toDegrees(view.north);
+                const minCell = (_a = this.settings.minGridCellPixels) !== null && _a !== void 0 ? _a : DEFAULT_MIN_GRID_CELL_PIXELS;
+                const focus = this.groundAtScreenCentre();
+                const path = new Path2D();
+                // A tile too fine to rule, or one the budget cannot afford, contributes its own outline
+                // instead of vanishing. Dropping such tiles entirely is what made whole regions blink out.
+                const coarse = new Path2D();
+                let drew = false;
+                let drewCoarse = false;
+                const outlineTile = (tile) => {
+                    const tl = this.project(tile.West, tile.North);
+                    const tr = this.project(tile.East, tile.North);
+                    const br = this.project(tile.East, tile.South);
+                    const bl = this.project(tile.West, tile.South);
+                    if (!tl || !tr || !br || !bl) {
+                        return;
+                    }
+                    coarse.moveTo(tl.x, tl.y);
+                    coarse.lineTo(tr.x, tr.y);
+                    coarse.lineTo(br.x, br.y);
+                    coarse.lineTo(bl.x, bl.y);
+                    coarse.closePath();
+                    drewCoarse = true;
+                };
+                // Planned for every visible tile BEFORE any is drawn.
+                const planned = [];
+                for (const tile of this.tiles) {
+                    if (tile.East < west || tile.West > east || tile.North < south || tile.South > north) {
+                        continue;
+                    }
+                    const c0 = Math.max(0, Math.floor((Math.max(west, tile.West) - tile.West)
+                        / (tile.East - tile.West) * tile.ResolutionX));
+                    const c1 = Math.min(tile.ResolutionX, Math.ceil((Math.min(east, tile.East) - tile.West)
+                        / (tile.East - tile.West) * tile.ResolutionX));
+                    const r0 = Math.max(0, Math.floor((tile.North - Math.min(north, tile.North))
+                        / (tile.North - tile.South) * tile.ResolutionY));
+                    const r1 = Math.min(tile.ResolutionY, Math.ceil((tile.North - Math.max(south, tile.South))
+                        / (tile.North - tile.South) * tile.ResolutionY));
+                    if (c1 <= c0 || r1 <= r0) {
+                        continue;
+                    }
+                    const focusC = focus
+                        ? Math.round((focus.lon - tile.West) / (tile.East - tile.West) * tile.ResolutionX)
+                        : Math.floor((c0 + c1) / 2);
+                    const focusR = focus
+                        ? Math.round((tile.North - focus.lat) / (tile.North - tile.South) * tile.ResolutionY)
+                        : Math.floor((r0 + r1) / 2);
+                    const midC = Math.min(c1 - 1, Math.max(c0, focusC));
+                    const midR = Math.min(r1 - 1, Math.max(r0, focusR));
+                    const cellLon = (tile.East - tile.West) / tile.ResolutionX;
+                    const cellLat = (tile.North - tile.South) / tile.ResolutionY;
+                    const at = this.project(tile.West + midC * cellLon, tile.North - midR * cellLat);
+                    const next = (this.project(tile.West + (midC + 1) * cellLon, tile.North - (midR + 1) * cellLat));
+                    if (!at || !next) {
+                        outlineTile(tile);
+                        continue;
+                    }
+                    const onScreen = Math.min(Math.abs(next.x - at.x), Math.abs(next.y - at.y));
+                    let step = 1;
+                    while (step < MAX_GRID_STRIDE && onScreen * step < minCell) {
+                        step *= 2;
+                    }
+                    if (onScreen * step < minCell) {
+                        outlineTile(tile);
+                        continue;
+                    }
+                    planned.push({ tile, c0, c1, r0, r1, step });
+                }
+                // Coarsened together rather than dropped one by one, so a busy view thins out evenly.
+                const blocksOf = (p) => Math.ceil((p.c1 - p.c0) / p.step) * Math.ceil((p.r1 - p.r0) / p.step);
+                let total = planned.reduce((sum, p) => sum + blocksOf(p), 0);
+                while (total > MAX_GRID_CELLS && planned.some((p) => p.step < MAX_GRID_STRIDE)) {
+                    for (const p of planned) {
+                        p.step = Math.min(MAX_GRID_STRIDE, p.step * 2);
+                    }
+                    total = planned.reduce((sum, p) => sum + blocksOf(p), 0);
+                }
+                for (const { tile, c0, c1, r0, r1, step } of planned) {
+                    // Anchored to the tile's own origin so lines stay on the same boundaries as the camera
+                    // moves, and so each step up is a subset of the one below it.
+                    const firstR = Math.floor(r0 / step) * step;
+                    const firstC = Math.floor(c0 / step) * step;
+                    for (let r = firstR; r < r1; r += step) {
+                        const n0 = tile.North - (r / tile.ResolutionY) * (tile.North - tile.South);
+                        const n1 = tile.North
+                            - (Math.min(r + step, tile.ResolutionY) / tile.ResolutionY) * (tile.North - tile.South);
+                        for (let c = firstC; c < c1; c += step) {
+                            const w0 = tile.West + (c / tile.ResolutionX) * (tile.East - tile.West);
+                            const w1 = tile.West
+                                + (Math.min(c + step, tile.ResolutionX) / tile.ResolutionX) * (tile.East - tile.West);
+                            if (!this.coveredAt((w0 + w1) / 2, (n0 + n1) / 2)) {
+                                continue;
+                            }
+                            const tl = this.project(w0, n0);
+                            const tr = this.project(w1, n0);
+                            const br = this.project(w1, n1);
+                            const bl = this.project(w0, n1);
+                            if (!tl || !tr || !br || !bl) {
+                                continue;
+                            }
+                            path.moveTo(tl.x, tl.y);
+                            path.lineTo(tr.x, tr.y);
+                            path.lineTo(br.x, br.y);
+                            path.lineTo(bl.x, bl.y);
+                            path.closePath();
+                            drew = true;
+                        }
+                    }
+                }
+                const gridWidth = (_b = this.settings.gridWidthPixels) !== null && _b !== void 0 ? _b : DEFAULT_GRID_WIDTH_PIXELS;
+                if (drewCoarse) {
+                    this.ctx.save();
+                    // Dimmer than a cell edge, so a tile boundary reads as "there is finer data here"
+                    // rather than as a cell in its own right.
+                    this.ctx.globalAlpha = TILE_OUTLINE_ALPHA;
+                    this.ctx.strokeStyle = color;
+                    this.ctx.lineWidth = gridWidth;
+                    this.ctx.stroke(coarse);
+                    this.ctx.restore();
+                }
+                if (!drew) {
+                    return;
+                }
+                this.ctx.strokeStyle = color;
+                this.ctx.lineWidth = (_c = this.settings.gridWidthPixels) !== null && _c !== void 0 ? _c : DEFAULT_GRID_WIDTH_PIXELS;
+                this.ctx.stroke(path);
+            }
+            /*
+             * Lon/lat of the ground at the centre of the view, or null when the centre misses the globe.
+             */
+            groundAtScreenCentre() {
+                const scene = this.viewer.scene;
+                const centre = new Cesium.Cartesian2(this.viewer.canvas.clientWidth / 2, this.viewer.canvas.clientHeight / 2);
+                const hit = scene.camera.pickEllipsoid(centre, Cesium.Ellipsoid.WGS84);
+                if (!hit) {
+                    return null;
+                }
+                const carto = Cesium.Cartographic.fromCartesian(hit);
+                return {
+                    lon: Cesium.Math.toDegrees(carto.longitude),
+                    lat: Cesium.Math.toDegrees(carto.latitude)
+                };
+            }
+            /*
+             * Whether the composited raster holds data at a lon/lat.
+             */
+            coveredAt(lon, lat) {
+                if (!this.source) {
+                    return false;
+                }
+                const cols = this.source.width;
+                const rows = this.source.height;
+                const col = Math.floor((lon - this.extent.West) / (this.extent.East - this.extent.West) * cols);
+                const row = Math.floor((this.extent.North - lat) / (this.extent.North - this.extent.South) * rows);
+                if (col < 0 || row < 0 || col >= cols || row >= rows) {
+                    return false;
+                }
+                const at = (row * cols + col) * 4 + 3;
+                // Painted, not merely covered: a dry cell holds a reading the ramp deliberately hides, and
+                // ruling a grid over it draws detail where the picture shows none.
+                if (this.painted && this.painted.length === cols * rows * 4) {
+                    return this.painted[at] > 0;
+                }
+                return this.source.data[at] >= 128;
+            }
+            isCovered(col, row, cols) {
+                return Boolean(this.source && this.source.data[(row * cols + col) * 4 + 3] >= 128);
+            }
+            /*
+             * Width of the widest label this overlay could draw, in pixels.
+             */
+            widestLabel(parts) {
+                const sample = [];
+                if (parts.indexOf("value") >= 0) {
+                    sample.push(valueLine("-000.00", LabelUnits(this.metadata)));
+                }
+                const range = [];
+                if (parts.indexOf("floor") >= 0) {
+                    range.push("min: -000.00");
+                }
+                if (parts.indexOf("ceiling") >= 0) {
+                    range.push("max: -000.00");
+                }
+                if (range.length) {
+                    sample.push(range.join(" - "));
+                }
+                if (!sample.length) {
+                    return 0;
+                }
+                const widest = Math.max(...sample.map((line) => this.ctx.measureText(line).width));
+                return widest + LABEL_GAP_PIXELS;
+            }
+            /*
+             * The four screen corners of one cell, or null if any of them will not project.
+             */
+            cellOutline(col, row, cols, rows) {
+                // On a pyramid the composited texel is not a cell. Outlining it would draw a second,
+                // uniform lattice over the tile grid, misaligned with it everywhere.
+                if (this.tiles && this.tiles.length) {
+                    return this.tileCellOutline(this.lonAt(col, cols), this.latAt(row, rows));
+                }
+                const corners = [
+                    this.project(this.lonAt(col - 0.5, cols), this.latAt(row - 0.5, rows)),
+                    this.project(this.lonAt(col + 0.5, cols), this.latAt(row - 0.5, rows)),
+                    this.project(this.lonAt(col + 0.5, cols), this.latAt(row + 0.5, rows)),
+                    this.project(this.lonAt(col - 0.5, cols), this.latAt(row + 0.5, rows))
+                ];
+                return corners.every((c) => c) ? corners : null;
+            }
+            drawLabel(point, reading, parts, outline) {
+                var _a;
+                const dp = (_a = this.settings.decimals) !== null && _a !== void 0 ? _a : (Math.abs(reading.value) < 10 ? 2 : 1);
+                const lines = [];
+                if (parts.indexOf("value") >= 0) {
+                    lines.push(valueLine(reading.value.toFixed(dp), LabelUnits(this.metadata)));
+                }
+                // Named rather than a bare pair: two numbers under a third say nothing about which is
+                // the series low and which is its high.
+                const range = [];
+                if (parts.indexOf("floor") >= 0 && reading.floor !== undefined) {
+                    range.push(`min: ${reading.floor.toFixed(dp)}`);
+                }
+                if (parts.indexOf("ceiling") >= 0 && reading.ceiling !== undefined) {
+                    range.push(`max: ${reading.ceiling.toFixed(dp)}`);
+                }
+                if (range.length) {
+                    lines.push(range.join(" - "));
+                }
+                if (!lines.length) {
+                    return;
+                }
+                if (outline) {
+                    this.ctx.strokeStyle = LABEL_ANCHOR_COLOR;
+                    this.ctx.lineWidth = 1.5;
+                    this.ctx.beginPath();
+                    this.ctx.moveTo(outline[0].x, outline[0].y);
+                    for (let i = 1; i < outline.length; i++) {
+                        this.ctx.lineTo(outline[i].x, outline[i].y);
+                    }
+                    this.ctx.closePath();
+                    this.ctx.stroke();
+                }
+                const width = Math.max(...lines.map((l) => this.ctx.measureText(l).width)) + 10;
+                const height = lines.length * LINE_HEIGHT + 6;
+                const top = point.y - height / 2;
+                this.ctx.fillStyle = "rgba(16,16,14,0.72)";
+                this.ctx.beginPath();
+                this.ctx.roundRect(point.x - width / 2, top, width, height, LABEL_RADIUS);
+                this.ctx.fill();
+                lines.forEach((line, i) => {
+                    this.ctx.fillStyle = i === 0 ? "#ffffff" : "#a8a89f";
+                    this.ctx.fillText(line, point.x, top + LINE_HEIGHT * (i + 1) - 1);
+                });
+                this.drawn++;
+            }
+            /*
+             * The first cell with a reading at or near a lattice point, searched within its own block.
+             */
+            readNear(col, row, cols, rows, stride) {
+                const direct = this.readAt(col, row, cols);
+                if (direct && this.paintedAt(col, row, cols)) {
+                    return { col, row, reading: direct };
+                }
+                if (stride <= 1) {
+                    return null;
+                }
+                // Bounded, and stepped rather than exhaustive, so a large stride cannot make this the
+                // expensive part of a frame.
+                const step = Math.max(1, Math.floor(stride / MAX_LABEL_PROBES_PER_SIDE));
+                for (let r = row; r < Math.min(rows, row + stride); r += step) {
+                    for (let c = col; c < Math.min(cols, col + stride); c += step) {
+                        const reading = this.readAt(c, r, cols);
+                        if (reading && this.paintedAt(c, r, cols)) {
+                            return { col: c, row: r, reading };
+                        }
+                    }
+                }
+                return null;
+            }
+            paintedAt(col, row, cols) {
+                if (!this.painted) {
+                    return true;
+                }
+                const at = (row * cols + col) * 4 + 3;
+                return this.painted[at] > 0;
+            }
+            // Decodes one cell, skipping anything the texture marks as having no data.
+            readAt(col, row, cols) {
+                if (!this.source) {
+                    return null;
+                }
+                return ReadingAt({
+                    metadata: this.metadata,
+                    source: this.source,
+                    floor: this.floor,
+                    ceiling: this.ceiling,
+                    at: (row * cols + col) * 4,
+                    sourceMap: this.sourceMap
+                });
+            }
+            lonAt(col, cols) {
+                return this.extent.West + ((col + 0.5) / cols) * (this.extent.East - this.extent.West);
+            }
+            latAt(row, rows) {
+                return this.extent.North - ((row + 0.5) / rows) * (this.extent.North - this.extent.South);
+            }
+            // The texel range overlapping the camera's view, so an off-screen texture costs nothing.
+            visibleTexels(cols, rows) {
+                const view = this.viewer.camera.computeViewRectangle(Cesium.Ellipsoid.WGS84);
+                if (!view) {
+                    return null;
+                }
+                const west = Math.max(this.extent.West, Cesium.Math.toDegrees(view.west));
+                const east = Math.min(this.extent.East, Cesium.Math.toDegrees(view.east));
+                const south = Math.max(this.extent.South, Cesium.Math.toDegrees(view.south));
+                const north = Math.min(this.extent.North, Cesium.Math.toDegrees(view.north));
+                if (west >= east || south >= north) {
+                    return null;
+                }
+                const spanLon = this.extent.East - this.extent.West;
+                const spanLat = this.extent.North - this.extent.South;
+                return {
+                    col0: Math.max(0, Math.floor((west - this.extent.West) / spanLon * cols) - 1),
+                    col1: Math.min(cols - 1, Math.ceil((east - this.extent.West) / spanLon * cols) + 1),
+                    row0: Math.max(0, Math.floor((this.extent.North - north) / spanLat * rows) - 1),
+                    row1: Math.min(rows - 1, Math.ceil((this.extent.North - south) / spanLat * rows) + 1)
+                };
+            }
+            project(lon, lat) {
+                const world = Cesium.Cartesian3.fromDegrees(lon, lat, 0);
+                const transforms = Cesium.SceneTransforms;
+                // Renamed in newer Cesium, and this library runs on whatever the host app supplies.
+                const fn = transforms.worldToWindowCoordinates || transforms.wgs84ToWindowCoordinates;
+                return fn ? fn.call(transforms, this.viewer.scene, world) : null;
+            }
+        }
+        TextureValueLabels.Labels = Labels;
+        /*
+         * The value line. Units go on it alone: repeating them on the range underneath doubles the widest
+         * label to say nothing, and the two lines are plainly the same quantity.
+         */
+        function valueLine(value, units) {
+            return units ? `${value} (${units})` : value;
+        }
+        function decode16(data, i) {
+            return (data[i] * 256 + data[i + 1]) / 65535;
+        }
+    })(exports.TextureValueLabels || (exports.TextureValueLabels = {}));
 
     (function (DisplacedSurfacePrimitive) {
         // Grid densities a tile can draw at, coarsest first.
@@ -40669,8 +42091,6 @@
         const SKIRT_FRACTION = 0.015;
         // Alpha below which a texel counts as no-data and is not drawn at all.
         const COVERAGE_CUTOFF = 0.35;
-        // With no exaggeration stated, the full value range is drawn as this fraction of the extent's shorter side.
-        const AUTO_RELIEF_FRACTION = 0.02;
         // Terrain is sampled on this grid and interpolated between samples.
         // Per-texel sampling would be hundreds of thousands of lookups for a surface whose own data is far coarser than that.
         const GROUND_SAMPLES_PER_SIDE = 64;
@@ -40691,6 +42111,7 @@ in float skirt;
 
 uniform sampler2D u_valueTexture;
 uniform sampler2D u_groundTexture;
+uniform float u_valuePacked;
 uniform float u_valueMin;
 uniform float u_valueRange;
 uniform float u_exaggeration;
@@ -40728,18 +42149,37 @@ float sampleGround(vec2 uv) {
     return mix(mix(h00, h10, f.x), mix(h01, h11, f.x), f.y);
 }
 
+/*
+ * The texel's normalised value, whichever way the archive packed it.
+ *
+ * A packed frame keeps the high byte in R, so reading R alone would quantise the whole range to 255
+ * steps and draw a plausible wrong surface rather than an obviously broken one.
+ *
+ * Each channel is scaled and then added, rather than reassembled to a 0..65535 integer and divided.
+ * That integer is outside the range mediump guarantees, and a fragment shader only gets highp where
+ * the device offers it, so the obvious form loses the low byte on exactly the older mobile hardware
+ * that Cesium falls back to mediump for.
+ */
+float decodeValue(vec4 texel) {
+    float packed16 = texel.r * (255.0 * 256.0 / 65535.0) + texel.g * (255.0 / 65535.0);
+    return mix(texel.r, packed16, u_valuePacked);
+}
+
 void main() {
     vec4 texel = texture(u_valueTexture, st);
     v_st = st;
-    v_value = texel.r;
+    v_value = decodeValue(texel);
     v_coverage = texel.a;
 
-    float metres = u_valueMin + texel.r * u_valueRange;
+    // Exaggeration stretches the span above the archive's minimum rather than the height itself. On an
+    // elevation the height is measured from the ellipsoid, tens of metres from any of the data, so
+    // scaling that instead translates the whole sheet underground rather than spreading it out.
+    float metres = u_valueMin + v_value * u_valueRange * u_exaggeration;
 
     // Value zero sits at the polygon's own altitude, plus the terrain underneath when the polygon
     // is following the ground rather than absolutely positioned.
     float ground = sampleGround(st) * u_groundWeight;
-    float displacement = u_baseHeight + ground + metres * u_exaggeration * texel.a - skirt * u_skirtDepth;
+    float displacement = u_baseHeight + ground + metres * texel.a - skirt * u_skirtDepth;
 
     // Added to the LOW half of the encoded position: a metre-scale offset added to the high half
     // would be lost to float32 rounding at an earth radius.
@@ -40749,10 +42189,10 @@ void main() {
 `;
         const FRAGMENT_SHADER_GLSL300 = `
 uniform sampler2D u_valueTexture;
-uniform vec4 u_lowColor;
-uniform vec4 u_highColor;
+uniform sampler2D u_rampTexture;
 uniform float u_coverageCutoff;
 uniform vec2 u_texelSize;
+uniform float u_valuePacked;
 uniform float u_valueRange;
 uniform float u_exaggeration;
 uniform float u_metresPerTexel;
@@ -40761,18 +42201,34 @@ in vec2 v_st;
 in float v_value;
 in float v_coverage;
 
+/*
+ * Scaled per channel for the same reason the vertex shader's decode is: reassembling the pair reaches
+ * 65535, which mediump does not have to represent, and this is the shader that may not get highp.
+ */
+float valueAt(vec2 uv) {
+    vec4 texel = texture(u_valueTexture, uv);
+    float packed16 = texel.r * (255.0 * 256.0 / 65535.0) + texel.g * (255.0 / 65535.0);
+    return mix(texel.r, packed16, u_valuePacked);
+}
+
 void main() {
     if (v_coverage < u_coverageCutoff) {
         discard;
     }
-    vec4 color = mix(u_lowColor, u_highColor, v_value);
+    // The ramp is baked to a lookup rather than lerped between two colours, so a banded style with a
+    // hidden floor reads the same here as it does on the flat drape.
+    // Without it this surface painted water the style hides, and the cell grid then correctly refused to outline any of it.
+    vec4 color = texture(u_rampTexture, vec2(clamp(v_value, 0.0, 1.0), 0.5));
+    if (color.a <= 0.0) {
+        discard;
+    }
 
     // Relief shading from the value gradient, so the displacement reads at a distance without
     // recomputing vertex normals every time the texture changes.
-    float left = texture(u_valueTexture, v_st - vec2(u_texelSize.x, 0.0)).r;
-    float right = texture(u_valueTexture, v_st + vec2(u_texelSize.x, 0.0)).r;
-    float down = texture(u_valueTexture, v_st - vec2(0.0, u_texelSize.y)).r;
-    float up = texture(u_valueTexture, v_st + vec2(0.0, u_texelSize.y)).r;
+    float left = valueAt(v_st - vec2(u_texelSize.x, 0.0));
+    float right = valueAt(v_st + vec2(u_texelSize.x, 0.0));
+    float down = valueAt(v_st - vec2(0.0, u_texelSize.y));
+    float up = valueAt(v_st + vec2(0.0, u_texelSize.y));
     float scale = u_valueRange * u_exaggeration;
     vec3 n = normalize(vec3((left - right) * scale, (down - up) * scale, 2.0 * u_metresPerTexel));
     float lambert = clamp(dot(n, normalize(vec3(-0.5, -0.6, 0.62))), 0.0, 1.0);
@@ -40964,6 +42420,7 @@ void main() {
                 this.show = true;
                 this.valueSource = null;
                 this.lastPresentVersion = -1;
+                this.rampTexture = null;
                 this.texture = null;
                 this.textureDirty = true;
                 this.shaderProgram = null;
@@ -40981,12 +42438,12 @@ void main() {
                 this.source = options.source || null;
                 this.valueMin = (_a = options.valueMin) !== null && _a !== void 0 ? _a : 0;
                 this.valueMax = (_b = options.valueMax) !== null && _b !== void 0 ? _b : 1;
-                this.exaggeration = (_c = options.exaggeration) !== null && _c !== void 0 ? _c : autoExaggeration(this.extent, this.valueMin, this.valueMax);
+                this.exaggeration = (_c = options.exaggeration) !== null && _c !== void 0 ? _c : 1;
                 this.baseHeight = (_d = options.baseHeight) !== null && _d !== void 0 ? _d : 0;
+                this.packedValue = Boolean(options.packedValue);
                 this.pixelPlacement = options.pixelPlacement;
                 this.tileSkirts = Boolean(options.tileSkirts);
-                this.lowColor = toCesiumColor(options.lowColor || DEFAULT_LOW_COLOR);
-                this.highColor = toCesiumColor(options.highColor || DEFAULT_HIGH_COLOR);
+                this.rampPixels = RampLookup(options.rampStops || null, options.lowColor || DEFAULT_LOW_COLOR, options.highColor || DEFAULT_HIGH_COLOR);
                 this.tiles = buildTiles(hasCoverage);
             }
             GetFollowsGround() {
@@ -41045,6 +42502,7 @@ void main() {
                     return;
                 }
                 this.syncTexture(context);
+                this.syncRampTexture(context);
                 this.requestGround();
                 this.syncGroundTexture(context);
                 // A tile needs one mesh before it has a bounding sphere to measure against.
@@ -41083,6 +42541,10 @@ void main() {
                     this.texture.destroy();
                     this.texture = null;
                 }
+                if (this.rampTexture) {
+                    this.rampTexture.destroy();
+                    this.rampTexture = null;
+                }
                 if (this.groundTexture) {
                     this.groundTexture.destroy();
                     this.groundTexture = null;
@@ -41176,6 +42638,25 @@ void main() {
                 const width = Cesium.Cartesian3.distance(southWest, southEast);
                 return Math.max(1, width / Math.max(1, this.source ? this.source.width : 1));
             }
+            syncRampTexture(context) {
+                if (this.rampTexture) {
+                    return;
+                }
+                this.rampTexture = new Cesium.Texture({
+                    context,
+                    pixelFormat: Cesium.PixelFormat.RGBA,
+                    source: { width: this.rampPixels.length / 4, height: 1,
+                        arrayBufferView: this.rampPixels },
+                    flipY: false,
+                    sampler: new Cesium.Sampler({
+                        wrapS: Cesium.TextureWrap.CLAMP_TO_EDGE,
+                        wrapT: Cesium.TextureWrap.CLAMP_TO_EDGE,
+                        // Linear across the ramp, so a gradient between stops stays smooth.
+                        minificationFilter: Cesium.TextureMinificationFilter.LINEAR,
+                        magnificationFilter: Cesium.TextureMagnificationFilter.LINEAR
+                    })
+                });
+            }
             syncTexture(context) {
                 const sizeChanged = this.texture
                     && (this.texture.width !== this.source.width || this.texture.height !== this.source.height);
@@ -41183,6 +42664,14 @@ void main() {
                     if (this.texture) {
                         this.texture.destroy();
                     }
+                    // Nearest for a packed value, because filtering would blend the two bytes of the
+                    // packing rather than the values they encode, the same trap sampleGround avoids.
+                    const minification = this.packedValue
+                        ? Cesium.TextureMinificationFilter.NEAREST
+                        : Cesium.TextureMinificationFilter.LINEAR;
+                    const magnification = this.packedValue
+                        ? Cesium.TextureMagnificationFilter.NEAREST
+                        : Cesium.TextureMagnificationFilter.LINEAR;
                     this.texture = new Cesium.Texture({
                         context,
                         source: this.source,
@@ -41192,8 +42681,8 @@ void main() {
                         sampler: new Cesium.Sampler({
                             wrapS: Cesium.TextureWrap.CLAMP_TO_EDGE,
                             wrapT: Cesium.TextureWrap.CLAMP_TO_EDGE,
-                            minificationFilter: Cesium.TextureMinificationFilter.LINEAR,
-                            magnificationFilter: Cesium.TextureMagnificationFilter.LINEAR
+                            minificationFilter: minification,
+                            magnificationFilter: magnification
                         })
                     });
                     this.textureDirty = false;
@@ -41294,6 +42783,7 @@ void main() {
                         uniformMap: {
                             u_valueTexture: () => self.texture,
                             u_groundTexture: () => self.groundTexture,
+                            u_valuePacked: () => (self.packedValue ? 1 : 0),
                             u_groundWeight: () => (self.followGround && self.groundPixels ? 1 : 0),
                             u_groundRange: () => new Cesium.Cartesian2(GROUND_MIN_METRES, GROUND_MAX_METRES),
                             u_groundSize: () => new Cesium.Cartesian2(self.groundPixels ? GROUND_SAMPLES_PER_SIDE : 1, self.groundPixels ? GROUND_SAMPLES_PER_SIDE : 1),
@@ -41306,8 +42796,7 @@ void main() {
                                 ? Math.max(2, Math.abs(self.valueMax - self.valueMin) * self.exaggeration * SKIRT_FRACTION)
                                 : 0,
                             u_coverageCutoff: () => COVERAGE_CUTOFF,
-                            u_lowColor: () => self.lowColor,
-                            u_highColor: () => self.highColor,
+                            u_rampTexture: () => self.rampTexture,
                             u_texelSize: () => new Cesium.Cartesian2(1 / self.source.width, 1 / self.source.height)
                         }
                     });
@@ -41347,33 +42836,6 @@ void main() {
             }
             return tiles;
         }
-        /**
-         * Exaggeration that makes the full value range stand AUTO_RELIEF_FRACTION of the extent tall.
-         *
-         * Derived from the whole extent rather than per tile: scaling each tile to its own size would
-         * make neighbours disagree along their shared edge and tear the surface apart.
-         * @param extent
-         * @param valueMin
-         * @param valueMax
-         */
-        function autoExaggeration(extent, valueMin, valueMax) {
-            const range = Math.abs(valueMax - valueMin);
-            if (!(range > 0)) {
-                return 1;
-            }
-            const southWest = Cesium.Cartesian3.fromDegrees(extent.West, extent.South, 0);
-            const southEast = Cesium.Cartesian3.fromDegrees(extent.East, extent.South, 0);
-            const northWest = Cesium.Cartesian3.fromDegrees(extent.West, extent.North, 0);
-            const shorterSide = Math.min(Cesium.Cartesian3.distance(southWest, southEast), Cesium.Cartesian3.distance(southWest, northWest));
-            if (!(shorterSide > 0)) {
-                return 1;
-            }
-            return (shorterSide * AUTO_RELIEF_FRACTION) / range;
-        }
-        DisplacedSurfacePrimitive.autoExaggeration = autoExaggeration;
-        function toCesiumColor(color) {
-            return new Cesium.Color(color.red / 255, color.green / 255, color.blue / 255, color.alpha);
-        }
         function now() {
             return typeof performance !== "undefined" ? performance.now() : Date.now();
         }
@@ -41381,10 +42843,11 @@ void main() {
 
     const TEXTURE_FRAME_SERIES_ANIMATOR_KEY = "TextureFrameSeriesAnimator.Animator";
     const EXTRUSION_ANIMATOR_KEY = "TextureFrameSeriesAnimator.ExtrusionAnimator";
+    const TEXTURE_VALUE_LABELS_KEY = "TextureValueLabels.Overlay";
     const DISPLACED_SURFACE_KEY = "DisplacedSurfacePrimitive.Surface";
     (function (EntityRenderEnginePolygon) {
         async function Render(params) {
-            var _a, _b, _c, _d;
+            var _a, _b, _c, _d, _e;
             const entity = params.entity;
             const style = params.style;
             const pRings = BModels.Entity.GetValue({
@@ -41435,18 +42898,22 @@ void main() {
                     console.error(`Polygon.Render: failed to resolve extrusion texture for entity ${((_b = entity === null || entity === void 0 ? void 0 : entity.Bruce) === null || _b === void 0 ? void 0 : _b.ID) || "<NONE>"}:`, e);
                 }
             }
+            const retained = params.offline
+                ? (_c = params.rendered) === null || _c === void 0 ? void 0 : _c[TEXTURE_FRAME_SERIES_ANIMATOR_KEY]
+                : null;
+            const keepsAnimator = Boolean(retained && !retained.IsDisposed());
             const drawsDisplacedSurface = Boolean(extrusionArchive);
             // The displaced surface IS the entity's fill, drawn as its own primitive at the value's height.
             // Leaving the flat polygon filled as well shows a second copy of the parcel on the ground under it.
             const hasFill = (drawsDisplacedSurface ? true
                 : fillType === BModels.Style.EPolygonFillType.Texture
-                    ? Boolean(textureDataUri || frameArchive || cFillColor.alpha > 0)
+                    ? Boolean(textureDataUri || frameArchive || keepsAnimator || cFillColor.alpha > 0)
                     : cFillColor.alpha > 0);
             const fillMaterial = drawsDisplacedSurface
                 ? Cesium.Color.WHITE.withAlpha(0)
                 : textureDataUri
                     ? new Cesium.ImageMaterialProperty({ image: textureDataUri, transparent: true })
-                    : frameArchive
+                    : (frameArchive || keepsAnimator)
                         ? Cesium.Color.WHITE.withAlpha(0)
                         : cFillColor;
             const lineColorTrace = style.lineColor ? BModels.Calculator.TraceGetColor(style.lineColor, entity, params.tags) : { value: null, effective: null };
@@ -41616,7 +43083,7 @@ void main() {
             }
             // Must run before any material is baked below: the Animator takes over polygon.material, so a bake
             // has to know whether it is baking over a live animation or over a disposed one's restored material.
-            const animator = syncTextureFrameArchive(cEntity, drawsDisplacedSurface ? null : frameArchive, params.viewer, style.textureColorMask, style.maskTextureBaseline);
+            const animator = syncTextureFrameArchive(cEntity, drawsDisplacedSurface ? null : frameArchive, params.viewer, style.textureColorMask, style.maskTextureBaseline, undefined, undefined, wantsLabels(style), params.offline, polygonBbox(posses));
             syncDisplacedSurface({
                 cEntity,
                 extrusionArchive,
@@ -41624,7 +43091,30 @@ void main() {
                 style,
                 entity,
                 heightRef,
-                outerRingPosses: posses
+                outerRingPosses: posses,
+                offline: params.offline
+            });
+            const drapeExtent = polygonBbox(posses);
+            const labelArchive = drawsDisplacedSurface ? extrusionArchive : frameArchive;
+            syncTextureValueLabels({
+                cEntity,
+                viewer: params.viewer,
+                settings: overlaySettings(style, entity, params.tags),
+                extent: labelArchive
+                    ? (drawsDisplacedSurface ? archiveExtent(labelArchive.metadata, posses) : drapeExtent)
+                    : null,
+                animator: drawsDisplacedSurface
+                    ? cEntity[EXTRUSION_ANIMATOR_KEY]
+                    : animator,
+                metadata: labelArchive ? labelArchive.metadata : undefined,
+                offline: params.offline,
+                clipRing: posses.map((pos) => {
+                    const carto = Cesium.Cartographic.fromCartesian(pos);
+                    return {
+                        lon: Cesium.Math.toDegrees(carto.longitude),
+                        lat: Cesium.Math.toDegrees(carto.latitude)
+                    };
+                })
             });
             if (animator) {
                 exports.CesiumEntityStyler.SetDefaultTextureImage({
@@ -41685,7 +43175,7 @@ void main() {
                     }
                 }
                 let borderPosses = posses.map(x => x.clone ? x.clone() : { ...x });
-                let cEntityBorder = (_d = (_c = params.rendered) === null || _c === void 0 ? void 0 : _c._siblingGraphics) === null || _d === void 0 ? void 0 : _d[0];
+                let cEntityBorder = (_e = (_d = params.rendered) === null || _d === void 0 ? void 0 : _d._siblingGraphics) === null || _e === void 0 ? void 0 : _e[0];
                 cEntity._siblingGraphics = [];
                 if (!cEntityBorder || ((!cEntityBorder.polyline && units == "px") ||
                     (!cEntityBorder.corridor && units == "m"))) {
@@ -41936,6 +43426,11 @@ void main() {
          * Disposes a cEntity's TextureFrameSeriesAnimator.Animator (if any).
          */
         function DisposeTextureFrameSeriesAnimator(cEntity, viewer) {
+            const labelOverlay = cEntity === null || cEntity === void 0 ? void 0 : cEntity[TEXTURE_VALUE_LABELS_KEY];
+            if (labelOverlay) {
+                labelOverlay.remove();
+                cEntity[TEXTURE_VALUE_LABELS_KEY] = null;
+            }
             const existing = cEntity === null || cEntity === void 0 ? void 0 : cEntity[TEXTURE_FRAME_SERIES_ANIMATOR_KEY];
             if (existing && !existing.IsDisposed()) {
                 existing.Dispose();
@@ -42061,10 +43556,13 @@ void main() {
      * @param params
      */
     function syncDisplacedSurface(params) {
-        var _a;
         const { cEntity, extrusionArchive, viewer, style, entity, heightRef, outerRingPosses } = params;
         const existingAnimator = cEntity[EXTRUSION_ANIMATOR_KEY];
         const existingSurface = cEntity[DISPLACED_SURFACE_KEY];
+        // Same reason as the fill animator: an unresolvable archive is not a removed one.
+        if (params.offline && existingSurface && !existingSurface.isDestroyed()) {
+            return;
+        }
         // Nothing to draw and nothing left over, which is every polygon that does not use this feature.
         if (!extrusionArchive && !existingAnimator && !existingSurface) {
             return;
@@ -42075,12 +43573,12 @@ void main() {
             && existingAnimator.GetArchiveUrl() === extrusionArchive.url
             && existingSurface
             && !existingSurface.isDestroyed();
-        const placement = surfacePlacement(entity, heightRef);
+        const placement = surfacePlacement(entity, heightRef, extrusionArchive && exports.TextureFrameSeriesAnimator.IsDatumHeight(extrusionArchive.metadata));
         // Whether the surface follows terrain is baked into its ground sampling, so a change there has
         // to rebuild rather than update in place.
         if (reusable && existingSurface.GetFollowsGround() === placement.followGround) {
             existingSurface.SetBaseHeight(placement.baseHeight);
-            existingSurface.SetExaggeration((_a = style.extrusionExaggeration) !== null && _a !== void 0 ? _a : exports.DisplacedSurfacePrimitive.autoExaggeration(existingSurface.GetExtent(), extrusionArchive.metadata.ValueMin, extrusionArchive.metadata.ValueMax));
+            existingSurface.SetExaggeration(exaggerationFor(style));
             return;
         }
         disposeDisplacedSurface(cEntity, viewer);
@@ -42094,7 +43592,7 @@ void main() {
         }
         // Drives the value canvas only: the surface paints the colour, so the polygon's own material is
         // left transparent rather than animated underneath it.
-        const animator = new TextureFrameSeriesAnimator.Animator({
+        const animator = new exports.TextureFrameSeriesAnimator.Animator({
             viewer,
             entity: cEntity,
             archiveUrl: extrusionArchive.url,
@@ -42102,8 +43600,8 @@ void main() {
             textureColorMask: style.textureColorMask,
             driveMaterial: false,
             produceValueCanvas: true,
-            baselineMask: extrusionArchive.metadata.BaselineMask,
-            // Off-type for the same reason as the fill path: the pinned bruce-models predates the field.
+            metadata: extrusionArchive.metadata,
+            cellTexels: 1,
             maskBaseline: style.maskTextureBaseline
         });
         cEntity[EXTRUSION_ANIMATOR_KEY] = animator;
@@ -42118,9 +43616,16 @@ void main() {
             terrainProvider: viewer && viewer.terrainProvider,
             valueMin: extrusionArchive.metadata.ValueMin,
             valueMax: extrusionArchive.metadata.ValueMax,
-            exaggeration: style.extrusionExaggeration,
+            packedValue: exports.TextureFrameSeriesAnimator.IsPackedValue(extrusionArchive.metadata),
+            exaggeration: exaggerationFor(style),
             lowColor: mask ? BModels.Color.ColorFromStr(mask.minColor) : null,
-            highColor: mask ? BModels.Color.ColorFromStr(mask.maxColor) : null
+            highColor: mask ? BModels.Color.ColorFromStr(mask.maxColor) : null,
+            // Normalised the same way the animator normalises them, so the surface and the flat drape
+            // agree about which values the style hides.
+            rampStops: ((mask && mask.points) || []).map((stop) => ({
+                position: exports.TextureFrameSeriesAnimator.NormalisePosition(extrusionArchive.metadata, stop.position),
+                color: BModels.Color.ColorFromStr(stop.color)
+            })).filter((stop) => Boolean(stop.color))
         });
         surface.BindAnimator(animator);
         viewer.scene.primitives.add(surface);
@@ -42133,7 +43638,7 @@ void main() {
      * @param entity
      * @param heightRef
      */
-    function surfacePlacement(entity, heightRef) {
+    function surfacePlacement(entity, heightRef, datumHeight) {
         const rawAltitude = BModels.Entity.GetValue({
             entity,
             path: ["Bruce", "Location", "altitude"]
@@ -42145,14 +43650,34 @@ void main() {
         if (heightRef === Cesium.HeightReference.RELATIVE_TO_GROUND) {
             return { baseHeight: altitude, followGround: true };
         }
-        return { baseHeight: altitude, followGround: false };
+        // Values that ARE heights against a datum already say where they belong, so adding the entity's
+        // altitude on top would move a measured surface off the datum it was measured against.
+        return { baseHeight: datumHeight ? 0 : altitude, followGround: false };
     }
-    /**
-     * The archive's own extent when it recorded one, otherwise the polygon's own bounds so archives
-     * generated before the extent was written still render somewhere sensible.
-     * @param metadata
-     * @param posses
+    /*
+     * The factor a displaced surface should use, which is the style's or nothing.
      */
+    function exaggerationFor(style) {
+        if (style.extrusionExaggeration != null) {
+            return style.extrusionExaggeration;
+        }
+        return 1;
+    }
+    /*
+     * The lon/lat bounding rectangle of a ring, which is the frame Cesium drapes an image material in.
+     */
+    function polygonBbox(posses) {
+        if (!posses || posses.length === 0) {
+            return undefined;
+        }
+        const rectangle = Cesium.Rectangle.fromCartesianArray(posses);
+        return {
+            West: Cesium.Math.toDegrees(rectangle.west),
+            East: Cesium.Math.toDegrees(rectangle.east),
+            South: Cesium.Math.toDegrees(rectangle.south),
+            North: Cesium.Math.toDegrees(rectangle.north)
+        };
+    }
     function archiveExtent(metadata, posses) {
         if (metadata.West != null && metadata.East != null && metadata.South != null && metadata.North != null) {
             return { West: metadata.West, East: metadata.East, South: metadata.South, North: metadata.North };
@@ -42203,9 +43728,22 @@ void main() {
      * @param viewer
      * @param textureColorMask
      */
-    function syncTextureFrameArchive(cEntity, frameArchive, viewer, textureColorMask, maskTextureBaseline) {
+    function syncTextureFrameArchive(cEntity, frameArchive, viewer, textureColorMask, maskTextureBaseline, cellBorder, cellTexels, produceValueCanvas, offline, drapeExtent) {
         const existing = cEntity[TEXTURE_FRAME_SERIES_ANIMATOR_KEY];
-        if (frameArchive && existing && !existing.IsDisposed() && existing.GetArchiveUrl() === frameArchive.url) {
+        // Offline says nothing about whether the archive changed, only that it could not be asked.
+        if (offline && existing && !existing.IsDisposed()) {
+            return existing;
+        }
+        // Appearance is part of the reuse test, not just the archive URL. Recolouring a texture-driven
+        // polygon keeps the same archive, so matching on the URL alone kept the old Animator and the
+        // style edit appeared to do nothing at all.
+        const appearance = exports.TextureFrameSeriesAnimator.AppearanceSignature({
+            textureColorMask, cellBorder, cellTexels, maskBaseline: maskTextureBaseline,
+            valueCanvas: produceValueCanvas, drape: drapeExtent
+        });
+        if (frameArchive && existing && !existing.IsDisposed()
+            && existing.GetArchiveUrl() === frameArchive.url
+            && existing.GetAppearanceSignature() === appearance) {
             return existing;
         }
         if (existing && !existing.IsDisposed()) {
@@ -42215,18 +43753,121 @@ void main() {
         if (!frameArchive) {
             return null;
         }
-        const animator = new TextureFrameSeriesAnimator.Animator({
+        const animator = new exports.TextureFrameSeriesAnimator.Animator({
             viewer,
             entity: cEntity,
             archiveUrl: frameArchive.url,
             frames: frameArchive.metadata.Frames,
             textureColorMask,
-            baselineMask: frameArchive.metadata.BaselineMask,
-            maskBaseline: maskTextureBaseline
+            metadata: frameArchive.metadata,
+            cellBorder,
+            cellTexels,
+            maskBaseline: maskTextureBaseline,
+            produceValueCanvas,
+            drapeExtent
         });
         cEntity[TEXTURE_FRAME_SERIES_ANIMATOR_KEY] = animator;
         return animator;
     }
+    /**
+     * Folds the cell-border and value-label style into the single overlay that draws both.
+     *
+     * Returns undefined when neither is asked for, which is what keeps the overlay off entirely.
+     */
+    function wantsLabels(style) {
+        const texture = style.texture;
+        return Boolean(texture && !Array.isArray(texture) && texture.label);
+    }
+    /*
+     * How the cell grid and its values are drawn, which the style does not get a say in.
+     *
+     * A white hairline reads over every ramp colour without competing with it, and the spacing and cap
+     * are what a parcel-sized archive needs to stay readable while the camera moves. Exposing them
+     * bought nothing except thresholds an author could get wrong.
+     */
+    const LABEL_GRID_COLOR = "rgba(255,255,255,0.55)";
+    const LABEL_GRID_WIDTH_PIXELS = 1;
+    const LABEL_MIN_SPACING_PIXELS = 78;
+    const LABEL_MAX_LABELS = 240;
+    function overlaySettings(style, entity, tags) {
+        if (!wantsLabels(style)) {
+            return undefined;
+        }
+        return {
+            gridColor: LABEL_GRID_COLOR,
+            gridWidthPixels: LABEL_GRID_WIDTH_PIXELS,
+            minSpacingPixels: LABEL_MIN_SPACING_PIXELS,
+            maxLabels: LABEL_MAX_LABELS
+        };
+    }
+    /**
+     * Keeps a value-label overlay in step with whichever animator is driving the polygon.
+     *
+     * Redrawn on preRender rather than on frame changes: labels are screen-space, so panning and zooming
+     * move them even when the data has not advanced at all.
+     */
+    function syncTextureValueLabels(params) {
+        const { cEntity, viewer, settings, extent, animator, metadata } = params;
+        const existing = cEntity[TEXTURE_VALUE_LABELS_KEY];
+        // Offline has no extent to rebuild the overlay from, so an existing one is left running.
+        if (params.offline && existing) {
+            return;
+        }
+        if (existing) {
+            existing.remove();
+            cEntity[TEXTURE_VALUE_LABELS_KEY] = null;
+        }
+        if (!settings || !extent || !animator) {
+            return;
+        }
+        const labels = new exports.TextureValueLabels.Labels({
+            viewer, extent, settings, metadata,
+            tiles: exports.TextureFrameSeriesAnimator.TilesOf(metadata).map((tile) => ({
+                West: tile.West, East: tile.East, South: tile.South, North: tile.North,
+                ResolutionX: tile.ResolutionX, ResolutionY: tile.ResolutionY
+            })),
+            clipRing: params.clipRing
+        });
+        let lastVersion = -1;
+        let appliedFloor = null;
+        let appliedCeiling = null;
+        // The extremes are what turn an anomaly frame back into a reading, so they are worth two extra
+        // Range GETs here even though nothing else in the render path wants them.
+        animator.EnsureExtremes();
+        const remove = viewer.scene.preRender.addEventListener(() => {
+            if (animator.IsDisposed()) {
+                return;
+            }
+            const canvas = animator.GetValueCanvas();
+            if (!canvas) {
+                return;
+            }
+            const version = animator.GetPresentVersion();
+            if (version !== lastVersion) {
+                lastVersion = version;
+                const ctx = canvas.getContext("2d");
+                labels.SetSource(ctx.getImageData(0, 0, canvas.width, canvas.height));
+                labels.SetPainted(animator.GetDisplayedPixels());
+            }
+            // Tracked by reference rather than latched on the first one to arrive: a tiled archive
+            // composites the floor and the ceiling separately, so latching once would leave every label
+            // showing a minimum and no maximum.
+            const extremes = animator.GetExtremes();
+            if (extremes.floor !== appliedFloor || extremes.ceiling !== appliedCeiling) {
+                appliedFloor = extremes.floor;
+                appliedCeiling = extremes.ceiling;
+                labels.SetExtremes(appliedFloor, appliedCeiling);
+            }
+            labels.Render();
+        });
+        cEntity[TEXTURE_VALUE_LABELS_KEY] = {
+            labels,
+            remove: () => {
+                remove();
+                labels.Dispose();
+            }
+        };
+    }
     /**
      * Derives a min/max/label time-range segment from a resolved frame archive's Frames metadata,
      * for reporting up to whoever owns the menu item this entity belongs to (see IParams.onSeriesDiscovered).
@@ -42317,11 +43958,15 @@ void main() {
                 const { clientFile } = await BModels.ClientFile.Get({ api, fileId: clientFileId });
                 url = clientFile.URL;
                 const clientFileData = clientFile.Data;
-                if (TextureFrameSeriesAnimator.IsFrameArchiveMetadata(clientFileData)) {
+                if (exports.TextureFrameSeriesAnimator.IsFrameArchiveMetadata(clientFileData)) {
+                    const adapted = exports.TextureFrameSeriesAnimator.Adapt(clientFileData.generation);
+                    if (!adapted) {
+                        return { dataUri: null, effective: textureTrace.effective };
+                    }
                     return {
                         dataUri: null,
                         effective: textureTrace.effective,
-                        frameArchive: { url, metadata: clientFileData.generation }
+                        frameArchive: { url, metadata: adapted }
                     };
                 }
             }
@@ -42349,8 +43994,12 @@ void main() {
         }
         const url = clientFile.URL;
         const clientFileData = clientFile.Data;
-        if (TextureFrameSeriesAnimator.IsFrameArchiveMetadata(clientFileData)) {
-            return { dataUri: null, effective: null, frameArchive: { url, metadata: clientFileData.generation } };
+        if (exports.TextureFrameSeriesAnimator.IsFrameArchiveMetadata(clientFileData)) {
+            const adapted = exports.TextureFrameSeriesAnimator.Adapt(clientFileData.generation);
+            if (adapted) {
+                return { dataUri: null, effective: null, frameArchive: { url, metadata: adapted } };
+            }
+            return { dataUri: null, effective: null };
         }
         const cacheKey = "texture-" + url + "-none";
         let prom = _textureCache.Get(cacheKey);
@@ -43819,7 +45468,7 @@ void main() {
         StyleUtils.ApplyTypeStyle = ApplyTypeStyle;
     })(exports.StyleUtils || (exports.StyleUtils = {}));
 
-    const VERSION = "7.2.1";
+    const VERSION = "7.2.3";
     /**
      * Updates the environment instance used by bruce-cesium to one specified.
      * This can be used to ensure that the instance a parent is referencing is shared between bruce-cesium, bruce-models, and the parent app.