Polyline loop not joining first and last point

1. A concise explanation of the problem you’re experiencing.

It is my understanding that polyline’s loop option is meant for drawing a ‘closed’ polyline, I mean a polyline where seamlessly first and last point coincide, so a closed path.

Maybe I’m wrong since I can’t seem to able to draw such a closed path using the loop option to true.

I tried with both a non closed path (which I expected the loop option to close for me) and an “almost” closed path (where first and last positions coincide) hoping that it would be drawn with the proper “closing” mitering: no luck with both ways.

I attach an image where I highlight both my (wrong) results.

2. A minimal code example. If you’ve found a bug, this helps us reproduce and repair it.

To reproduce what shown in the image, please paste the following snippet in the JS tab of the Hello World Sandcastle example:

var viewer = new Cesium.Viewer(‘cesiumContainer’,{

terrainProvider: Cesium.createWorldTerrain()

});

//Enable depth testing so things behind the terrain disappear.

viewer.scene.globe.depthTestAgainstTerrain = true;

//Set the random number seed for consistent results.

Cesium.Math.setRandomNumberSeed(3);

//Generate a random circular pattern with varying heights.

function computeCirclularFlight(lon, lat, radius) {

var positions = ;

// skip last point (same lat,lon as first one)

for (var i = 0; i < 360; i += 45) {

var radians = Cesium.Math.toRadians(i);

positions.push(lon + (radius * 1.5 * Math.cos(radians)));

positions.push(lat + (radius * Math.sin(radians)));

positions.push(Cesium.Math.nextRandomNumber() * 500 + 1750);

}

return Cesium.Cartesian3.fromDegreesArrayHeights(positions);

}

function computeClosedCirclularFlight(lon, lat, radius) {

var positions = ;

// keep last point (same lat,lon as first one)

for (var i = 0; i <= 360; i += 45) {

var radians = Cesium.Math.toRadians(i);

positions.push(lon + (radius * 1.5 * Math.cos(radians)));

positions.push(lat + (radius * Math.sin(radians)));

positions.push(Cesium.Math.nextRandomNumber() * 500 + 2300);

}

// make last point height same as first one

positions[positions.length-1]=positions[2];

return Cesium.Cartesian3.fromDegreesArrayHeights(positions);

}

//Show not closed positions path as a closed polyline (looped)

// not working :frowning:

var positions = computeCirclularFlight(-112.110693, 36.0994841, 0.03);

viewer.entities.add({

polyline : {

positions : positions,

loop: true,

material : Cesium.Color.YELLOW,

width : 10,

show: true

}

});

// Try with closed path of positions showing it as a closed polyline (looped)

// not working the same :frowning:

positions = computeClosedCirclularFlight(-112.110693, 36.0994841, 0.03);

viewer.entities.add({

polyline : {

positions : positions,

loop: true,

material : Cesium.Color.WHITE,

width : 10,

show: true

}

});

viewer.zoomTo(viewer.entities);

3. Context. Why do you need to do this? We might know a better way to accomplish your goal.

I need to draw closed paths (polyline type instead of Cesium path entity type).

4. The Cesium version you’re using, your operating system and browser.

Cesium 1.50, Windows 7 SP1 64bit, Chrome 70.0.3538.77 (Official Build) (64-bit)

What am I doing wrong?

Thanks for your help.

PolylineGraphics does not currently have a loop option and therefore won’t join the first and last points with a nice miter (as you noted).

I submitted an issue for the Cesium team to consider implementing what you’d like to see.

Scott

I see Scott, thanks for making me realize that the loop option is available on Polyline and not on PolylineGraphics.
Nonetheless I need the PolylineGraphics’ clampToGround option too (which I see the Polyline is missing) and so I have to stay with the former.

Thanks very much to you and the Cesium’s team for considering the chance to implement the loop option for PolylineGraphics too: that would be really useful in many scenarios.

Hope it might become true.

Cheers