Tuesday 11 October 2016

javascript - Styling GeoJSON by Attributes with Cesium


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!



Answer



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

No comments:

Post a Comment

arcpy - Changing output name when exporting data driven pages to JPG?

Is there a way to save the output JPG, changing the output file name to the page name, instead of page number? I mean changing the script fo...