Animating annual 3D heat maps

CesiumJS
1

I am trying to create an animation of annual heat maps over a 30 year time span. I have generated a 3D GeoJson layer and styled it accordingly. What I’m trying to do now is animate the 30 years of heat maps and show the change over time.

I’m not seeing much in the Cesiumjs resources about how I would go about this and I’m wondering if anyone has done this with a GeoJSON and could help me figure out a plan of attack?

        var viewer = new Cesium.Viewer("cesiumContainer");
        var options = {
            camera: viewer.scene.camera,
            canvas: viewer.scene.canvas
        };

        var promise = Cesium.GeoJsonDataSource.load('My_geoserver_geojsonpath');
        promise.then(function (dataSource) {
            viewer.dataSources.add(dataSource);
            viewer.zoomTo(dataSource);
            var entities = dataSource.entities.values;
            var colorhash = {};

            for (var i = 0; i < entities.length; i++) {
                var entity = entities[i];
                var name = entity.properties.Name;
                var color = colorhash[name];
                var outcolor;
                var symID = entity.properties.SymbolID;

                if (!color) {
                    if (symID == 0) {
                        color = Cesium.Color.FORESTGREEN.withAlpha(0.7);
                        outcolor = Cesium.Color.FORESTGREEN.withAlpha(1.0);
                        colorhash[name] = color;
                    } else if (symID == 1) {
                        color = Cesium.Color.GOLD.withAlpha(0.7);
                        outcolor = Cesium.Color.GOLD.withAlpha(1.0);
                        colorhash[name] = color;
                    } else if (symID == 2) {
                        color = Cesium.Color.ORANGERED.withAlpha(0.7);
                        outcolor = Cesium.Color.ORANGERED.withAlpha(1.0);
                        colorhash[name] = color;
                    } else {
                        color = Cesium.Color.MAROON.withAlpha(0.9);
                        outcolor = Cesium.Color.MAROON.withAlpha(1.0);
                        colorhash[name] = color;
                    }
                }
                entity.polygon.material = color;
                entity.polygon.outlineColor = outcolor;
                entity.polygon.extrudedHeight = entity.properties.Count * 20;
            }
        }).otherwise(function (error) {
            window.alert(error);
        });

``

Additionally, if I could have the layers shrink and grow as the date changes that would be a huge plus. I could possibly use something from D3 to do that animation transition but would also be open to something from Cesiumjs.

I am very new to Cesium and web development in general and would welcome any advice or tips!

I’m using Cesium 1.63.1 with google chrome and my GeoJSON layers are being stored in GeoServer 2.14.2

Thanks in advance!

2

Okay, so I think I may have found a way to change the layer depending on the year. By adding a “clock” I can pass the year to my layer function thus changing the layer. However, I have run into a new challenge! That is trying to get the year from the clock. How do you extract the year from the clock so as it changes the layer will also change?

Here is my updated code:

var clock = new Cesium.Clock({
startTime: Cesium.JulianDate.fromIso8601(‘1979-01-01’),
stopTime: Cesium.JulianDate.fromIso8601(‘2013-12-31’),
clockRange: Cesium.ClockRange.LOOP_STOP, // loop when we hit the end time
clockStep: Cesium.ClockStep.SYSTEM_CLOCK_MULTIPLIER,
multiplier: 15778476, // how much time to advance each tick
shouldAnimate: true // Animation on by default
});
var viewer = new Cesium.Viewer(“cesiumContainer”, {
imageryProvider: new Cesium.IonImageryProvider({assetId: 3845}),
clockViewModel: new Cesium.ClockViewModel(clock)
});
var source1 = ‘part one of path’;
var source2 = ‘part 2 of path’;
var year = some year;

getLayer(2011);

function getLayer(year) {
var promise = Cesium.GeoJsonDataSource.load(source1 + year + source2);
promise.then(function (dataSource) {
viewer.dataSources.add(dataSource);
viewer.zoomTo(dataSource);
var entities = dataSource.entities.values;
var colorhash = {};

    for (var i = 0; i < entities.length; i++) {
        var entity = entities[i];
        var name = entity.properties.Name;
        var color = colorhash[name];
        var outcolor;
        var symID = entity.properties.SymbolID;

        if (!color) {
            if (symID == 0) {
                color = Cesium.Color.FORESTGREEN.withAlpha(0.6);
                outcolor = Cesium.Color.FORESTGREEN.withAlpha(1.0);
                colorhash[name] = color;
            } else if (symID == 1) {
                color = Cesium.Color.GOLD.withAlpha(0.7);
                outcolor = Cesium.Color.GOLD.withAlpha(1.0);
                colorhash[name] = color;
            } else if (symID == 2) {
                color = Cesium.Color.ORANGERED.withAlpha(0.7);
                outcolor = Cesium.Color.ORANGERED.withAlpha(1.0);
                colorhash[name] = color;
            } else {
                color = Cesium.Color.MAROON.withAlpha(0.95);
                outcolor = Cesium.Color.MAROON.withAlpha(1.0);
                colorhash[name] = color;
            }
        }
        entity.polygon.material = color;
        entity.polygon.outlineColor = outcolor;
        entity.polygon.extrudedHeight = entity.properties.Count * 20;
    }
}).otherwise(function (error) {
    window.alert(error);
});

}

``

3

Thanks for posting your solution! Glad you figured it out (and I see you also found the solution to the clock issue here).

Animated CesiumJS maps are always fun to see - is this going to be a publicly accessible project?

4

This is a small part of a 4 year project, at the end of the project we are going to be highlighting our results and this animation will likely be part of that. So yes eventually it will be publicly available. I am really enjoying working with Cesium and would love to implement it in other parts of the project over the coming years.

Thanks

Rory