Resium教程1：Resium is library of React components for Cesium

Resium
Resium is library of React components for 🌍Cesium
Resium 前端框架react封装cesium的库。
You can import all resium components as following.

import { Viewer } from “resium”;
The simplest resium application
The simplest resium application is as following.

Just as Cesium’s root object is Viewer, is also a root component in resium.

app.js:

import React from “react”;
import { Viewer } from “resium”;
const App = () => ;
export default App;
index.js:

import React from “react”;
import ReactDOM from “react-dom”;
import App from “./app”;
ReactDOM.render(, document.getElementById(“wrapper”));
This is almost equivalent to:

const viewer = new Cesium.Viewer(“wrapper”);
But the viewer is displayed small because it does not have its own size.

The easiest solution is using full prop. It makes the viewer displayed on the full screen.

This is equivalent to:

<Viewer
style={{
position: “absolute”,
top: 0,
left: 0,
right: 0,
bottom: 0,
}}
/>
If you want to customize the container styles, you can use style and className prop. They are applied to div element rendered by a Viewer component.

It means that CSS-in-JS libraries (styled-components, emotion…) are available on a Viewer component.

Hereafter, we omit the code such as HMR in example code.

Displaying an entity
Next, let’s display an entity on Cesium. Entity component is available in resium.

Entity has many way to visualize geograohical data. Here let’s try to use PointGraphics.

import React from “react”;
import { Viewer, Entity } from “resium”;
import { Cartesian3 } from “cesium”;
const position = Cartesian3.fromDegrees(-74.0707383, 40.7117244, 100);
const pointGraphics = { pixelSize: 10 };
const App = () => (



);
This is equivalent to:

const viewer = new Cesium.Viewer(“wrapper”);
const entity = new Cesium.Entity({
position: Cartesian3.fromDegrees(-74.0707383, 40.7117244, 100),
point: { pixelSize: 10 },
});
viewer.entities.add(entity);
If HMR is enabled, it fully works in resium, so entity is updated without reloading the page when the source code is changed!

The following is also the same. It uses PointGraphics component. This enables updating graphic properties with minimal cost.

import React from “react”;
import { Viewer, Entity, PointGraphics } from “resium”;
import { Cartesian3 } from “cesium”;
const position = Cartesian3.fromDegrees(-74.0707383, 40.7117244, 100);
const App = () => (





);
Displaying description of an entity
The following example is displaying a simple name and description of the entity.

import React from “react”;
import { Viewer, Entity, PointGraphics } from “resium”;
import { Cartesian3 } from “cesium”;
const position = Cartesian3.fromDegrees(-74.0707383, 40.7117244, 100);
const App = () => (





);
If you want to render rich description, EntityDescription component is the best. It enables using JSX in the description of entities!

import React from “react”;
import { Viewer, Entity, PointGraphics, EntityDescription } from “resium”;
import { Cartesian3 } from “cesium”;
const position = Cartesian3.fromDegrees(-74.0707383, 40.7117244, 100);
const App = () => (

Hello, world.

JSX is available here!

);
Adding Cesium world terrain
terrainProvider prop of Viewer is available.

import React from “react”;
import { Viewer, Entity, PointGraphics, EntityDescription } from “resium”;
import { Cartesian3, createWorldTerrain } from “cesium”;
const terrainProvider = createWorldTerrain();
const position = Cartesian3.fromDegrees(-74.0707383, 40.7117244, 100);
const App = () => (

Hello, world.

JSX is available here!

);
Loading your own data
Cesium and resium support KML, GeoJSON, TopoJSON, and CZML. Let’s load and display your own data!

import React from “react”;
import { Viewer, GeoJsonDataSource, KmlDataSource } from “resium”;
const data = {
type: “Feature”,
properties: {
name: “Coors Field”,
amenity: “Baseball Stadium”,
popupContent: “This is where the Rockies play!”,
},
geometry: {
type: “Point”,
coordinates: [-104.99404, 39.75621],
},
};
const App = () => (

<GeoJsonDataSource data={“your_geo_json.geojson”} />
<KmlDataSource data={“your_geo_json.kml”} />


);
3D tile is also available.

import React from “react”;
import { Viewer, Cesium3DTileset } from “resium”;
import { IonResource } from “cesium”;
const App = () => {
let viewer; // This will be raw Cesium’s Viewer object.
const handleReady = tileset => {
if (viewer) {
viewer.zoomTo(tileset);
}
};
return (
<Viewer
full
ref={e => {
viewer = e && e.cesiumElement;
}}>


);
};
What’s next?
Guide
Components: see menu
Examples
Cesium Documentation