基于React腳手架集成Cesium

文章目錄

• 基于React腳手架集成Cesium
• • 1. 安裝環境
  • 2. 創建項目
  • 3. 引入Cesium
  • 4. 修改文件
  • 5. 參考鏈接

1. 安裝環境

安裝Node.js

https://nodejs.org/en/download/

全局安裝Yarn

npm install -g yarn

全局安裝React腳手架

npm install -g create-react-app

2. 創建項目

注意：項目名稱中不能包含大寫字母

create-react-app 項目名稱

在生成的項目文件中是看不到webpack相關的配置文件的，原因是React腳手架將webpack相關的配置隱藏起來了，但是集成Cesium時需要修改Webpack的配置，我們可以執行一個package.json文件中的一個腳本：“eject”: “react-scripts eject”

yarn run eject

安裝依賴包

yarn

3. 引入Cesium

安裝cesium包，我這里指定了版本1.70.1

yarn add cesium@1.70.1

安裝webpack相關依賴，注意指定版本，之前默認安裝的最新版本，啟動后報錯：compilation.getCache is not a function

yarn add copy-webpack-plugin@6.0.3 --dev

4. 修改文件

修改文件之前先通過命令yarn start啟動項目，查看是否正常。

之后停掉項目后，修改配置文件config/webpack.config.js。

添加const CopyWebpackPlugin = require('copy-webpack-plugin');

修改plugins屬性

添加如下內容：

// Copy Cesium Assets, Widgets, and Workers to a static directorynew CopyWebpackPlugin({patterns: [{ from: 'node_modules/cesium/Build/Cesium/Workers', to: 'Workers' },{ from: 'node_modules/cesium/Build/Cesium/ThirdParty', to: 'ThirdParty' },{ from: 'node_modules/cesium/Build/Cesium/Assets', to: 'Assets' },{ from: 'node_modules/cesium/Build/Cesium/Widgets', to: 'Widgets' }],}),new webpack.DefinePlugin({// Define relative base path in cesium for loading assetsCESIUM_BASE_URL: JSON.stringify('')}),

修改alias屬性，添加如下內容，如果不加的話編譯時會報錯：Module not found: Can’t resolve 'cesium/Widgets/widgets.css’

'cesium': path.resolve('node_modules/cesium/Source'),

修改src/index.js

添加內容：import 'cesium/Widgets/widgets.css'

修改src/App.js，內容如下

import React, { Component } from 'react'; import * as Cesium from "cesium/Cesium"; import './App.css';class App extends Component {componentDidMount() {Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI1NWI5MGUzNi1mYWI3LTQzY2QtOGI0Ni0xZWYyNTAxNGM4N2MiLCJpZCI6MTI1OTgsInNjb3BlcyI6WyJhc3IiLCJnYyJdLCJpYXQiOjE1NjE0NDkyNTV9.hBH0PGSnKErc_yNhIePASUkr3QPDoo0KDX9uLpNBUns';const viewer = new Cesium.Viewer("cesiumContainer");}render() {return (<div id="cesiumContainer" />);} }export default App;

修改src/App.css，添加

#cesiumContainer {height: 100vh; }

啟動項目yarn start，查看效果

5. 參考鏈接

• React+Cesium搭建網頁并使用tomcat發布

• React腳手架

• cesium-webpack-example

• ceisum加載默認地形數據并解決401錯誤

《新程序員》：云原生和全面數字化實踐50位技術專家共同創作，文字、視頻、音頻交互閱讀

總結

以上是生活随笔為你收集整理的基于React脚手架集成Cesium的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。