Polygon vs. Polyline lines

CesiumJS
1

If I want to create a polygon entity and a polyline entity using the same points that span a large distance, how can I get them to use the same lines? The polyline currently draws "great circle" lines between points, while the polygon draws "flat Earth" lines. Is there a setting I can use on either entity so the two entities perfectly overlap?

Here's a simple example showing the problem that can be pasted into Sandcastle. Note the mismatch on the Northern edge of the triangle.

Code:
var viewer = new Cesium.Viewer('cesiumContainer');
var layer = new Cesium.CustomDataSource("Test");
viewer.dataSources.add(layer);
var points = Cesium.Cartesian3.fromDegreesArray([-120, 45, -80 , 45, -100, 25]);

layer.entities.add({
    polygon: {
        hierarchy: {
            positions: points
        },
        material: new Cesium.Color(0, 0, 1, 0.8)
    }
});

layer.entities.add({
    polyline: {
        positions: points,
        followSurface: true,
        material: new Cesium.Color(0, 1, 0, 0.8)
    }
});

viewer.flyTo(layer, {
    offset: new Cesium.HeadingPitchRange(0, Cesium.Math.toRadians(-90)),
    duration: 2
});

2

I think setting the polygon height to 0 will fix that. So here’s your modified code example:

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

var layer = new Cesium.CustomDataSource(“Test”);

viewer.dataSources.add(layer);

var points = Cesium.Cartesian3.fromDegreesArray([-120, 45, -80 , 45, -100, 25]);

layer.entities.add({

polygon: {

hierarchy: {

positions: points

},

height : 0, // Explicitly set it to height 0 so it matches the polyline on the surface

material: new Cesium.Color(0, 0, 1, 0.8)

}

});

layer.entities.add({

polyline: {

positions: points,

followSurface: true,

material: new Cesium.Color(0, 1, 0, 0.8)

}

});

viewer.flyTo(layer, {

offset: new Cesium.HeadingPitchRange(0, Cesium.Math.toRadians(-90)),

duration: 2

});

``

You can also get the same effect just using an outline, but I’m assuming you’re doing somewhere where the outline and the fill need to be separate entities?

3

Ah, yes, that did the trick! Thank you kindly for your help.

To answer your question, I'm using the polyline and polygon in the same entity. I'm using the polyline to handle outlining the polygon instead of the built-in outline functionality because, as stated in the "Visualizing Spatial Data" article:
"On Windows systems, outlines will always have a width of 1. This is due to a limitation of how WebGL is implemented in all three major browser engines on Windows."

I want my outline to have a width greater than 1, and (interestingly) polylines are able to handle that!

4

Ah yes, this is true!

Glad that works for you. If you’re curious how polylines can have thicker widths, we wrote a blogpost about that: https://cesium.com/blog/2013/04/22/robust-polyline-rendering-with-webgl/

I also think there is an open issue to use polylines as outlines to have thicker width, so this would be built in, but I believe there are some special cases that make it tricky: https://github.com/AnalyticalGraphicsInc/cesium/issues/6694