How do I hide CZML datasources outside availability boundaries ?

CesiumJS
1

Hi everyone,

I have CZML data that is shown even when the viewer.clock.currentTime is outside the CZML availability boundaries. Is it normal ?

I still don't know if CZMLs are supposed to be loaded with a specifically built timeline or if its display is "cyclic" (modulo-like)...

Either way I need to hide these data when they are supposed to be.

This is how I load it :

var czmlObj = [ ... ];
var czmlDataSource = new Cesium.CzmlDataSource();
viewer.dataSources.add(czmlDataSource.process(czmlObj));

Do you have any information or idea that could help me ?

Regards.

2

Nobody ? Tell me if I wasn't clear enough and I'll try to complete my question.

3

I tried that :

// After loading the CZML file
viewer.clock.multiplier = 0;
viewer.clock.clockStep = Cesium.ClockStep.TICK_DEPENDENT;
viewer.clock.clockRange = Cesium.ClockRange.CLAMPED;

Result :
( The CZML file is set between [14:00 ; 15:00] )
]15:00 ; 23:59] Data is hidden, this is what I want
[14:00 ; 15:00] Data is displayed, nothing weird about that
[00:00 ; 14:00[ Data is still displayed, I want it hidden

I still can't figure out why it works perfectly after 14:00 and not before.

4

Sorry for missing your question yesterday!
It’s hard for me to say what is wrong without looking at your CZML file.

Have you seen this demo? http://cesiumjs.org/Cesium/Apps/Sandcastle/index.html?src=CZML%20Polygon%20-%20Intervals,%20Availability.html&label=CZML

Looking at that might help you debug your own CZML and figure out what is different.

Best,

Hannah

5

Don't worry I know there is a lot to answer to :slight_smile:

I didn't post my CZML because it is generated from a data model. Here is the template though :

[
{
  "id" : "document",
  "name" : "name",
  "version" : "1.0"
},
{
  "id" : "",
  "name" : "",
  "availability" : "2014-05-10T14:00:00Z/2014-05-10T15:00:00Z",
  "polygon" : {
   "positions" : [
    "cartographicDegrees" : [lon,lat,height,...]
   ],
   "material" : {
    "solidColor" : {
     "color" : [
      "rgba" : [255,255,255,255]
     ]
    }
   },
   "show" : [{ // I just tried stuff here, even if it's dirty
    "interval" : "1800-01-01T00:00:00Z/2014-05-10T14:00:00Z",
    "boolean" : false
   },
   {
    "interval" : "2014-05-10T14:00:00Z/2014-05-10T15:00:00Z",
    "boolean" : true
   },
   {
    "interval" : "2014-05-10T15:00:00Z/2999-12-31T23:59:59Z",
    "boolean" : false
   }]
  }
}
]

Does it help you ?

6

Try using the ‘availability’ option.

In the demo I pointed to, this is what makes California show/hide

{
“id” : “california”,
“name” : “static california with set availability”,
“availability”:“2012-08-04T16:10:00Z/2012-08-04T16:30:00Z”,
“polygon” : {
“positions” : {
“cartographicDegrees” : [
-120, 42, 50000,
-124, 42, 30500,
-124.5, 40, 3000,
-123, 38, 0,
-122, 36, 0,
-120.8, 34.2, 0,
-118, 34, 0,
-117, 32.2, 6000,
-115.5, 32.5, 1530,
-115, 35, 1530,
-120, 39, 30500
]
},
“material” : {
“solidColor” : {
“color” : {
“rgba” : [255, 0, 0, 150]
}
}
},
“perPositionHeight” : true,
“extrudedHeight”: 0
}
},

``

-Hannah

7

As you can see in my previous message, that's what I did and it is supposed to work. I don't think the problem is coming from the CZML file but from the way I use the Cesium Clock (I use a custom timeline). I guess just doing that isn't enough :

// After CZML load
viewer.clock.multiplier = 0;
viewer.clock.clockStep = Cesium.ClockStep.TICK_DEPENDENT;
viewer.clock.clockRange = Cesium.ClockRange.CLAMPED;

// When setting currentTime
viewer.clock.currentTime = Cesium.JulianDate.fromDate(date);

8

Oh sorry, I just saw what you were trying to do with show.
Could you please post a full working example? I can’t seem to reproduce your problem by piecing together the different code snippets you posted.

Thanks,

Hannah

9

Hi,

I have wrote my code in the Sandcastle and this isn't working. Here is the code I used :

var czml = [
    {
        "id" : "document",
        "name" : "name",
        "version" : "1.0"
    },
    {
        "id" : "",
        "name" : "",
        "availability" : "2014-05-10T14:00:00Z/2014-05-10T15:00:00Z",
        "polygon" : {
            "positions" : [
                {
                    "cartographicDegrees" : [
                        -50, 20, 0,
                        -50, 40, 0,
                        -40, 40, 0,
                        -40, 20, 0
                      ]
                }
            ],
            "material" : {
                "solidColor" : {
                    "color" : [{
                        "rgba" : [255,255,255,255]
                    }]
                }
            }
        },
        "show" : [
            { // I just tried stuff here, even if it's dirty
                "interval" : "1800-01-01T00:00:00Z/2014-05-10T14:00:00Z",
                "boolean" : false
            },
            {
                "interval" : "2014-05-10T14:00:00Z/2014-05-10T15:00:00Z",
                "boolean" : true
            },
            {
                "interval" : "2014-05-10T15:00:00Z/2999-12-31T23:59:59Z",
                "boolean" : false
            }
        ]
    }
];

var viewer = new Cesium.Viewer('cesiumContainer', {timeline: false});
var ds = new Cesium.CzmlDataSource();
viewer.dataSources.add(ds.process(czml));

viewer.clock.multiplier = 0;
viewer.clock.clockStep = Cesium.ClockStep.TICK_DEPENDENT;
viewer.clock.clockRange = Cesium.ClockRange.CLAMPED;

var date = new Date();
date.setUTCFullYear(2014);
date.setUTCMonth(4);
date.setUTCDate(10);
date.setUTCHours(16);
date.setUTCMinutes(0);
console.log(date.toUTCString());

setTimeout(function(){
    viewer.clock.currentTime = Cesium.JulianDate.fromDate(date);
    console.log('---- Time Set ----');
},3000);

I obviously did something wrong. Do you know what it is ?

Thanks

Raphael

10

Update :

I reversed the show fields in the CZML :

false -> true -> false ===> true -> false -> false

And it works ! It seems like elements before true in the show field are erased...

The solution doesn't satisfy me though (not as clean as I would like).

Raphael