1.首先用脚手架创建一个typescript项目
create-react-app xxxxx --template typescript
2.安装cesium和resium(resium是react封装的cesium库)
//我的cesium的版本为1.95.0,之后的版本按照这种方法会报错
yarn add cesium resium
3.配置CESIUM_BASE_URL
CesiumJS需要在您的服务器上托管一些静态文件,例如Web workers和SVG图标。配置模块捆绑程序以复制以下四个目录并将它们作为静态文件提供:
node_modules/cesium/Build/Cesium/Workers
node_modules/cesium/Build/Cesium/ThirdParty
node_modules/cesium/Build/Cesium/Assets
node_modules/cesium/Build/Cesium/Widgets
在导入 CesiumJS 之前,必须设置全局变量。它必须指向提供这四个目录的 URL。
4.从node_moudles下找到Cesium包,放到public文件下(复制粘贴)
5.引入Cesium样式
<link href="https://cesium.com/downloads/cesiumjs/releases/1.95/Build/Cesium/Widgets/widgets.css" rel="stylesheet">
//引入Cesium目录下widgets.css静态资源也一样 两个都可以
<link href="./Cesium/Widgets/widgets.css" rel="stylesheet">
6.初始化Cesium地球,以及一些基础参数的配置
import React, { Component } from "react";
import * as Cesium from 'cesium'
import "./index.scss"
export default class CesiumMap extends Component {
componentDidMount = () => {
Cesium.Ion.defaultAccessToken = "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiJkMmFjY2QzZS00YzhlLTRkZmItOWViMy0wYmVmZjU4M2QwZTUiLCJpZCI6MTAyMTQ5LCJpYXQiOjE2NTg0ODEyMzB9.I0ykOK_Aj9n3Wj6ANHV9o70rPF4FXJw6lxSewIFm8J0"
const viewer = new Cesium.Viewer("cesiumContainer", {
animation: false, // 是否创建动画小器件,左下角仪表
baseLayerPicker: false, // 是否显示图层选择器
fullscreenButton: false, // 是否显示全屏按钮
geocoder: false, // 是否显示geocoder小器件,右上角查询按钮
homeButton: false, // 是否显示Home按钮
infoBox: false, // 是否显示信息框
sceneModePicker: false, // 是否显示3D/2D选择器
selectionIndicator: false, // 是否显示选取指示器组件
timeline: false, // 是否显示时间轴
// sceneMode: Cesium.SceneMode.SCENE3D, // 设定3维地图的默认场景模
navigationHelpButton: false, // 是否显示右上角的帮助按钮
// scene3DOnly: true, // 如果设置为true,则所有几何图形以3D模式绘制以节约GPU资源
navigationInstructionsInitiallyVisible: false, //是否显示帮助信息控件
showRenderLoopErrors: false, // 是否显示渲染错误
// 设置背景透明
orderIndependentTranslucency: false,
contextOptions: {
webgl: {
alpha: true
}
},
terrainProvider: Cesium.createWorldTerrain()
// terrainProvider: new Cesium.CesiumTerrainProvider({
// url: terrainLayer,
// requestVertexNormals: true,
// requestWaterMask: true
// })
})
}
render() {
return <div id="cesiumContainer" className="cesiumContainer">
</div>;
}
}
Cesium.Ion.defaultAccessToken是Cesium官网注册得到的token
详情可以参考Cesium官网:
Cesium的react组件库:https://resium.reearth.io/
7.隐藏左下角Icon
//隐藏Icon
.cesium-widget-credits {
display: none !important;
visibility: hidden !important;
}
8.初始化完成
讨论:这个方法是根据官网和resium来的,我查询初始化Cesium相关的文档,按照配置webpack.config.js那种方法我在js项目中初始化成功了,但是在ts项目中,我按照webpack配置没有初始化成功,可能是哪里有问题,安装Cesium后,引入的时候会报错提示我没有安装Cesium(我不太理解),希望有ts项目配置webpack.config.js成功后的大佬可以教教我。
注:resium是react已经封装好的组件库,也可以使用resium进行初始化。