搭建開發環境
create-react-app + typescript + cesium
新建工程
- 執行如下命令
create-react-app --typesctipt cesium-react-ts
- 進入cesium-react-ts 目錄執行
yarn run eject
- 執行yarn run start 測試項目是否安裝成功
如果報錯,刪除node_modules,重新安裝依賴
安裝cesium並配置
參考https://blog.csdn.net/qq_33484881/article/details/85336458 這篇博客進行配置,
錯誤處理
- CESIUM_BASE_URL錯誤處理
App.tsx代碼如下:
import React, { Component } from 'react'
const Cesium: any = require('cesium/Cesium')
const initViewerOptions = {
selectionIndicator: false,
// shadows: true, // 陰影不顯示
shouldAnimate: true,
vrButton: false,
animation: false, // 動畫控制不顯示
baseLayerPicker: false, // 圖層控制顯示
geocoder: false, // 地名查找不顯示
timeline: false, // 時間線不顯示
sceneModePicker: false, // 投影方式顯示
sceen3DOnly: true,
requestRenderMode: true,
fullscreenButton: false,
homeButton: false,
infoBox: false,
navigationHelpButton: false,
contextOptions: {
webgl: {
alpha: true
}
}
}
class App extends Component {
viewContainer: any
componentDidMount() {
const viewer = new Cesium.Viewer(this.viewContainer, initViewerOptions)
}
render() {
return (
<div id='cesiumContainer' ref={node => (this.viewContainer = node)} />
)
}
}
export default App
錯誤信息如下:
解決方案:
修改config/env.js如下:
'use strict';
const fs = require('fs');
const path = require('path');
const paths = require('./paths');
// Make sure that including paths.js after env.js will read .env variables.
delete require.cache[require.resolve('./paths')];
const NODE_ENV = process.env.NODE_ENV;
if (!NODE_ENV) {
throw new Error(
'The NODE_ENV environment variable is required but was not specified.'
);
}
// https://github.com/bkeepers/dotenv#what-other-env-files-can-i-use
const dotenvFiles = [
`${paths.dotenv}.${NODE_ENV}.local`,
`${paths.dotenv}.${NODE_ENV}`,
// Don't include `.env.local` for `test` environment
// since normally you expect tests to produce the same
// results for everyone
NODE_ENV !== 'test' && `${paths.dotenv}.local`,
paths.dotenv,
].filter(Boolean);
// Load environment variables from .env* files. Suppress warnings using silent
// if this file is missing. dotenv will never modify any environment variables
// that have already been set. Variable expansion is supported in .env files.
// https://github.com/motdotla/dotenv
// https://github.com/motdotla/dotenv-expand
dotenvFiles.forEach(dotenvFile => {
if (fs.existsSync(dotenvFile)) {
require('dotenv-expand')(
require('dotenv').config({
path: dotenvFile,
})
);
}
});
// We support resolving modules according to `NODE_PATH`.
// This lets you use absolute paths in imports inside large monorepos:
// https://github.com/facebook/create-react-app/issues/253.
// It works similar to `NODE_PATH` in Node itself:
// https://nodejs.org/api/modules.html#modules_loading_from_the_global_folders
// Note that unlike in Node, only *relative* paths from `NODE_PATH` are honored.
// Otherwise, we risk importing Node.js core modules into an app instead of Webpack shims.
// https://github.com/facebook/create-react-app/issues/1023#issuecomment-265344421
// We also resolve them to make sure all tools using them work consistently.
const appDirectory = fs.realpathSync(process.cwd());
process.env.NODE_PATH = (process.env.NODE_PATH || '')
.split(path.delimiter)
.filter(folder => folder && !path.isAbsolute(folder))
.map(folder => path.resolve(appDirectory, folder))
.join(path.delimiter);
// Grab NODE_ENV and REACT_APP_* environment variables and prepare them to be
// injected into the application via DefinePlugin in Webpack configuration.
const REACT_APP = /^REACT_APP_/i;
function getClientEnvironment(publicUrl) {
const raw = Object.keys(process.env)
.filter(key => REACT_APP.test(key))
.reduce(
(env, key) => {
env[key] = process.env[key];
return env;
},
{
// Useful for determining whether we’re running in production mode.
// Most importantly, it switches React into the correct mode.
NODE_ENV: process.env.NODE_ENV || 'development',
// Useful for resolving the correct path to static assets in `public`.
// For example, <img src={process.env.PUBLIC_URL + '/img/logo.png'} />.
// This should only be used as an escape hatch. Normally you would put
// images into the `src` and `import` them in code to get their paths.
PUBLIC_URL: publicUrl,
}
);
// Stringify all values so we can feed into Webpack DefinePlugin
const stringified = {
'process.env': Object.keys(raw).reduce((env, key) => {
env[key] = JSON.stringify(raw[key]);
return env;
}, {}),
CESIUM_BASE_URL:JSON.stringify('')
};
return { raw, stringified };
}
module.exports = getClientEnvironment;
- _Critical dependency _
解決方法:
在Webpack的module中配置如下:
module: {
// ...
//解決Critical dependency: require function is used in a way in which dependencies cannot be statically extracted的問題
unknownContextCritical : false,
rules: [
// ...