How to customize czml datasource?

Home / Uncategorized / How to customize czml datasource?

Question:
I have a CZML data that I extracted via python. I have buildings, with their geometry, height, building ID, and intervals. each interval has a value. After loading the czml data to Cesium, I’d like to access the attributes and then customize the color of the buildings according to the value given. Here is a sample of my CZML:

[{ "id": "document", "version": "1.0" }, { "id": 32, "availability": "2014-01-01T00:00:00Z/2014-12-31T00:00:00Z", "polygon": { "positions": { "cartographicDegrees": [54.7162360431897, 24.4519912715277, 0, 54.716219612921, 24.4519754832587, 0, 54.7162501395131, 24.4519488635358, 0, 54.7162465684811, 24.4519454316688, 0, 54.7162670831639, 24.4519275432238, 0, 54.7162707308589, 24.4519310439514, 0, 54.7163022563025, 24.4519035537608, 0, 54.7161962974502, 24.4518018819532, 0, 54.7161647729823, 24.4518293730395, 0, 54.7162035538772, 24.4520196028966, 0, 54.7162360431897, 24.4519912715277, 0] }, "someProperty": [{ "interval": "2014-00-01T00:00:00Z/2014-01-01T00:00:00Z", "En_C_need": 0.7 }, { "interval": "2014-01-01T00:00:00Z/2014-02-01T00:00:00Z", "En_C_need": 1.0 }, { "interval": "2014-02-01T00:00:00Z/2014-03-01T00:00:00Z", "En_C_need": 2.6 }, { "interval": "2014-03-01T00:00:00Z/2014-04-01T00:00:00Z", "En_C_need": 12.1 }, { "interval": "2014-04-01T00:00:00Z/2014-05-01T00:00:00Z", "En_C_need": 30.2 }, { "interval": "2014-05-01T00:00:00Z/2014-06-01T00:00:00Z", "En_C_need": 37.8 }], "extrudedHeight": 6.0 } }]

I have other GeoJSON data that I customized, I tried the same method but it didn’t work.

Here is what I’m trying to do (this does not work):
var test2 = Cesium.CzmlDataSource.load (‘Data/czml/TESTING/example_8.czml’);
test2.then(function (dataSource) {
viewer.dataSources.add(test2);
viewer.zoomTo (test2);
var entities = dataSource.entities.values;

var colorHash = {};
var Energy = [];
for (var i = 0; i < entities.length; i++) { var entity = entities[i]; Energy = entity.someProperty.En_C_need; var color = colorHash [Energy]; if(!color ) { if (Energy < 5 ) { color = Cesium.Color.DARKSALMON.withAlpha (0.95); } else if (Energy < 10) { color = Cesium.Color.BURLYWOOD.withAlpha (0.95); } else if (Energy < 20) { color = Cesium.Color.RED.withAlpha (0.95); } else { color = Cesium.Color.PINK.withAlpha (0.95); }; colorHash[Energy] = color; }; entity.polygon.fill = true; entity.polygon.material = color; entity.polygon.outline = false; }; });


Answer:

Read more

Leave a Reply

Your email address will not be published. Required fields are marked *