简单记一下搭建cesium项目的过程
从官网下载cesium.js开始
官网下载cesium.js cesium.com/learn/cesiu…
随后新建项目文件，使用vscode打开，解压上述下载的压缩包，将Build文件夹下的cesium包拷贝到项目文件夹中，如图：
开始使用cesium
在项目中新建index.html文件，在文件中引入Cesium.js和组件样式widgets.css文件，如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<!-- 引入Cesium.js -->
<script src="./Cesium/Cesium.js"></script>
<!-- 引入widgets.css组件样式 -->
<link rel="stylesheet" href="./Cesium/Widgets/widgets.css" />
</head>
<body>
</body>
</html>
在body中添加一个div标签，并添加id属性，例如：<div id="cesiumContainer"></div>，div标签的作用用于承载加载的地图，即装载地图的容器，因此必须指定div的宽度,
新增script标签
<!-- 样式 -->
<style>
/* 必须指定容器宽高，否则无法看到加载的地图 */
html,
body,
#cesiumContainer {
width: 100%;
height: 100%;
}
</style>
<!-- 结构 -->
<body>
<!-- 新增div标签用于承装地图的容器 -->
<div id="cesiumContainer"></div>
<script></script>
</body>
随后注册cesium官网账号，获取个人的token，指定defaultAccessToken，创建实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<!-- 引入Cesium.js -->
<script src="./Cesium/Cesium.js"></script>
<!-- 引入widgets.css组件样式 -->
<link rel="stylesheet" href="./Cesium/Widgets/widgets.css" />
<style>
/* 必须指定容器宽高，否则无法看到加载的地图 */
html,
body,
#cesiumContainer {
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<!-- 新增div标签用于承载地图的容器 -->
<div id="cesiumContainer"></div>
<script>
// 你的token
const token = 'xxxxx';
Cesium.Ion.defaultAccessToken = token;
const viewer = new Cesium.Viewer('cesiumContainer', {
// 使用世界地形图作为地图
terrainProvider: Cesium.createWorldTerrain
});
</script>
</body>
</html>
到处直接使用浏览器打开html文件，发现会报错，这是因为cesium的运行需要放到服务器上运行，如果本地安装了Tomcat，可以将项目文件拷到webapps目录下使用localhost://xxx方式打开，也可以自行使用node搭建后台服务打开，
这里我个人是在vscode安装了Live Server插件，只需右键Open with Live Server直接运行
到此就完成了一个地图的加载了！
后续再出不同底图的获取与加载，还有不同标签的定义等等...
