文章中所有操作均是在 Cesium 1.91 版本下进行的,其它版本差异请自行适配
验证浏览器
Cesium 需要浏览器支持 WebGL,可以通过访问CesiumJS 官网,能看到正常显示基本上就能测试自己的浏览器是否支持 Cesium,这里强烈推荐使用 Chrome 浏览器。
选择IDE
官网中写到:
If you’re already a seasoned developer, you most likely have a favorite editor or development environment; for example, most of the Cesium team uses Eclipse. If you’re just starting out, a great free and open-source editor is Notepad++, which you can download from their website. Ultimately any text editor will do, so go with the one that you are most comfortable with.
翻译一下:
如果你已经是一个经验丰富的开发人员,你很可能有一个最喜欢的编辑器或开发环境;例如,大多数 Cesium 团队使用 Eclipse。如果你刚刚开始,一个伟大的免费和开源的编辑器是 Notepad++,你可以从他们的网站下载。最终任何文本编辑器都会做,所以去与你最舒适的。
个人观点:
用什么开发工具并不重要,习惯就好,毕竟 Cesium 是一个前端技术,所以你选择什么工具都可以,比如 WebStorm 或者是 VSCode。或者你是个达人,记事本也不是不行。作者这里用的是 VSCode(特别推荐),别的工具没用过,不评价工具之间谁好用谁不好用,适合自己就行了。
下载Cesium源代码
下载地址是:https://cesium.com/downloads/,不过众所周知,速度很感人。或者你想了解最新的进展可以直接克隆 GitHub 上的代码 Cesium GitHub 地址,不过注意有些特性在分支版本里面才有。
下载后,将 zip 文件解压到您选择的新目录(自定义即可)中,内容应该看起来像下面(版本不同会存在差异):
具体每个文件夹的作用这里不做解释了,但是需要注意的是:直接点击 index.html 是无效的,需要放入WebServer 容器中,才能运行起来。
Server端
Cesium 是纯前端的代码,官方给出的源代码中,配套了 nodejs 的 server 端,以及可以通过 nodejs 进行安装部署。其实可以将 Cesium 部署进入tomcat、apache、nginx等服务器中。官网推荐的是 nodejs,咱说心里话,这些年 nodejs 火爆了。
nodejs 的下载与配置我就不多说了,网上一搜一大把,选择一个你看懂的跟着配置配置就行了,您可以移步作者的一篇文章解压缩版的Nodejs安装与配置,希望对您有用。
nodejs 配置完事之后,在刚才 Cesium 所在的文件夹目录(您自己解压的那个目录),打开 cmd 或者 其它命令,运行”npm install“下载依赖的 npm 模块,比如 express 等。如果成功,会在 Cesium 文件夹中出现”node_modules“文件夹。最后再运行”node server.cjs“(老版本是 server.js)或者是”npm start“,成功启动后就会在控制台出现类似”Cesium development server running locally. Connect to http://localhost:8080“等信息。这样基本就可以通过这个本地地址进行访问了,但是需要注意的是不能关闭控制台,保持一直运行状态。
如果你不想使用nodejs
Cesium 是一个开源项目,在刚才你自定义的 Cesium 所在的文件夹目录中,在 Build 中有一个文件夹目录 CesiumUnminified,如下:
拷贝里面所有的文件,放到您自己的项目中,或者直接干脆点,整个 CesiumUnminified 文件夹都拷走(需要注意路径问题),新建一个 html 文件,名字您自定义了。代码如下:
<!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>
<script src="CesiumUnminified/Cesium.js"></script>
<style>
@import url(CesiumUnminified/Widgets/widgets.css);
html, body, #cesiumContainer {
width: 100%; height: 100%; margin: 0; padding: 0; overflow: hidden;
}
</style>
</head>
<body>
<div id="cesiumContainer"></div>
<script>
const viewer = new Cesium.Viewer('cesiumContainer');
</script>
</body>
</html>
稍微解释一下:
-
引入 Cesium.js:
<script src="CesiumUnminified/Cesium.js"></script>
-
导入 Cesium Viewer widget 的样式:
@import url(CesiumUnminified/Widgets/widgets.css);
-
cesium view 存在于该 div 中:
<div id="cesiumContainer"></div>
-
最终创建cesium viewer:
const viewer = new Cesium.Viewer('cesiumContainer');
最后注意下符合您当前环境的路径问题就可以了,通过您的 IDE 开发工具运行起来即可看到效果。