CODEWITHSUNDEEP
reactjstypescriptczmlresium
user25649565
user25649565

Reputation: 1

How do I use CzmlDataSource in React Resium?

I'm trying to display a local czml file's contents on a map with React, Typescript and Resium. For some reason it keeps throwing the error This object was destroyed, i.e., destroy() was called. What am i doing wrong? Here is the code:

function App() {
  const position = Cartesian3.fromDegrees(-74.0707383, 40.7117244, 100);
  const pointGraphics = { pixelSize: 10 };

  return (
    <Viewer full>
       <Entity position={position} point={pointGraphics} />
       <CameraFlyTo destination={Cartesian3.fromDegrees(20.483, 47.860, 6000)}></CameraFlyTo>
       <CzmlDataSource data={'paths/lne.czml'}></CzmlDataSource>
    </Viewer>
  );
}

export default App;

The paths is in the public folder, I've already tried ./paths and /paths, with the same error. I also have the access token, but I deleted it from this codesnippet. Based on the Resium website, it should be used like this.

Upvotes: 0

Views: 80

Answers (1)

Iniubong Obonguko
Iniubong Obonguko

Reputation: 371

You should move the declaration of the position and pointGraphics variables outside the App function.

Declaring them inside the App function causes them to re-initialize whenever the component re-renders that's why you're getting the error:

This object was destroyed, i.e., destroy()

Do it like this instead:

//Code from the Resium website:
import { Viewer, Entity } from "resium";
import { Cartesian3 } from "cesium";

const position = Cartesian3.fromDegrees(-74.0707383, 40.7117244, 100);
const pointGraphics = { pixelSize: 10 };

function App() {
  return (
    <Viewer full>
      <Entity position={position} point={pointGraphics} />
    </Viewer>
  );
}

export default App;

Let me know if that helps or if you have any other questions.

Upvotes: 0

Related Questions