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