讓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>