how to display CZML?

CesiumJS
1

Hi,

I apologize if this is a trivial question but I'm having trouble getting my CZML polygon to display and am curious what I'm missing?

My CZML looks like :

[{ "id": "FirstPolygon", "polygon": { "vertexPositions" : { "cartographicDegrees": [-72.0, 40.0, 0.0, -70.0, 35.0, 0.0, -75.0, 30.0, 0.0, -70, 30, 0.0, -68.0, 40, 0.0] } }}]

I have two main lines that I thought was display the polygon in my Cesium globe.

Cesium.processCzml(czml, dynamicObjectCollection, url);
var dynamicVisualizer = new Cesium.DynamicPolygonVisualizer(scene, dynamicObjectCollection);

where 'scene' is predefined to refer to the currently displayed globe, and the 'url' is a web service call that retrieves the CZML referenced above.

What am I missing?

Thanks in advance for any responses.

- PC

2

Hi PC,

You’ve stumbled on a minor issue with the way CZML is currently structured. It should look like this instead:

[{ “id”: “FirstPolygon”, “vertexPositions” : { “cartographicDegrees”: [-72.0, 40.0, 0.0, -70.0, 35.0, 0.0, -75.0, 30.0, 0.0, -70, 30, 0.0, -68.0, 40, 0.0] }, “polygon”: { }}]

The problem is that vertexPositions is expected to be at the top level, not in the polygon object (though the current doc may hint that either is okay, the actual code currently only checks the former). We’ll definitely be addressing this in the near future.

Hope that helps,

Matt

3

Hi,
can you post an example of a Polygon having a semi-transparent fill color and solid borders?

I have tried several solutionns but I did not manage to make it work.

Thanks.
Simone

4

Hi Simone,

You would need to use both a polyline and polygon on the same object to achieve what you would like to do. They share the same “vertexPositions” property, so you still only need to specify the points once. I’ve attached a simple example that draws a transparent red-square with a solid red outline at LLA 0,0,0. I hope this helps.

Matt

outlinedPolygon.czml (613 Bytes)

5

Hi Mattew,
thank you for your reply.

6

Hi Mattew,
I have done a test with the data that I have to display but I see some differences between the polygon and the line rendering (if you zoom you can see that the border of the polygon do not coincide with the line).

Here follows the czml excerpt

[
{
  "vertexPositions" : { "cartographicDegrees": [65.02,-0.53,0.0,63.61,10.68,0.0,61.42,20.56,0.0,61.34,20.46,0.0,60.81,19.85,0.0,60.28,19.25,0.0,59.75,18.67,0.0,59.21,18.11,0.0,58.68,17.57,0.0,58.14,17.04,0.0,57.60,16.53,0.0,57.05,16.03,0.0,56.51,15.55,0.0,55.96,15.08,0.0,55.41,14.63,0.0,54.86,14.18,0.0,54.31,13.75,0.0,53.76,13.33,0.0,52.93,12.72,0.0,54.70,4.69,0.0,55.89,-3.94,0.0,56.76,-3.67,0.0,57.34,-3.48,0.0,57.93,-3.29,0.0,58.52,-3.09,0.0,59.10,-2.89,0.0,59.68,-2.68,0.0,60.27,-2.47,0.0,60.85,-2.25,0.0,61.43,-2.03,0.0,62.02,-1.80,0.0,62.60,-1.57,0.0,63.18,-1.33,0.0,63.76,-1.09,0.0,64.35,-0.83,0.0,64.93,-0.57,0.0] },"polyline":{"color":{"rgba":[255,0,0,255]},"outlineWidth":0.0,"width":1.0,"show":true},"polygon":{"show":true,"material":{"solidColor":{"color":{"rgba":[255,0,0,77]}}}},
  "id": "EN-030818102732-236.MER_FR__0P",
  "source" : "EOpenCatalogue"
}
]

Cheers,
Simone

7

Simone,

The issue here is the way the two are being rendered. The polygon is draped on the surface, while the polyline is intersecting the surface. The further the points are apart the more you’ll see it… If you have a finer resolution( more positions between your points), you’ll find the polygon and polyline will mesh better.

Best regards

Matt

8

Matthew,
thank you for the reply.

We would like to use Cesium as client for an Earth Observation catalogue. The Polygons are extracted from the response message coming from the catalogue and we have no control on the number of points.

Thus if there are no other solutions it seems that this approach is not suitable for us.

Do you have other suggestions?

9

Simone,

I see this as a bug on the Cesium side of things. I’ve written up issue 566 to address it. The main problem is a symptom of the fact that Polygon is a “surface polygon” but polyline is simply a set of straight lines. In reality, we probably need a “surface polyline” as well, or perhaps a simple height reference on polyline would do the trick.

How urgent is this issue? I hope to look at it soon, but if you need a fix ASAP I might be able to provide you a temporary change. Patches, of course, are always welcome.

Matt

10

Hi Matthew,
thank you for the quick reply and for the support. We are currently doing a prototype and we can work with the polygon without the border.

Thus, just inform us when this is done.

Indeed we are trying to use Cesium in different project and maybe I will came back to you with other questions.

Cheers,
Simone

11

Hi Mattew,
I have an additional issue. I'm trying to define a cube in CZML and to visualize it on the viewer. Unfortunately I see only 2D images. Is the 3D supported? Can you send me an example of 3D object in CZML?

Thank you in advance
Simone

12

Hello Mathew,

even i m facing same kind of issue of drawing a polyline as border to the polygon when there is a width for the polygon border. in the process of rendering polygon and polyline for border of polygon , then it is working fine as long as the polyline width is 1.0 but if it increases i.e polyline width or border width of the polygon is increasing then the polyline is not completely finished at the corner as given in the attachment. please revert back if any solution on the same.

thanks ,

chandrika

PolylineAsBorderOfPolygon.JPG

13

Hi Chandrika,

Checkout the polyline “loop” attribute. http://cesiumjs.org/Cesium/Build/Documentation/Polyline.html?classFilter=polyline

Setting that to true should help you with the gap.

Hope that helps,

  • Rachel