Dynamic on-the-fly imagery generation

Fuehner · November 26, 2019, 11:10am

Looking for some guidance/suggestions. I have a situation where I need to visualize large quantities of polygons whose positions change in
near real-time within Cesium. Additionally, the front-end UI we
provide allows the end-user to filter these polygons.

My thought is the best way to accomplish this would be to somehow
dynamically generate an imagery layer (i.e., TMS, WMTS, etc) based on the end-users filter selections.

Curious if someone would have a some suggestions on how I might go about accomplishing this?

Thanks!

omar · December 2, 2019, 12:12pm

You might be able to do this just by directly using the primitive API. This article shows an example of creating thousands of polygons covering the globe:

https://cesium.com/docs/tutorials/geometry-and-appearances/

Generally a changing polygon on the surface of the globe in CesiumJS needs not only to have its position changed, but also reproject on the globe and re-tesselate it. The imagery layer idea is interesting, and I think the closest thing I can think of is the grid imagery provider:

github.com

CesiumGS/cesium/blob/afff7a4de72aae445c8531799de9056ed0f6771d/Source/Scene/GridImageryProvider.js#L235-L247


GridImageryProvider.prototype._drawGrid = function(context) {
    var minPixel = 0;
    var maxPixel = this._canvasSize;
    for (var x = 0; x <= this._cells; ++x) {
        var nx = x / this._cells;
        var val = 1 + nx * (maxPixel - 1);


        context.moveTo(val, minPixel);
        context.lineTo(val, maxPixel);
        context.moveTo(minPixel, val);
        context.lineTo(maxPixel, val);
    }
    context.stroke();

So you could create a custom imagery provider just like that. Although it might also need to be time dynamic. The WMTS provider has an example on that:

github.com

CesiumGS/cesium/blob/afff7a4de72aae445c8531799de9056ed0f6771d/Source/Scene/WebMapTileServiceImageryProvider.js#L173-L186


if (defined(options.times)) {
    this._timeDynamicImagery = new TimeDynamicImagery({
        clock : options.clock,
        times : options.times,
        requestImageFunction : function(x, y, level, request, interval) {
            return requestImage(that, x, y, level, request, interval);
        },
        reloadFunction : function() {
            if (defined(that._reload)) {
                that._reload();
            }
        }
    });
}

I’m very curious if this technique solves your problem, so let me know! What kind of application is this for?