Trouble making multi-coloured polyline clamped to ground

CesiumJS
1

I’ve tried about a dozen ways to make a multi-coloured polyline that’s clamped to the ground. I can make one where the colour and other attributes are good but it won’t clamp to ground. Or I can get the one in the picture. I have no idea why it looks like this! I can’t seem to control it.


     const pl = new Cesium.GeometryInstance({
        geometry: new Cesium.GroundPolylineGeometry({
          positions: Cesium.Cartesian3.fromDegreesArray(posns),
          colors: colorVals,
          width : 5.0, }),
      });

      var myline = new Cesium.Primitive({
        geometryInstances: pl,
        appearance: new Cesium.PerInstanceColorAppearance({
          renderState: { lineWidth: 5, }, }), 
      })
       
      viewer.scene.groundPrimitives.add(myline);

What it looks like - http://www.terra-dv.com/line1.jpg

I can make one that works fine in a single colour, but my attempts to make it multi colour have failed.

viewer.entities.add({
      name: "Route", polyline: {
          positions: Cesium.Cartesian3.fromDegreesArray(posns),
          width: 5,
          material: Cesium.Color.RED,
          clampToGround: true, },
    });
2

Hi @DataVerse,

Looking at the documentation, there’s no colors or colorPerVertex options in GroundPolylineGeometry, unlike PolylineGeometry. However, you may want to try segmenting the polyline manually based on color and using PolylineMaterialAppearance to color the individual segments, as shown in this Sandcastle.

image
image1920×1080 287 KB

Let me know if that helps achieve what you’re looking for!

3

Thanks for the reply. I’m quite happy to carry on using polyline as in my second code fragment, but I can’t figure out how to add the colourVals array so that it works. I’m mainly a Java programmer and I’m struggling a bit with the JavaScript syntax.

As for breaking the array up into individual segments I’m worried about the performance hit as some of the polylines will be quite big.

4

@DataVerse I believe passing in per-vertex colors is not currently supported for GroundPolylineGeometry. If you’re working with static data, you may be able to use sampleHeight to obtain height data at regular intervals along the path, and then use PolylineGeometry with colors.

5

Isn’t it kinda easier to make your own polyline function that really breaks it into smaller lines in a entityCollection? That way you can both color them individually, and it will clamp just fine. I know it becomes a bit bitsy, but a few util functions can solve that. Haven’t tested performance on such a thing but if you stick with primitives and control them yourself they should be fast enough. Testing will tell.

Alex

6

Just as an update to this, the following code displays the colours perfectly but clampToGround has no effect so the polyline displays “underground”. I guess there just isn’t a Cesium class that supports clamping to ground and multiple colours?


  const perVertexPolyline = new Cesium.GeometryInstance({
      geometry: new Cesium.SimplePolylineGeometry({
        positions: Cesium.Cartesian3.fromDegreesArray(posns),
        colors: colorVals,
        colorsPerVertex: true,
        clampToGround: true, }),
      });

    viewer.scene.primitives.add(new Cesium.Primitive({
      geometryInstances: perVertexPolyline,
      appearance: new Cesium.PerInstanceColorAppearance({
        flat: true,
        renderState: { lineWidth: 5, },
        }),
      }));