A time series property representation of a geojson file.

CesiumJS
1

The geojson temperature properties are organized by time.

I applied color to the polygon material according to the temperature properties of the geojson file.

var promise = Cesium.GeoJsonDataSource.load(’…/geojson/littleGeojson2.geojson’);

console.log(promise);

var entities;

promise.then(function(dataSource){

viewer.dataSources.add(promise);

viewer.zoomTo(promise);

entities = dataSource.entities.values;

changeHeightStyle();

});

function changeHeightStyle(){

var entity;

var extrudedHeight;

for(var i=0; i<entities.length;i++){

entity = entities[i];

entity.polygon.outline = false;

extrudedHeight = entity.properties.GRO_FLO_CO*5 ;

entity.polygon.extrudedHeight = extrudedHeight;

entity.polygon.material = getColorHeight(extrudedHeight);

}

colorlegend1.style.display = “block”;

colorlegend2.style.display = “none”;

}

function getColorHeight(height) {

return height >= 50 ? Cesium.Color.fromCssColorString(’#b2182b’) :

height >= 40 ? Cesium.Color.fromCssColorString(’#ef8a62’) :

height >= 30 ? Cesium.Color.fromCssColorString(’#fddbc7’) :

height >= 20 ? Cesium.Color.fromCssColorString(’#d1e5f0’) :

height >= 10 ? Cesium.Color.fromCssColorString(’#67a9cf’) : Cesium.Color.fromCssColorString(’#2166ac’);

}

Furthermore, I want to apply temperature properties to the polygon synchronized with the timeline.

I’m not sure how to use timeInterval.

Here is the current code:

function init() {

var viewer = new Cesium.Viewer(‘cesiumContainer’, {

terrainProvider : ,

selectionIndicator : false //Disable selection indicator

});

viewer.terrainProvider = new Cesium.CesiumTerrainProvider({

url : ‘//assets.agi.com/stk-terrain/world’

});

var start = Cesium.JulianDate.fromDate(new Date(2016,0,1,14));

var stop = Cesium.JulianDate.fromDate(new Date(2017,0,11,14));

viewer.clock.currentTime = start;

viewer.clock.startTime = start;

viewer.clock.stopTime = stop;

viewer.clock.multiplier = 1000000;

viewer.clock.clockRange = Cesium.ClockRange.LOOP_STOP;

viewer.timeline.updateFromClock();

viewer.timeline.zoomTo(start,stop);

viewer.clock.onTick.addEventListener(function (clock) {

checkIcon(Cesium.JulianDate.toIso8601(clock.currentTime).substr(0,7));

});

function checkIcon(iYear) { //년월표시함수

document.getElementById(“years”).style.display = “”;

document.getElementById(“years”).innerHTML = iYear;

}

new Cesium.ColorMaterialProperty()

function getColorHeight(height) {

return height >= 90 ? Cesium.Color.fromCssColorString(’#b2182b’) :

height >= 80 ? Cesium.Color.fromCssColorString(’#ef8a62’) :

height >= 60 ? Cesium.Color.fromCssColorString(’#fddbc7’) :

height >= 40 ? Cesium.Color.fromCssColorString(’#d1e5f0’) :

height >= 20 ? Cesium.Color.fromCssColorString(’#67a9cf’) : Cesium.Color.fromCssColorString(’#2166ac’);

}

console.log(typeof getColorHeight(44));

// Load regions

var promise = Cesium.GeoJsonDataSource.load("…/geojson/littleGeojson2.geojson");

var entities;

var values = [

[‘2016-01-01T00:00:00.00Z/2016-02-01T00:00:00.00Z’, Math.random()*100],

[‘2016-02-01T00:00:00.00Z/2016-03-01T00:00:00.00Z’, Math.random()*100],

[‘2016-03-01T00:00:00.00Z/2016-04-01T00:00:00.00Z’, Math.random()*100],

[‘2016-04-01T00:00:00.00Z/2016-05-01T00:00:00.00Z’, Math.random()*100],

[‘2016-05-01T00:00:00.00Z/2016-06-01T00:00:00.00Z’, Math.random()*100],

[‘2016-06-01T00:00:00.00Z/2016-07-01T00:00:00.00Z’, Math.random()*100],

[‘2016-07-01T00:00:00.00Z/2016-08-01T00:00:00.00Z’, Math.random()*100],

[‘2016-08-01T00:00:00.00Z/2016-09-01T00:00:00.00Z’, Math.random()*100],

[‘2016-09-01T00:00:00.00Z/2016-10-01T00:00:00.00Z’, Math.random()*100],

[‘2016-10-01T00:00:00.00Z/2016-11-01T00:00:00.00Z’, Math.random()*100],

[‘2016-11-01T00:00:00.00Z/2016-12-01T00:00:00.00Z’, Math.random()*100],

[‘2016-12-01T00:00:00.00Z/2017-01-01T00:00:00.00Z’, Math.random()*100]

];

console.log('values : ’ +values);

promise.then(function(dataSource){

viewer.dataSources.add(promise);

viewer.zoomTo(promise);

var colourProperty = new Cesium.TimeIntervalCollectionProperty();

values.forEach(function(entry){

//console.log(‘5’);

colourProperty.intervals.addInterval(Cesium.TimeInterval.fromIso8601({

iso8601 : entry[0],

isStartIncluded : true,

isStopIncluded : false,

data : getColorHeight(entry[1])

}));

});

console.log(colourProperty);

dataSource.entities.values.forEach(function(entity){

entity.polygon.extrudedHeight = entity.properties.GRO_FLO_CO*10;

entity.polygon.material = new Cesium.Property(colourProperty); // it has problem…T.T

entity.polygon.outlineColor = colourProperty;// it’s OK

});

});

}

window.onload = init;

My ultimate goal is to express the properties of the geojson data (time and temperature of the entities at that time) in time series to change color according to temperature

2

Hello,

For something like this, I would recommend migrating your GeoJSON to CZML. CZML has great support for time dynamic data like this. Here is an example for using CZML to change the positions, color and visibility for a polygon: http://cesiumjs.org/Cesium/Apps/Sandcastle/index.html?src=CZML%20Polygon%20-%20Intervals,%20Availability.html&label=CZML

However, if you need to stick with GeoJSON, here is an example for how to use a CompositeMaterialProperty to define a time interval in which to change the color property:

var viewer = new Cesium.Viewer(‘cesiumContainer’);

//Set bounds of our simulation time
var start = Cesium.JulianDate.fromDate(new Date(2015, 2, 25, 16));
var stop = Cesium.JulianDate.addSeconds(start, 360, new Cesium.JulianDate());

//Make sure viewer is at the desired time.
viewer.clock.startTime = start.clone();
viewer.clock.stopTime = stop.clone();
viewer.clock.currentTime = start.clone();
viewer.clock.clockRange = Cesium.ClockRange.LOOP_STOP; //Loop at the end
viewer.clock.multiplier = 10;

//Set timeline to simulation bounds
viewer.timeline.zoomTo(start, stop);

//Generate a random color every 10 seconds
function getColorProperty() {
var composite = new Cesium.CompositeMaterialProperty();
var startTime = start.clone();
for (var i = 10; i <= 360; i += 10) {
var stopTime = Cesium.JulianDate.addSeconds(start, i, new Cesium.JulianDate());
var color = Cesium.Color.fromRandom({
alpha: 1.0
});

    composite.intervals.addInterval(new Cesium.TimeInterval({
        start: startTime,
        stop: stopTime,
        isStopTimeIncluded: false,
        data : new Cesium.ColorMaterialProperty(color)
    }));
    startTime = stopTime.clone(startTime);
}
return composite;

}

var polygon = viewer.entities.add({
polygon : {
hierarchy : Cesium.Cartesian3.fromDegreesArray([-115.0, 37.0,
-115.0, 32.0,
-107.0, 33.0,
-102.0, 31.0,
-102.0, 35.0]),
material : getColorProperty()
}
});

viewer.zoomTo(polygon);

``

Best,

Hannah

3

First of all thank you very much.

May I ask you one more question?

In this code :

dataSource.entities.values.forEach(function(entity){

entity.polygon.material = changeColor(201601_temp); //changeColor(201608_temp);

});

I want to change that part with time.

In the summer that I expected, the building looks like this.

In the summer that I expected, the building looks like this.

I would like to express these changes continuously.