基于React脚手架集成Cesium

360 阅读1分钟

创建一个 React 项目

create-react-app cesium-app --template typescript

安装模块

yarn add @craco/craco@alpha craco-cesium cesium resium

重写npm 脚本(package.json)

"scripts": {
    "start": "craco start", // react-scripts -> craco
    "build": "craco build", // react-scripts -> craco
    "test": "craco test",   // react-scripts -> craco
    "eject": "react-scripts eject"
  }

创建 craco 配置文件

在项目根目录中创建:craco.config.js

module.exports = {
  plugins: [
    {
      plugin: require("craco-cesium")()
    }
  ]
};

完成

按如下方式导入cesium

import { Viewer, Entity, Color } from "cesium";

如果使用的是 Resium,则可以按如下方式导入 Cesium 和 Resium

import { Color } from "cesium";
import { Viewer, Entity } from "resium";