Cesium polyline is not rendering, when state variable changes

[ats1999]

Problem description https://stackoverflow.com/questions/65632650/cesium-polyline-is-not-rendering-when-state-variable-changes

[rot1024]

That question is already answered.

[chriswalz-bg]

@rot1024 can you link to where it was answered

[rot1024]

Sorry. I didn't read that page in detail, so I misunderstood.

I've read the code, but so far I can't figure out why.

I tried the following code:

import React, { useState } from "react";
import { Cartesian3, Color } from "cesium";
import { Viewer, Entity, PolylineGraphics } from "resium";

const positions = Cartesian3.fromDegreesArrayHeights([0, 0, 1000, 100, 100, 1000]);

const App = () => {
  const [s, ss] = useState(0);
  useEffect(() => {
    const i = setInterval(() => ss(v => v + 1), 1000);
    return () => clearInterval(i);
  }, []);

  return (
    <Viewer full>
      <Entity>
        <PolylineGraphics
          show
          width={3}
          material={Color.RED}
          positions={positions}
        />
      </Entity>
      <div style={{ position: "absolute", left: "0", top: "0", color: "#fff" }}>{s}</div>
    </Viewer>
  );
};

export default App;

Result (Cesium 1.82.1, Resium v1.13.1):

As you can see, the polylines are displayed successfully even though there was a state update, so there seems to be no problem with Cesium or Resium itself.

Tip: Cartesian3.fromDegreesArrayHeights(positions) should be placed outside the component. This will reduce the flickering of the screen.

Unfortunately, the cause is not clear. Perhaps the component itself is not displaying, or perhaps there is a mistake in the polyline data. Or maybe your Cesium or Resium is old and you have stepped on some bug (I recommend upgrading).

If you can provide us with the smallest amount of self-contained code that causes the problem, we may be able to clarify the issue further. And in the process, you'll often discover the cause.

[chriswalz-bg]

@rot1024 The problem for me was using Cartesian3.fromDegreesArrayHeights(positions) inside my functional component. The line wouldn't render at all. Neither would other PolylineGraphics even if their positions were outside of the component.

How do you recommend updating state if you can't use it within the component? Ideally, I'd like to use the useState() hook

[chriswalz-bg]

Here's a minimal non-working example

import React, { useRef } from 'react'
import { Cartesian3, Color, Viewer as CesiumViewer } from 'cesium'
import { CesiumComponentRef, Entity, PolylineGraphics, Viewer } from 'resium'

const App = () => {
    const viewerRef = useRef<CesiumComponentRef<CesiumViewer>>(null)

    const positionsA = Cartesian3.fromDegreesArrayHeights([-30, 0, 1000, 100, 100, 1000])

    return (
        <>
            <Viewer ref={viewerRef}>
                <Entity>
                    <PolylineGraphics show width={3} material={Color.RED} positions={positionsA} />
                </Entity>
            </Viewer>
        </>
    )
}

export default App

And here it is when positionsA is outside the functional component