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