Change colour with the time

CesiumJS
1

Hello! I'm creating a new project with polylines from a json file with Time Data:

[{
  "name": "Nur",
  "lon": 6.524,
  "lat": 50.299,
  "rad": [["2015-10-12T01:00:00Z",
  0.0946244862847872],
  ["2015-10-13T00:00:00Z",
  0.0646244862847872],
  ["2015-10-16T00:00:00Z",
  0.1346244862847872]]
}]

I would like to change the colour of the polyline depending of the value (rad) with the time, creating a colour scale. I'm trying this with the next code:

outlineMaterial.color = newCesium.ConstantProperty(Cesium.Color.fromCssColorString(this._colorScale(station.radio[0][1])));

But of course, the colour is static, do you know any solution?

Thanks!

2

You can simply use SampledProperty, instead of ConstantProperty.
use addSample method to add time varying values at discrete time points.

Don’t forget to use backward and forward extrapolation properties to ensure the first and last values are kept beyond the sample time.

For more complicated applications and uses, be sure to check CZML

3

Thanks for the answer, but I have one problem to do that. I'm following the D3 cesium example and I have a function to load the data and another to update the data with the time:

HealthAndWealthDataSource.prototype.load = function(data) {
        if (!Cesium.defined(data)) {
            throw new Cesium.DeveloperError("data must be defined.");
        }
        var ellipsoid = viewer.scene.globe.ellipsoid;

        this._setLoading(true);
        var entities = this._entityCollection;
        //It's a good idea to suspend events when making changes to a
        //large amount of entities. This will cause events to be batched up
        //into the minimal amount of function calls and all take place at the
        //end of processing (when resumeEvents is called).
        entities.suspendEvents();
        entities.removeAll();

        // for each station defined in stations_geo.json, create a polyline at that lat, lon
        for (var i = 0; i < data.length; i++){
            var station = data[i];
            var surfacePosition = Cesium.Cartesian3.fromDegrees(station.lon, station.lat, 0.0);

            // Construct Population related Properties
      var radiation1 = new Cesium.SampledPositionProperty();
            var sampledRadiation = new Cesium.SampledProperty(Number);
      
      var colorPolyline = new Cesium.SampledProperty(Number);
      
      var heightPosition = Cesium.Cartesian3.fromDegrees(station.lon, station.lat, station.radio[0][1]*1000000);

      radiation1.addSample(Cesium.JulianDate.fromIso8601("2015"), heightPosition);
            sampledRadiation.addSample(Cesium.JulianDate.fromIso8601("2015"), radio);
      
            var radio = 0.0;
            for (var j = 0; j < station.radio.length; j++) {
                var year = station.radio[j][0];
                radio = station.radio[j][1];
        heightPosition = Cesium.Cartesian3.fromDegrees(station.lon, station.lat, radio*1000000);
        
                radiation1.addSample(Cesium.JulianDate.fromIso8601(year), heightPosition);
                sampledRadiation.addSample(Cesium.JulianDate.fromIso8601(year), radio);
        
        colorPolyline.addSample(Cesium.JulianDate.fromIso8601(year), Cesium.Color.fromCssColorString(this._colorScale(radio)));
        
            }
          
      radiation1.addSample(Cesium.JulianDate.fromIso8601("2015"), heightPosition);
            sampledRadiation.addSample(Cesium.JulianDate.fromIso8601("2015"), radio);

            var polyline = new Cesium.PolylineGraphics();
            polyline.show = new Cesium.ConstantProperty(true);
      
            outlineMaterial.color = colorPolyline.getValue(Cesium.JulianDate.fromIso8601(year))
            outlineMaterial.outlineColor = new Cesium.ConstantProperty(new Cesium.Color(0.0, 0.0, 0.0, 1.0));
            outlineMaterial.outlineWidth = new Cesium.ConstantProperty(3.0);
            polyline.material = outlineMaterial;

            var entity = new Cesium.Entity(station.name);
            entity.polyline = polyline;
            polyline.positions = new Cesium.PositionPropertyArray([new Cesium.ConstantPositionProperty(surfacePosition), radiation1]);

            // Add data properties to entity

            entity.addProperty('surfacePosition');
            entity.surfacePosition = surfacePosition;
            entity.addProperty('stationData');
            entity.stationData = station;
            entity.addProperty('radio');
            entity.radio = sampledRadiation;

            //Add the entity to the collection.
            entities.add(entity);
        }

        //Once all data is processed, call resumeEvents and raise the changed event.
        entities.resumeEvents();
        this._changed.raiseEvent(this);
        this._setLoading(false);
    };

In this function I don't have the time, but in the update function yes:

  HealthAndWealthDataSource.prototype.update = function(time) {
    //El tiempo en cesium siempre es el juliano, que es el que hemos predefinido como inicial en la variable _year
    
        if (time !== this._year ){
            this._setInfoDialog(time);
        }
        return true;
    };

How can I change the values with the time? Because following this code I only get the correct color for the last time.

4

Well, I’ve read your code and this is what I get from it :

  1. You have a data source to which you load stations, and each station has it data per year.

  2. When you finish the load function, the entities already has all sampled values in it.

As you say that you see only the last time’s sample, I presume it is because your viewer’s clock shows the current date and time.

If so, you probably just want to set Cesium’s time to your earliest time, rather than using the update function.

use viewer.clock and it’s properties. Unfortunately I have no experience with the clock object to help you with, but

it’s seems pretty straightforward to use - just set the start time to your first sample’s date and make it accelerate faster - using the multiplier property

http://cesiumjs.org/Cesium/Build/Documentation/Clock.html

If it is still not clear, or I have misunderstood something, then please provide a sample of data so I will see clearly

5

Hello! I still without find a solution. I created a repository on GitHub, could you donwload it and try to execute it?

https://github.com/HsKA-OSGIS/EurOS

The cesium part is in html/cesium.html

Thanks!

6

In 4d Choropleth example (https://cesiumjs.org/demos/4DChoroplethMap.html) change the colour in the time. Maybe you can see this and look how they do it.