Cesium Utils Demo
This page demonstrates the capabilities of the @juun-roh/cesium-utils library, a utility package.
Environment
This demonstration is built using Next.js, the React framework, and leverages Resium, a React wrapper for Cesium that provides declarative components for 3D geospatial applications.
Usage
The @juun-roh/cesium-utils package maintains vanilla CesiumJS compatibility, meaning you can use it in any Cesium project regardless of framework choice. The utilities work directly with standard Cesium objects and APIs.
Traditional CesiumJS
For traditional CesiumJS projects, import the utilities directly and use them with your existing viewer setup:
1
2import * as Cesium from "cesium";
3import { Collection } from "@juun-roh/cesium-utils/collection";
4
5async function main() {
6 let viewer;
7 try {
8 viewer = new Cesium.Viewer("container", viewerOptions);
9
10 // Create tagged collections for organized entity management
11 const buildings = new Collection({
12 collection: viewer.entities,
13 tag: "building"
14 });
15
16 buildings.add(buildingEntity);
17
18 // Use collection methods for bulk operations
19 buildings.show();
20 buildings.hide();
21 buildings.removeByTag("residential");
22
23 } catch (error) {
24 console.error("Viewer initialization failed:", error);
25 }
26}
27
28main();React/Resium Integration
When using Resium, the utilities integrate seamlessly within React components. Access the viewer through Resium's hooks and apply the same utility methods:
1import * as Cesium from "cesium";
2import * as React from "react";
3import { useCesium, Viewer as RViewer } from "resium";
4import { Collection } from "@juun-roh/cesium-utils/collection";
5
6function ViewerContent(props: any) {
7 const { viewer } = useCesium();
8 const [collections, setCollections] = React.useState<Map<string, Collection>>(new Map());
9
10 React.useEffect(() => {
11 if (!viewer) return;
12
13 // Configure viewer UI
14 viewer.bottomContainer.remove();
15 (viewer.timeline.container as HTMLElement).style.display = "none";
16 (viewer.animation.container as HTMLElement).style.display = "none";
17
18 // Initialize utility collections
19 const buildingCollection = new Collection({
20 collection: viewer.entities,
21 tag: "building"
22 });
23
24 const roadCollection = new Collection({
25 collection: viewer.entities,
26 tag: "road"
27 });
28
29 setCollections(new Map([
30 ["buildings", buildingCollection],
31 ["roads", roadCollection]
32 ]));
33
34 // Add sample entities
35 buildingCollection.add(buildingEntity);
36 roadCollection.add(roadEntity);
37
38 }, [viewer]);
39
40 return null; // Viewer content logic only
41}
42
43export default function Viewer(props: any) {
44 return (
45 <RViewer {...props}>
46 <ViewerContent {...props} />
47 </RViewer>
48 );
49}