The polyline glitches to the bottom left side of the map in 2D

CesiumJS
1

Sandcastle:

At a certain zoom level, the polyline extends all the way to the bottom left side of the screen. What is the root cause of it and how to avoid it?

image
image1920×895 146 KB

2

Huh, that’s weird indeed. I reduced your example down to just what reproduces the issue - and it turns out, the weirdness happens in 3D too, not just 2D: sandcastle example

Now, the culprit is definitely the width parameteter, but I do think there’s a bug here. If you take out width, the issue disappears (but that may not be what you want, visually). I can see it being glitchy to say “heres a 10m long line. Render it as 222 pixels wide, even when I’m zoomed out to 1000km.” It’s too short to be that wide. But even so, the result is truly bizarre- it doesn’t even work particularly well at near-zoom levels.

If you can get away with it, a Corridor seems to work a bit better, but may not be what you want either:

const pos1 = Cesium.Cartesian3.fromRadians(0.9426175968226969, 0.4221859228372616, 0);
const pos2 = Cesium.Cartesian3.fromRadians(0.9426153717686728, 0.4221863122824797, 0);

viewer.entities.add({
  name: "Thick corridor (meters)",
  corridor: {
    positions: [pos1, pos2],
    width: 10.0,              // width in meters (choose something reasonable)
    material: Cesium.Color.RED.withAlpha(1.0),
    // height: 0,
    // extrudedHeight: 0,
    // cornerType: Cesium.CornerType.ROUNDED
  }
});

I’ll go look to see if there are any known bugs regarding your original issue.

Best,
Matt

3

I did find an issue which seems like it could be the same

And this comment suggests a workaround involving a polyline primitive instead of an entity. I’m not sure if that’d work but it may be worth a try.