GIS三维可视化-Cesium

前言

Cesium是一款基于WebGL技术的开源三维地球GIS引擎，它提供了丰富的地理信息展示、数据可视化和交互操作功能，可广泛应用于地理信息系统、虚拟仿真、遥感分析等领域。下面我们将讨论Cesium引擎的常用功能开发。

实现效果

Cesium简介

什么是Cesium

Cesium 是一款面向三维地球和地图的，世界级的 JavaScript 开源产品，它提供了基于 JavaScript 语言的开发包，方便用户快速搭建一款零插件的虚拟地球 Web 应用，并在性能，精度，渲染质量以及多平台，易用性上都有高质量的保证

Cesium是基于 Apache2.0 许可的开源程序，它可以免费的用于商业和非商业用途，它隶属于 AGI（Analytical Graphics Incorporation）公司，三位创始人曾在通用公司宇航部的供职工程师，提供 STK（System/Satellite Toolkit Kit）和 Cesium两款产品，该公司是航天分析软件的领导者，而 STK 则是该公司的旗舰产品，比如 马航MH370 搜救过程就采用了 STK 软件，经过多年来在时空数据的积累，AGI 公司逐渐掌握了大量 3D 可视化技术，也感受到各行各业对海量 3D 数据的强烈需求，因此于2011年创建了 CesiumJS 开源项目，围绕 Cesium 生态圈打造了一套安全可靠易扩展且平台独立的企业级解决方案

而 Chrome 也是在2011年2月份推出了支持 WebGL 的第一个版本，在这点上，Cesium算是第一个敢吃螃蟹的人，Cesium 原意是化学元素铯，铯是制造原子钟的关键元素，通过命名强调了 Cesium 产品专注于基于时空数据的实时可视化应用

至今，CesiumJS 的下载量超过 1,000,000，是一个为数百万用户提供了强大的应用程序

作为前端程序员，只是单纯做可视化，其实在我看来， Cesium 与 Leaflet 以及 OpenLayer 等没有本质的区别，只是Cesium支持三维场景等等，做的更漂亮

Cesium可以做什么

支持全球级别的高精度的地形和影像服务

支持 2D、2.5D、3D 形式的地图展示，真正的二三维一体化

支持矢量、海量模型数据（倾斜，BIM，点云等）

支持基于时间轴的动态数据可视化展示

Cesium的浏览器兼容性

学习和使用 Cesium 前，首先要检查一下你的浏览器是否支持 WebGL，目前，大多数平台和浏览器都支持WebGL，在这些环境下运行 Cesium 并没有太大的问题，但效果和性能是否能够满足不同的需求，就需要考虑很多细节和额外因素

下载Cesium包

首先，我们要下载 Cesium 包，官网下载即可，Cesium 每个月都会更新一个版本，一直在迭代，这点就足以证明它的活跃性以及未来，地址如下 👇

Cesium Download

下载下来解压后你会发现有很多文件，如下图

我们下载这个包里包括 Cesium API 源代码 Source 文件夹，以及编译后的 Build 文件夹，还有Demo、API文档、沙盒等等，这些都不用管

我们只需要 Build 文件夹下面的 Cesium 这个文件夹，它是编译后 Cesium 包的正式版本，开发的话只需要这个就完了

初始化地球

首先，我们找地方新建一个目录，这里目录名为 demo ，我们把上面说的 Cesium 这个文件夹拖进来

接着，我们在 demo 目录下新建一个 index.html 文件，初始化一个地球，只需四步

No.1 引入 cesium.js，该文件定义了 Cesium 对象，它包含了我们需要的一切

xml 复制代码

<script src="./Cesium/Cesium.js"></script>

No.2 引入 widgets.css，为了能使用Cesium 各个可视化控件

less 复制代码

@import url(./Cesium/Widgets/widgets.css)

No.3 在 HTML 的 body 中我们创建一个 div，用来作为三维地球的容器

bash 复制代码

<div id="cesiumContainer"></div>

No.4 在 JS 中初始化 CesiumViewer 实例

csharp 复制代码

let viewer = new Cesium.Viewer('cesiumContainer')

完整代码如下

xml 复制代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="./Cesium/Cesium.js"></script>
    <style>
      @import url(./Cesium/Widgets/widgets.css);
      html,body,#cesiumContainer {
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 0;
      }
    </style>
  </head>
  <body>
    <div id="cesiumContainer"></div>
    <script>
      window.onload = function () {
        let viewer = new Cesium.Viewer("cesiumContainer")
      }
    </script>
  </body>
</html>

运行环境

平常我们写一个页面，浏览器打开 html 文件即可，在写 Cesium 程序的时候，不要本地双击浏览器运行，因为在实际工作中，它是需要运行在Web服务器上的

这里我们使用Node来搭建这个服务，首先你要在电脑装Node，这个不过多赘述，不了解自行百度安装即可

官网包括一般的教程里这个时候就要手写代码用 express 或者 Koa 简单的搭一个Web服务了，但是这也是没有必要的，这里我们只是写个 demo，没必要再去写后端代码什么的，太麻烦，我们装一个 live-server 就行了

live-server 是一个具有实时加载功能的小型服务器，简单说，你装了它，直接在当前目录命令行运行命令这个服务就起来了

安装 live-server 命令如下

vbscript 复制代码

npm install -g live-server

再次强调，这只是一个小 demo，一般来说正常项目开发中 Vue+Cesium 我觉得是最佳实践了，而使用 Vue 来开发的话 Vue-CLI 本身就是一个本地服务，我们如果要原生开发的话 live-server 就行了，虽然写个Web服务不难，但终归是浪费时间

当我们 Node 安装好了，也装上了 live-server 后，我们在终端 cd 到项目根目录下，执行下面命令

vbscript 复制代码

live-server

默认启动的是8080端口，如下图

紧接着，直接在浏览器输入 http://127.0.0.1:8080 ，你的第一个 Cesium 程序就 👌 了

如上所示，页面上就会呈现一个 3D 的地球了，是不是很简单，有没有勾起你入手的欲望呢？

这次就到这里，下次我们来说一说 Vue 里面使用 Cesium 开发以及一些注意事项，一步一步来，心急吃不了热豆腐，每篇文末会给大家列出我一些相关的学习地址

最后

喜欢的小伙伴可以私我源码发放