01 Cesium—环境搭建

WorkLee

已于 2022-03-25 16:54:22 修改

阅读量2.4k

点赞数 2

分类专栏： Cesium 文章标签： GIS cesium

于 2022-03-22 22:33:59 首次发布

本文链接：https://blog.youkuaiyun.com/lili40342/article/details/123673641

版权

Cesium 专栏收录该内容

22 篇文章

订阅专栏

在这里插入图片描述

文章中所有操作均是在 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 开发工具运行起来即可看到效果。
在这里插入图片描述