1

Situation:

I have 30 3D heat maps (for 30 years) stored in GeoServer, my goal is to create an animation showing the change year by year. I found Cesium and was really impressed. Right now I am trying to style the GeoJSON layers according to the heat map symbol ID (a field in my layer) and I am having trouble getting it to work. Cesium has a sandbox showing an example styling GeoJSON by random colors but that's not exactly what I'm trying to do and I can't figure out what I am doing wrong. I think it has something to do with the "if" that is within "if (!color)", but again I don't know.

JS Code:

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

            for (var i = 0; i < entities.length; i++) {
                var entity = entities[i];
                var Symbol = entity.SymbolID;
                var color = colorhash[Symbol];

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

Question:

Can anyone help me figure out how to style a 3D GeoJSON by attributes in Cesium? I'm 100% open to suggestions and am eager to learn!

If you need more information, let me know and I will try my best to explain.

Edit: I changed around my code a bit and I think I'm getting close but I'm not there yet!

0

I figured it out! I was on the right track with my most recent edit. I was using '===' when I should have been using '=='. Here is my final code that got me the result I wanted. If anyone has any further suggestions let me know!

                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;
            }

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.