react 地圖可視化 cesium 篇

Vue Function-based API RFC 一出來，感受 vue 愈來愈像 react 了。新立項目，決定嘗試下 react.js。下面是 react 集成 cesium，核心部分是 webpack 的配置。

1、安裝 create-react-app

npm install -g create-react-app
複製代碼

2、react 工程建立

create-react-app cesium-react
複製代碼

3、cesium 安裝

npm install cesium --save
複製代碼

4、copy-webpack-plugin 安裝

npm install copy-webpack-plugin --save-dev
複製代碼

5、提取 webpack 配置文件

create-react-app 建立的項目，默認會隱藏 webpack 的配置項，因此須要將 webpack 配置文件提取出來。

npm run eject
複製代碼

成功後，項目根目錄下會多出二個文件夾，config scripts，其中 webpack 的配置文件 webpack.config.js 位於 config 文件夾。

6、webpack 配置

一、添加 Cesium module name

module.exports = function (webpackEnv) {
    ...
    return {
        ...
        resolve: {
            alias: {
                // Cesium module name
                cesium: path.resolve(__dirname, '../node_modules/cesium/Source')
            }
        }
    }
}
複製代碼

二、添加 static files 管理

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

module.exports = function (webpackEnv) {
    ...
    return {
        ...
        resolve: {
            alias: {
                // Cesium module name
                cesium: path.resolve(__dirname, '../node_modules/cesium/Source')
            }
        },
        plugins: [
            ...
            // Copy Cesium Assets, Widgets, and Workers to a static directory
            new CopyWebpackPlugin([ { from: path.join('node_modules/cesium/Source', '../Build/Cesium/Workers'), to: 'Workers' } ]),
            new CopyWebpackPlugin([ { from: path.join('node_modules/cesium/Source', 'Assets'), to: 'Assets' } ]),
            new CopyWebpackPlugin([ { from: path.join('node_modules/cesium/Source', 'Widgets'), to: 'Widgets' } ]),
            new webpack.DefinePlugin({
                // Define relative base path in cesium for loading assets
                CESIUM_BASE_URL: JSON.stringify('')
            })
        ]
    }
}
複製代碼

7、Hello World

一、src/index.js 中引入樣式

import 'cesium/Widgets/widgets.css'
複製代碼

二、src/App.js 初始化地圖

import React, { Component } from 'react';
import Cesium from "cesium/Cesium";

class App extends Component {
  componentDidMount() {
    Cesium.Ion.defaultAccessToken = 'your_access_token';
    const viewer = new Cesium.Viewer("cesiumContainer");
  }
  render() {
    return (
      <div id="cesiumContainer" /> ); } } export default App; 複製代碼

環境以下：

node: v12.5.0
npm: 6.9.0
create-react-app: 3.0.1
複製代碼

小專欄地址：xiaozhuanlan.com/react-cesiu…