SampledPositionProperty Line to ground

CesiumJS
1

What’s a way to get a line like this? Such that it can be rendered from the current location to the ground? Ideally with fading out

IMG_7723
IMG_77231170×2532 466 KB

2

Hi @scottyob, welcome to the community!

One way would be with PolylineGraphics. See the Custom Data Source Sandcastle.

      const color = Cesium.Color.fromHsl(0.6 - height * 0.5, 1.0, 0.5);
      const surfacePosition = Cesium.Cartesian3.fromDegrees(
        longitude,
        latitude,
        0
      );
      const heightPosition = Cesium.Cartesian3.fromDegrees(
        longitude,
        latitude,
        height * heightScale
      );

      //WebGL Globe only contains lines, so that's the only graphics we create.
      const polyline = new Cesium.PolylineGraphics();
      polyline.material = new Cesium.ColorMaterialProperty(color);
      polyline.width = new Cesium.ConstantProperty(2);
      polyline.arcType = new Cesium.ConstantProperty(
        Cesium.ArcType.NONE
      );
      polyline.positions = new Cesium.ConstantProperty([
        surfacePosition,
        heightPosition,
      ]);

      //The polyline instance itself needs to be on an entity.
      const entity = new Cesium.Entity({
        id: `${seriesName} index ${i.toString()}`,
        show: show,
        polyline: polyline,
        seriesName: seriesName, //Custom property to indicate series name
      });
3

Thanks so much, @jjhembd!

I’m struggling to try and get this to move with my path in czml though. Any pointers?

  let timeInterval = fixToTime(flight.fixes[0]) + "/" + fixToTime(flight.fixes.slice(-1)[0]);

  // Build the czml document
  const czml: any = [
    {
      id: "document",
      name: "CZML",
      version: "1.0",
      clock: {
        interval: timeInterval,
        currentTime: fixToTime(flight.fixes[0])
      }
    },
    {
      id: "path",
      name: "Path with GPS Flight data",
      position: {
        epoch: fixToTime(flight.fixes[0]),
        cartographicDegrees: createCzmlPath(flight.fixes)
      },
      path: {
        show: true,
        leadTime: 0,
        trailTime: 60,
        width: 2.5,
        resolution: 1,
        material: {
          polylineGrow: {
            glowPower: 0.3,
            taperPower: 0.3,
            color: { rgba: [255, 0, 0, 255] }
          }
        }
      },
      point: {
        eyeOffset: {
          cartesian: [0.0, 0.0, -10.0],
        },
      },
    }];
4

I’ve given it a go, but I think I’m missing something: GitHub - scottyob/react-igc: React component for rendering IGC files

It appears my Polyline is being drawn through the terrain. I’ve chucked my code up at GitHub - scottyob/react-igc: React component for rendering IGC files if you’d be so kind as to take a look

5

Solution was fairly simple:

    // Enable depth testing
    viewer.scene.globe.depthTestAgainstTerrain = true;