Adding/Removing Entities using Resium

CesiumJS
1

Hello, I am trying to understand the Resium library (I know its a third party library, but I assume there are others that have used it here). I have a simple use case of wanting to conditionally render entities in the viewer. I have a bare bones vite/react/cesium/resium project setup for simplicity:

import { Entity, Viewer } from 'resium';
import './App.css';
import { Cartesian3 } from 'cesium';
import { useState } from 'react';

function App() {
  const position = Cartesian3.fromDegrees(-74.0707383, 40.7117244, 100);
  const pointGraphics = { pixelSize: 20 };
  const [showEntity, setShowEntity] = useState(true);

  function handleToggle() {
    setShowEntity(!showEntity);
  }

  return (
    <div style={{ display: 'flex', height: '100vh' }}>
      <div style={{ width: '100px', backgroundColor: '#f0f0f0', padding: '10px' }}>
        <button onClick={handleToggle}>Toggle Entity</button>
      </div>
      <Viewer style={{ flexGrow: 1 }}>
        {showEntity && <Entity position={position} point={pointGraphics} />}
      </Viewer>
    </div>
  );
}

export default App;

Whenever the showEntity state changes, I can see the state changing however the entity itself never goes away in the viewer. Once its rendered in the viewer the only way I can get the entity to correctly represent its state is changing the initial value and doing a full page refresh. I know you can do this using CesiumJS directly by utilizing the viewer.entities.add/remove function, however if I’m utilizing resium, I’d like to actually use it. This seems like such a simple use case and I can’t for the life of me figure out why my entity won’t conditionally render. Any help would be appreciated.

2

And just a note, it seems when the initial state is false, and it turns to true, the entity DOES show up, however its when the state goes back to false, the entity does NOT go away.

3

Hi Brandon, not sure if you’ve since figured it out, but you should be able to toggle entity visibility using the “show” parameter:

<Viewer style={{ flexGrow: 1 }}>
  <Entity position={position} point={pointGraphics} show={showEntity} />
</Viewer>

Under the hood, I’m not sure how this would be different (i.e. more or less efficient, is it still using resources, etc.) from React’s built-in conditional rendering.