fail to construct czml rectangle cross longitude +180 and -180 line

Hello thread,

I need to create a czml rectangle crossing longitude +180 and -180 line so that time-series satellite aerial images (geotif) for that region can be put on, but I directly receive errors (“DeveloperError: Expected east to be less than or equal to 3.141592653589793”) if longitude defined in “wsenDegrees” is greater than 180.

The attached screenshot also explains this, the satellite image is rendered through WMS (published using GeoServer).

How can I construct a rectangle in czml to cross that +180-180 longitude line?

Here is the code for rectangle:

var czml = [{

“id” : “document”,

“name” : “CZML Geometries: Polygon”,

“version” : “1.0”

},

{

“rectangle”: {

“material”: {

“image”: {

“image”: {

“uri”: “https://cesium.com/images/logos/cesium/cesium_color_white.png

}

}

},

“coordinates”: {

“wsenDegrees”: [

85,

-55,

195, //the max value accept here is 180

20

]

},

“fill”: true

},

“name”: “True Colour Composite 2km”,

“description”: “

Observation Time: Monday,20 January 2020 16:30 PM AEDT

”,

“id”: “202001200530”,

“availability”: “2020-01-20T16:20:00/2020-01-20T16:30:00”

}];

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

var dataSourcePromise = Cesium.CzmlDataSource.load(czml);

viewer.dataSources.add(dataSourcePromise);

viewer.zoomTo(dataSourcePromise);

I also try it with czml polygons by defining the coordinates of 4 corners to mimic a rectangle, it does accept longitude value over 180, while the visualised rectangle is distorted

var czml = [{

“id” : “document”,

“name” : “CZML Geometries: Polygon”,

“version” : “1.0”

},

{

“polygon”: {

“material”: {

“image”: {

“image”: {

“uri”: “https://cesium.com/images/logos/cesium/cesium_color_white.png

}

}

},

“positions”: {

“cartographicDegrees”: [

85,-55,0,

195,-55,0,

195,20,0,

85,20,0,

85,-55,0

]

},

“fill”: true

},

“name”: “True Colour Composite 2km”,

“description”: “

Observation Time: Monday,20 January 2020 16:30 PM AEDT

”,

“id”: “202001200530”,

“availability”: “2020-01-20T16:20:00/2020-01-20T16:30:00”

}];

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

var dataSourcePromise = Cesium.CzmlDataSource.load(czml);

viewer.dataSources.add(dataSourcePromise);

viewer.zoomTo(dataSourcePromise);

I am using Cesium version 1.65 with Chrome on Windows.

Thanks heaps for any tips!

Cheers,

Benny

One workaround in my mind is to chop the aerial images into 2 parts along the +180-180 longitude line. this should work straightway I guess.

Another option might be loading a series of WMS image layers and use the timeline controller to toggle their layer z-index to mimic the animation.

Will give both a try and paste my results here shortly.

But I am still looking for a proper way to create a rectangle crossing the +180-180 longitude line. As the polygon accepts longitude value over 180, I think there should be a way to bypass this bug for rectangle.

I think you might just need to tesselate a little more, like the suggestion here for creating a line that crosses the IDL:

https://github.com/AnalyticalGraphicsInc/cesium/issues/7214#issuecomment-434838652

Let me know if that works for you.