cesium-react
React components for 🌏 Cesium
;;; PureComponent { return <Viewer full> <Entity name="tokyo" position=Cartesian3 point= pixelSize: 10 > test </Entity> </Viewer> ; }
Available components:
<Viewer>
<CesiumWidget>
<Scene>
<Camera>
<Entity>
<CustomDataSource>
<CzmlDataSource>
<GeoJsonDataSource>
<KmlDataSource>
<Primitive>
<PointPrimitive>
<PointPrimitiveCollection>
<ScreenSpaceEvent>
<ScreenSpaceEventHandler>
<ScreenSpaceCameraController>
<ImageryLayer>
- ...
Documentation
Sorry, no documents now.
Please refer to storybook and examples:
git clone https://github.com/rot1024/cesium-react.gitcd cesium-reactyarn # run dev server for examples yarn run examples:dev# run storybook yarn run storybook
Getting Started
Typical env: webpack + copy-webpack-plugin + html-webpack-include-assets-plugin
npm i cesium cesium-react --savenpm i copy-webpack-plugin --save-devnpm i html-webpack-include-assets-plugin --save-dev
webpack.config.js:
const CopyWebpackPlugin = ;const HtmlWebpackIncludeAssetsPlugin = ; moduleexports = externals: cesium: "Cesium" output: publicPath: "/" // ... plugins: from: `node_modules/cesium/Build/Cesium` to: "cesium" append: false assets: "cesium/Widgets/widgets.css" "cesium/Cesium.js" "process.env": NODE_ENV: JSON CESIUM_BASE_URL: JSON // ... // ...
Cesium official way
⚠ Unconfirmed
After the article:
npm i cesium-react
moduleexports = // ... alias: cesiumSource: "cesium" cesium: "cesium/Cesium" // ...
Then replace as bellow:
;
to
;
TODO
- Implement other components (Model, EntityCollection, ParticleSystem, Cesium3DTileset ...)
- Set up proper prop types
- More unit tests
- More documentation
- More examples
Contributing
Welcome PRs and issues.