AurorePaladin
commented
2 years ago 编写HelloWorld
首先，先编写全屏样式，将 src/App.scss 内容更改为：
#cesiumContainer {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
overflow: hidden;
border: none;
}请注意一定要设置 position、left、top，否则最终网页画布高度会比 body 低 4 个像素，造成底部有空白缝隙。
然后，根据 Cesium.js 官方文档提供的示例代码，将 src/App.tsx 内容更改为：
import { useEffect } from 'react';
import * as Cesium from 'cesium';
import "cesium/Build/Cesium/Widgets/widgets.css";
import './App.scss';
function App() {
useEffect(() => {
//@ts-ignore
window.CESIUM_BASE_URL = '/';
//下面的秘钥是我随意编写的字符，你一定要更换成你自己账户对应的 token 秘钥。
Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiyXVCJ9.eyJqdGkiOiJiZTgxMTM3OS02MC03MzQ1NDFhOTBiNWIiLCJpZCI6NIsInR5cCI6IkpLdCiEYCdmYjg5LTRkNzYtODU4QTAmnketCiZIQsdR4jQyMzIsImlhdCI6MTYyODk5NTQ0OH0.FCf9_DL02Gr7730c';
const viewer = new Cesium.Viewer('cesiumContainer', {
terrainProvider: Cesium.createWorldTerrain()
});
const buildingTileset = viewer.scene.primitives.add(Cesium.createOsmBuildings());
viewer.camera.flyTo({
destination: Cesium.Cartesian3.fromDegrees(-122.4175, 37.655, 400),
orientation: {
heading: Cesium.Math.toRadians(0.0),
pitch: Cesium.Math.toRadians(-15.0),
}
});
return () => {
buildingTileset.destroy();
}
}, [])
return (
<div id='cesiumContainer'>
</div>
);
}
export default App;实际如果只是为了普通演示，上述 token 相关代码不添加也可以运行。
至于其他代码，暂时先不用去理解都是什么含义。
补充说明：
-
对于 Three.js 的项目，需要的是一个 画布标签
<canvas>，而对于 Cesium.js 来说需要的是一个<div>标签。并且给该 div 添加一个名为
cesiumContainer的 id。 -
请留意上面代码中的这一行：
//@ts-ignore window.CESIUM_BASE_URL = '/';可以看出来 cesium.js 需要向 window 添加一个全局变量 CESIUM_BASE_URL 。
由于使用的是 TypeScript，检查到 window 默认并不包含该属性，所以会报错，这里暂时通过注释选择忽略这个问题。
关于 window.CESIUM_BASE_URL 的再次补充说明：
为了避免日后每次都要添加 //@ts-ignore，所以采用这样一劳永逸的解决方式：
编辑项目根目录的 global.d.ts 文件，添加以下内容：
interface Window {
CESIUM_BASE_URL: string;
}请注意，之前已经在 tesconfig.json 中有如下配置：
"include": [ "src", "global.d.ts" ]
为了确保一切生效，最好重启一下 VSCoder。
这样，当下次再去添加 window.CESIUM_BASE_URL 时，就会有正确的提示，也不会再报错了。
关于 window.CESIUM_BASE_URL 的第 3 次补充：
Cesium.js 还提供了另外一种设置 base url 的方式：
import buildModuleUrl from 'cesium/Source/Core/buildModuleUrl'
buildModuleUrl.setBaseUrl('./static/cesium/') //这样就不再用设置 window.CESIUM_BASE_URL 了他的效果和直接设置 window.CESIUM_BASE_URL 是一模一样的。
不过，由于官方 JSDoc 文档的不严谨，导致 setBaseUrl() 这个函数实际上并未被真正导出到 cesium.d.ts 中。
这是因为 buildModuleUrl 本身就是一个函数，在这个函数身上再次添加一个 setBaseUrl() 函数，此时 buildModuleUrl 又被认为是一个命名空间
buildModuleUrl 即是一个函数，又是一个命名空间，这导致 JSDoc 理解错乱，所以才没有正确导出 setBaseUrl() 这个函数。
所以，还需要这样使用 TS 注释忽略才可以：
//@ts-ignore
buildModuleUrl.setBaseUrl('./static/cesium/')buildModuleUrl 还提供了一个名为 getCesiumBaseUrl() 的函数，可以获取已设置的 base url。
buildModuleUrl.getCesiumBaseUrl()调试运行：
yarn start
Cesium简介
通过该软件平台，制作出了一个非常精细、准确的 虚拟3D地球。
为了凸显这个软件平台的
精细、准确这个理念，所以使用 原子钟 核心元素 “铯(cesium)” 这个英文单词来作为该平台的名字。该软件平台(cesium)于 2012 年开源。
Cesium 软件平台提供一套完整的工具，可用于构建任何类型的 3D 地理空间应用程序。
Cesium 软件平台分为 开源免费 和 商业收费 2 种模式。
Cesium 和 Cesium.js 的关系：
Cesium 是一个平台，提供多种基于 3D 地理空间应用的工具。
Cesim.js 是该平台提供的客户端(浏览器) 对应的 JS 文件。
Cesium与其他类库的关系：
初始化项目
将基于 React + TypeScript + Scss + alias 来编写代码。
第1步：创建并初始化项目
以上代码可以合并为 2 行：
关于Cesium.js的TypeScript类型声明的补充说明：
Cesium.js 的源码内部使用 JSDoc 方式对所有的类、属性、方法进行了类型定义。
通过构建命令
yarn run build-ts在 Source 根目录生成一个 Cesium.d.ts 的文件，用来存放所有的类型声明。也就是说默认情况下 NPM 包中自带有 类型声明 文件，但是会存在以下情况：
以上情况造成了默认 Cesium.d.ts 文件并不是完美的，存在一些错误或缺失的类型定义。
Cesium.js 还有第三方维护的 类型文件包：@types/cesium
这个包是由一些开发人员自行维护，人工编写 Cesium 声明类型，相对于默认的 Cesium.d.js，它更加精准。
你可以选择手工删除默认的 Cesium.d.ts 文件，安装并使用 @types/cesium。
不过正因为是人工编写的，所以存在时效性，无法做到与官方 Cesium.js 同步更新，有一定的滞后性。
Cesium.d.ts与@types/cesium的对比总结：
第2步：清除一些无用文件或代码
<title>内容修改为 “Hello Cesium”<div>内的代码、删除import React from 'react'第3步：修改或添加一些项目配置
修改 src 目下的 App.css 和 index.css 的文件后缀，改为 .scss，同时修改 App.tsx 和 index.tsx 中引用这两个样式文件路径中的后缀
项目根目录添加
.eslintrc文件内容为：项目根目录添加
tsconfig.paths.json文件内容为：项目根目录添加
craco.config.js文件内容为：修改项目根目录的
package.json，将调试命令修改为：同时在顶部，添加
homepage的配置：修改项目根目录的
tsconfig.json文件内容改为：项目根目录添加
global.d.ts文件内容暂时为空，方便后期添加一些内容：至此，一个空白的项目创建完成。
补充说明：
对应一个规范严格的项目而言，目前缺失的配置有：
.vscodeREADME.mdLICENSECHANGELOG.mdtest/上面提到的这些和要学习的 Cesium.js 关系不大，所以就不做相关配置了。
注册一个Cesium ion 账号
首先需要搞明白一个事情：
但是刚接触 cesium.js，在编写 hello world 时是需要使用 Cesium ion 提供的数据的，所以还是要注册账号的。
注册账户
https://cesium.com/ion/signup/
获取令牌(token)
https://cesium.com/ion/tokens
默认注册账户成功后，就会有一个默认的令牌
Default Token。你可以选择
Create token自己创建一个令牌，并根据提示设置该令牌的相关权限：免费的账户，默认的令牌只开启了：assets:read、geocode
配置当前项目的令牌：
默认 https://cesium.com/ion/tokens 左侧令牌列表中 选中的是 默认令牌，此时网页右侧就会显示该令牌的秘钥 和 令牌的权限。
复制右侧
Token的内容。在后续的示例项目中，会有以下代码片段：
需要做的就是将复制得到的
Token秘钥替换上述代码中的your_access_token