Render a circle from a CZML

Hey guys

I am starting using Cesium now and its working great so far, but i was wondering if it si posible to draw a simple circle based on a lat, long and radius, i know we can do this using the Polygon class, but i did not found any reference in the CZML file


Right now there isn’t, but adding it should be trivial. I need to think about it a little more (if a more general approach should be taken rather than just adding a “circle” property) but I can hopefully have something by the end of the week.

I’ll add that the workaround is to simply create a polyline or polygon with positions that form a circle. In fact, that might be the actual solution, rather than a workaround. The problem is that a circle in 3D is not a circle in 2D (and vice versa) you can’t have it both ways. Eventually terrain would further complicate the issue. How would you want to define the circle anyway? A center point and radius do not actually create a circle if you are talking about surface distance (which is what it would have to be if you were draping the circle on the ellipsoid).

A benefit of built-in circle and ellipse properties in CZML is that the payload is drastically reduced. There are already functions to compute circles and ellipses using arc distance in Shapes.js. Perhaps the naming is imprecise because these are not planar, but the names are familiar. Users ask how to draw circles, not whatever the technical name is for one of these meshes. For things like range rings on aircrafts, I can see just distance, not arc distance being preferred. Perhaps this ultimately implies two mutually exclusive radius properties might be the way to go.

The downside, of course, to circle and ellipse properties is they make implementing a CZML renderer harder. Nonetheless, I bet that circles and ellipses are common enough that they are likely to make the core CZML spec, especially if the spec is written such that only one radius property is required to be supported.

As for terrain, I imagine there will be something similar to “clamp to ground.”

I am new and was wondering if circle and ellipse are now CZML spec? Can you let me know a sample CZML to draw ellipse on the ground? Thanks.

to draw a circle on the ground you may also use a point:

{"position": {"cartographicDegrees": [32.850000000000001,
-2.5833330000000001, 0.0]}, "point": {"color": {"rgba": [255, 255, 0,
255]}, "pixelSize": 54.0, "outlineColor": {"rgba": [0, 191, 0, 255]},
"outlineWidth": 5.0, "show": true}, "id":
"7edc463edda34858b807d9c0755361d2", "label": {"text": "Mwanza Gulf",
"show": true}}

Both circles and ellipses are now supported directly in CZML, see this link for details:

Would someone post a simple CZML to display an ellipse on the ground? It’s trickier than I initially thought…

Here’s a simple CZML file that has a variety of ellipses in it. You can Drag Drop into Cesium viewer and double click on the labels to zoom to it. (at lat/lon 0,0).

ellipses.czml (5 KB)

Hi Matthew,

if I drag your file into the CesiumViewer, I get an exception:

An error occurred while rendering. Rendering has stopped.
Error: importScripts failed for Workers/createEllipseOutlineGeometry at http://dp6:8011/Source/Workers/createEllipseOutlineGeometry.js makeError@http://dp6:8011/Source/Workers/cesiumWorkerBootstrapper.js:185:13 req.load@http://dp6:8011/Source/Workers/cesiumWorkerBootstrapper.js:1925:34 newContext/context.load@http://dp6:8011/Source/Workers/cesiumWorkerBootstrapper.js:1647:17 newContext/Module.prototype.load@http://dp6:8011/Source/Workers/cesiumWorkerBootstrapper.js:846:21 newContext/Module.prototype.fetch@http://dp6:8011/Source/Workers/cesiumWorkerBootstrapper.js:836:21 newContext/Module.prototype.check@http://dp6:8011/Source/Workers/cesiumWorkerBootstrapper.js:866:21 newContext/Module.prototype.enable@http://dp6:8011/Source/Workers/cesiumWorkerBootstrapper.js:1163:17 newContext/context.enable@http://dp6:8011/Source/Workers/cesiumWorkerBootstrapper.js:1519:21 newContext/Module.prototype.enable/<@http://dp6:8011/Source/Workers/cesiumWorkerBootstrapper.js:1148:25 bind/<@http://dp6:8011/Source/Workers/cesiumWorkerBootstrapper.js:151:13 each@http://dp6:8011/Source/Workers/cesiumWorkerBootstrapper.js:79:1 newContext/Module.prototype.enable@http://dp6:8011/Source/Workers/cesiumWorkerBootstrapper.js:1110:17 newContext/Module.prototype.init@http://dp6:8011/Source/Workers/cesiumWorkerBootstrapper.js:800:21 localRequire/<@http://dp6:8011/Source/Workers/cesiumWorkerBootstrapper.js:1434:29 setTimeout@http://dp6:8011/Source/Workers/cesiumWorkerBootstrapper.js:18:5 req.nextTick<@http://dp6:8011/Source/Workers/cesiumWorkerBootstrapper.js:1763:9 localRequire@http://dp6:8011/Source/Workers/cesiumWorkerBootstrapper.js:1422:21 getModule@http://dp6:8011/Source/Workers/createGeometry.js:20:22 createGeometry@http://dp6:8011/Source/Workers/createGeometry.js:38:21 createTaskProcessorWorker/<@http://dp6:8011/Source/Workers/createTaskProcessorWorker.js:56:17