让GIS三维可视化变得简单-初识Cesium

时间 2021-02-17

标签 css html 前端 git 程序员 github web express npm 后端栏目 CSS 繁體版

原文原文链接

前言

从去年开始无脑接触 Cesium 三维 GIS 可视化，入坑以后一直到到如今，其实已经写了多个项目了，中间也遇到了不少坑点，很早就想分享其中所获了，只是以为不太专业并且没有太多时间，拖到如今，从开始接触 Cesium ，加了一个QQ交流群，从刚开始的 200 人，到如今的 3000 人，好像使用 Cesium 作可视化方向的人愈来愈多了，而且其中不少人都是如我同样，从前端半路入坑css

记得好像是公众号「Cesium中文网」曾发过一篇文章名叫「Cesium只剩可视化了吗」我的以为写的很棒，虽然 Cesium 不止是能够作可视化这么简单，可是目前大部分选择投入其中的人是奔着可视化这个方向的，这点从 300 到 3000 足以证实html

我的写做习惯篇幅很长，文章产出老是很慢，之因此还想要写这个系列的文章，大概有三点前端

Cesium 毕竟是一个世界级 JavaScript 开源产品，作 CS 还好，可是作 BS，特别是可视化产品是须要扎实的前端基础的，相比较下专业的 GIS 对前端一些框架了解好像不太多，并不能很好的把本身丰富的 GIS 知识或者说一些很强大的功能在前端炫酷的展示出来，毕竟功能再强大，不通过雕琢和装饰总归仍是不能被人推崇的
近两年前端同窗半路入坑 Cesium 的人太多了，可是因为没有扎实的 GIS 基础，涉及深刻一点的 GIS 核心的效果实现并不容易，一路上的磕磕绊绊实在是太多了，这个是亲身经历，且十分惨痛
关于 Cesium，一直是本身在摸索，项目也写很多了，可是确定有不少地方在更为专业的人看来是闹着玩同样，因此水水文章看看进本身脑子的知识有哪些是炸弹，回顾一遍排排雷，查漏补缺

其实我我的对 CS 方面彻底没有经验，BS 作可视化有些项目经验，可是说实话，只懂皮毛，不过在前进的道路上爬了太多的坑，因此能够与你们分享些爬坑经验，也充实下本身，涉入 GIS 不会很深，不过通常的仍是能够的，算带你们入入门吧，也但愿能够和你们一块儿查漏补缺，正所谓山中无老虎，猴子称大王，没错，我就是那只猴子，谁让如今Cesium相关的技术帖辣么少呢git

写的帖子目前想法是除了入门以外会更倾向于各类好玩炫酷的效果制做，因此它也会更倾向于实战系列，你也能够把它看成入门级教程，这个系列我尽可能每文简短些，控制在5000字之内，让你们看着舒服 😄程序员

PS：github

CS 指 Client/Server，客户端/服务器模式，桌面级应用，响应速度快，安全性强，个性化能力强，响应数据较快，兼容性差，不跨平台，开发成本高
BS 指 Browser/Server，浏览器/服务器模式，Web应用，能够实现跨平台，客户端零维护，共享性强，可是个性化能力稍低，响应速度稍慢

得瑟一下

看到这篇文章时，可能你们对 Cesium 有所了解，也可能一无所知，甚至不知道它能干什么，先给你们看一个我这边刚入坑时作的第一个基于 Cesium 的可视化产品，如今看其实挺通常的，不过当时刚作出来时确实是挺开心挺有成就感的，也让你们对 Cesium 加深下了解，固然这个项目中只是简单的运用了 Cesium，它远不止于此web

线上预览电脑配置低的话仍是查看GIF吧
GIF预览压缩的比较厉害，高清预览视频能够到公众号「不正经的前端」查看

那么接下来话很少说，赶忙来认识下 Cesium 吧express

Cesium简介

什么是Cesium

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

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 并无太大的问题，但效果和性能是否可以知足不一样的需求，就须要考虑不少细节和额外因素

大多数平台和浏览器都支持 WebGL1.0 标准，也就是 OpenGL ES2.0 规范，2017年年初，Chrome 新版本低调的支持 WebGL2.0，随着各硬件厂商 GPU 性能的提高和 WebGL2.0 规范的成熟，WebGL 技术会有更大的提高潜力，不过不管是 PC 仍是移动端，Chrome 都是 WebGL 开发和应用的最佳平台，因此，若是没有特殊的硬性要求，建议你们使用 Chrome 学习和开发 Cesium

你能够在浏览器中访问 WebGL Report 来查看你的浏览器支持状况

如上图红框中显示，这个浏览器支持 WebGL 1，你也能够点击 WebGL 2 查看本身的浏览器支持状况

清单中除了显示了你的浏览器是否支持 WebGL 标准，还有不少，好比

是否支持深度纹理
顶点着色器的最大属性数
是否支持ANGLE 扩展
等等

一个HelloWorld程序

其实上面的都是废话，可是你又必需要知道，其实对咱们写程序是没有一点帮助的，只是提供数据为了给你们了解下 Cesium 的强大

有的人可能认为学习 Cesium 以前应该学习学习 GIS 基础架构、坐标系、投影、存储类型等等等等，其实我以为若是你有这些常识，那天然是极好的，可是若是没这些知识储备，在刚开始学习 Cesium 的时候，学习这些乱七八糟的，彻底不必

由于这些基础知识学起来很容易打磨积极性，还不如先写几个 demo 程序来的实在，毕竟总得先体会下它的魅力，就像你走在路上，你看到前面有个坑，那确定会绕过去，可是若是坑上有些草，还有些漂亮的花，那就不同了

SO，咱们先搞个地球出来，后面哪里有须要再穿插说一些常识

编译器选择

实力推荐 VS Code 一把梭，固然实在用不习惯其余编译器也都行，看我的习惯，实力强用记事本都没得关系

下载Cesium包

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

Cesium Download

下载下来解压后你会发现有不少文件，以下图

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

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

初始化地球

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

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

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

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

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

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

No.3 在 HTML 的 body 中咱们建立一个 div，用来做为三维地球的容器

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

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

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

完整代码以下

<!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 命令以下

npm install -g live-server

再次强调，这只是一个小 demo，通常来讲正常项目开发中 Vue+Cesium 我以为是最佳实践了，而使用 Vue 来开发的话 Vue-CLI 自己就是一个本地服务，咱们若是要原生开发的话 live-server 就好了，虽然写个Web服务不难，但终归是浪费时间

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

live-server

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

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

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

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

最后

初识 Cesium 必定要知道的几个网站

Cesium 官方教程 Cesium出的官方教程，英文的，能够翻译着看看
Cesium API英文官方文档 Cesium的API太多了，不过有遇到不知道API能够查一查，不过也是英文的
Cesium API中文文档 Cesium中文网翻译的API文档，不太全，不过初步确定是够用的
Cesium Sandcastle 沙盒示例 Cesium官方的一些示例程序，没事能够多逛逛
Cesium 中文网 Cesium中文网，里面有系列教程，部分是免费的，能够学习不少知识

若是是刚接触Cesium，这些网站不管如何都要点进去看一看，先简单过一遍便可，后期会用上的

文章收录在 GitHub，更多精彩请看 isboyjc/blog/issues

是前端，又不仅是前端，因此不正经，认真分享干货，公众号「不正经的前端」，欢迎关注