How do I specify the color of an ellipsoid in CZML? This snippet works when I add an entity to the viewer from within the JavaScript:
let redEllipsoid = viewer.entities.add({
"name": "red ellipsoid",
"position": Cesium.Cartesian3.fromDegrees(-114.0, 40.0, 300000.0),
"ellipsoid": {
"radii": new Cesium.Cartesian3(200000.0, 200000.0, 300000.0),
"material": Cesium.Color.RED.withAlpha(0.5),
"outline": true,
"outlineColor": Cesium.Color.BLACK
}
});
This other snippet also works:
let redEllipsoid = viewer.entities.add({
"name": "red ellipsoid",
"position": {
x: -2083516.9683773473,
y: -4679655.730028949,
z: 4270821.855106338
},
"ellipsoid": {
"radii": {
x: 200000,
y: 200000,
z: 300000
},
"material": Cesium.Color.RED.withAlpha(0.5),
"outline": true,
"outlineColor": {
red: 0,
green: 0,
blue: 0,
alpha: 1
}
}
});
But this snippet doesn't work (yields an ellipsoid with the default white):
let redEllipsoid = viewer.entities.add({
"name": "red ellipsoid",
"position": {
x: -2083516.9683773473,
y: -4679655.730028949,
z: 4270821.855106338
},
"ellipsoid": {
"radii": {
x: 200000,
y: 200000,
z: 300000
},
"material": {
"solidColor": {
"color": {
"rgba": [1, 0, 0, 0.5]
}
}
},
"outline": true,
"outlineColor": {
red: 0,
green: 0,
blue: 0,
alpha: 1
}
}
});
And neither does this one (also yields an ellipsoid with the default white):
let redEllipsoid = viewer.entities.add({
"name": "red ellipsoid",
"position": {
x: -2083516.9683773473,
y: -4679655.730028949,
z: 4270821.855106338
},
"ellipsoid": {
"radii": {
x: 200000,
y: 200000,
z: 300000
},
"material": {
"color": {
red: 1,
green: 0,
blue: 0,
alpha: 0.5
}
},
"outline": true,
"outlineColor": {
red: 0,
green: 0,
blue: 0,
alpha: 1
}
}
});
And neither does this one (also yields an ellipsoid with the default white):
let redEllipsoid = viewer.entities.add({
"name": "red ellipsoid",
"position": {
x: -2083516.9683773473,
y: -4679655.730028949,
z: 4270821.855106338
},
"ellipsoid": {
"radii": {
x: 200000,
y: 200000,
z: 300000
},
"material": {
red: 1,
green: 0,
blue: 0,
alpha: 0.5
},
"outline": true,
"outlineColor": {
red: 0,
green: 0,
blue: 0,
alpha: 1
}
}
});
I am particularly confused, since feeding Cesium.Color.RED.withAlpha(0.5)
into the console after Cesium has loaded returns ne {red: 1, green: 0, blue: 0, alpha: 0.5}
. One would expect that giving the object specified by the static member would work...
Here is the type of "material"
. Since it's an abstract class with no attributes, am I out of luck in specifying it via CZML? It would be a real drag if the only way to set the color of an ellipsoid required post-processing, since I want to be able to do the heavy lifting offline, and just load the CZML in the browser.
Edit: The CZML documentation is hard to find and navigate, but the direct answers are there:
See the Ellipsoid
page, Material
page, SolidColorMaterial
page, Color
page, and optionally the RgbaValue
page of the CZML documentation. It's formatted as a GitHub wiki with a page per item, which unfortunately means that the vast majority of documentation items are hidden until you click show 128 more pages
.
The issue here is that EntityCollection.add(...) takes Entity.ConstructorOptions which are similar, but distinctly different in certain ways, from CZML. Your first few working snippets in your question are using the ConstructorOptions correctly, and they do not handle colors or positions exactly as CZML does.
To convert your code to raw CZML, one would use CzmlDataSource.load(...)
on the CZML content. For example: Sandcastle live demo
const czml = [
{
id: "document",
version: "1.0",
},
{
"id": "red ellipsoid",
"name": "red ellipsoid",
"position": {
"cartesian": [
-2083516.9683773473,
-4679655.730028949,
4270821.855106338
]
},
"ellipsoid": {
"radii": {
"cartesian": [
200000,
200000,
300000
]
},
"material": {
"solidColor": {
"color": {
"rgba": [255, 0, 0, 128]
}
}
},
"outline": true,
"outlineColor": {
red: 0,
green: 0,
blue: 0,
alpha: 1
}
}
},
];
const viewer = new Cesium.Viewer("cesiumContainer");
const dataSourcePromise = Cesium.CzmlDataSource.load(czml);
viewer.dataSources.add(dataSourcePromise);
viewer.zoomTo(dataSourcePromise);