WebGIS開發(fā)引擎的發(fā)展歷程：

內(nèi)容來自公眾號(hào)：Spatial Data

地圖API分類

WebGIS系統(tǒng)通常都圍繞地圖進(jìn)行內(nèi)容表達(dá)，但并不是有地圖就一定是WebGIS，所以下面要討論下基于Web的地圖API分類及應(yīng)用場景。Web上的Map API主要分類：

01 Charts可視化圖表

主要負(fù)責(zé)可視化功能，以D3.js，Echarts等為代表。我們常見的WebGIS開發(fā)地圖周圍有一些可視化的圖標(biāo)，就是通過這些可視化圖表實(shí)現(xiàn)的。

02 LBS地圖開放平臺(tái)

LBS就是Location Based Service，指的是通過電信移動(dòng)運(yùn)營商的網(wǎng)絡(luò)(如GSM網(wǎng)、CDMA網(wǎng))獲取移動(dòng)終端用戶的位置信息(經(jīng)緯度坐標(biāo))，在電子地圖平臺(tái)的支持下，為用戶提供相應(yīng)服務(wù)的一種增值業(yè)務(wù)。

LBS技術(shù)已經(jīng)成為移動(dòng)互聯(lián)網(wǎng)不可或缺的基礎(chǔ)能力，但對(duì)于大部分開發(fā)者來說，自建LBS能力的門檻很高——需要具備地圖測繪資質(zhì)，擁有足夠的地圖數(shù)據(jù)采集和后端云數(shù)據(jù)處理能力。國內(nèi)的LBS以高德/谷歌/百度/天地圖等為代表。

03 WebGIS商業(yè)API

這類也是工作中比較常見的，例如ESRI的ArcGIS API For JS，超圖的IClient，中地?cái)?shù)碼的MapGIS Client for JS，都屬于商業(yè)API。

添加圖片注釋，不超過 140 字（可選）

Google Maps、ESRI、國內(nèi)的超圖、中地等公司都創(chuàng)建了企業(yè)級(jí)數(shù)據(jù)和 API，但是通常使用軟件、庫、包，這些通常需要購買才能使用。這些庫的優(yōu)點(diǎn)是這些庫是由專門的開發(fā)人員創(chuàng)建的，因此這些庫非常穩(wěn)定并且有據(jù)可查。而且是安全且可擴(kuò)展的，因此成為大公司的優(yōu)先選擇。他們的缺點(diǎn)是成本很高，特別是一家初創(chuàng)公司或小公司，與其他成本相比，光使用企業(yè)API，成本就已經(jīng)非常高了。除此之外，開發(fā)人員需要依賴公司發(fā)布新功能，因?yàn)樗脑创a不共享。

04 WebGIS開源API:

今天要討論的重點(diǎn)來了，開源框架是目前使用最多最廣泛的，比較出名的就有Leaflet，OpenLayers，Cesium，MapboxGL等。開源API最大的優(yōu)勢就是免費(fèi)，并且可以根據(jù)任何商業(yè)或非商業(yè)應(yīng)用程序的需要，更改源代碼，以實(shí)現(xiàn)需要的功能，使其成為您自己的產(chǎn)品并進(jìn)行售賣。所以很多小型初創(chuàng)公司，或者預(yù)算不多的公司，都選擇使用開源項(xiàng)目，這樣的庫、包和軟件也存在于GIS領(lǐng)域。他們的缺點(diǎn)是由于這些都是基于社區(qū)的，所以并沒有專門的技術(shù)支持。通常為了構(gòu)建這樣的產(chǎn)品，開發(fā)人員使用現(xiàn)有的開源產(chǎn)品，因此，當(dāng)一旦涉及到新版本發(fā)布時(shí)，工作就會(huì)變得復(fù)雜。開源和企業(yè)API對(duì)比如下圖所示：

下面主要介紹幾款開源API和他們的優(yōu)缺點(diǎn)。

1. LeafLet

Leaflet是一個(gè)輕量級(jí)二維開源JavaScript地圖數(shù)據(jù)庫。

Canvas渲染機(jī)制，僅支持二維表達(dá)，地圖坐標(biāo)系墨卡托投影，不支持球，特點(diǎn)是入手簡單，缺陷是不支持webgl渲染性能有瓶頸，適用于輕量級(jí)簡單地理信息主題可視化。

WebGIS開發(fā)需要重點(diǎn)學(xué)習(xí)JS的核心概念，使用Leaflet JavaScript構(gòu)建基于地圖的應(yīng)用程序，并將學(xué)習(xí)的內(nèi)容放到實(shí)際應(yīng)用。當(dāng)然，學(xué)習(xí)JS的前提是先掌握Web前端編程的內(nèi)容，否則會(huì)很亂。

2. Openlayers

Openlayers也是一個(gè)開源二維地圖數(shù)據(jù)庫，支持canvas和webgl兩種方式渲染地圖，默認(rèn)采用的是canvas。僅支持二維表達(dá)，不限制坐標(biāo)系，不支持球。

OpenLayers的存在也是為了方便進(jìn)一步利用各種地理信息進(jìn)行開發(fā)，可以顯示從任何源加載的地圖分幅、矢量數(shù)據(jù)和標(biāo)記，它將動(dòng)態(tài)地圖放置到網(wǎng)頁中，適合傳統(tǒng)webGIS開發(fā)。

目前企業(yè)不滿足于Openlayers的二維功能，更青睞三維地圖引擎。

也就是我們下面要重點(diǎn)討論的。

3. Mapbox

Mapbox是一款二三維結(jié)合的開源地圖數(shù)據(jù)庫，mapbox和cesium相比更美觀，與openlayers相比支持三維。

Mapbox是二三維一體化，墨卡托坐標(biāo)系，明星數(shù)據(jù)格式是矢量切片，特點(diǎn)是最具美感的專題地圖，適用于互聯(lián)網(wǎng)場景復(fù)雜地理信息表達(dá)，內(nèi)網(wǎng)追求地圖可視化效果的也適用，Mapbox很多優(yōu)化都是基于互聯(lián)網(wǎng)場景的。

Mapbox類似于一個(gè)leaflet的加強(qiáng)版，它專注于Mobile與Web應(yīng)用的地圖體驗(yàn)，有自己定義的地圖樣式、地圖業(yè)務(wù)，該公司也創(chuàng)建開源了很多的開源工具，同時(shí)也專注于Web GL方向，比如Mapbox GL在3D GIS渲染上效果很好。

新中地學(xué)員作品

Mapbox能做什么：

• 能通過各種投影系進(jìn)行地圖瓦片的投影。

• 支持在地圖瓦片上疊加各種圖層，支持 geojson、圖片、文本 等多種信息在圖層上進(jìn)行加載顯示。

• 支持自定義 Style （矢量瓦片）

• 支持 2.5D 視角旋轉(zhuǎn)及顯示

• 支持加載 3D 模型

• 支持通過 DOM 的方式添加 HTML 元素

• 支持 web-gl 能力進(jìn)行圖形渲染

• 支持進(jìn)行 3D 形式的球星地理渲染和星空背景渲染

尤其是其 "2.5D 視角旋轉(zhuǎn)及顯示"、"加載 3D 模型" 這兩點(diǎn)，是非常亮眼的，相比于 OpenLayers 和 Leaflet 這兩款競品，這也是它最為吸引人的地方所在。

4. Cesium

Cesium是一個(gè)三維可視化地圖庫，WebGL渲染機(jī)制。它支持2D\2.5D\3D形式的地圖展示；可以繪制各種幾何圖形、高亮區(qū)域，支持導(dǎo)入圖片，甚至3D模型等多種數(shù)據(jù)可視化展示；還可用于動(dòng)態(tài)數(shù)據(jù)可視化并提供良好的觸摸支持，支持絕大多數(shù)的瀏覽器和mobile端。

此外，Cesium還支持基于時(shí)間軸的動(dòng)態(tài)數(shù)據(jù)展示cesium二三維一體化，經(jīng)緯度坐標(biāo)系，支持球。

cesium的明星數(shù)據(jù)格式是3DTiles，特點(diǎn)是唯一開源的WebGIS三維引擎，缺陷是卡，體驗(yàn)差，地圖丑。

可能是為了支持球，所有的平面瓦片都要進(jìn)行紋理轉(zhuǎn)換貼球，計(jì)算量偏大，最新的矢量切片也是變成圖片再紋理轉(zhuǎn)換到球上，柵格化嚴(yán)重一點(diǎn)都不精美，可以說為了球，犧牲了太多性能和地圖美觀度，適用于Web強(qiáng)三維應(yīng)用場景。

Cesium城市建筑規(guī)劃

Cesium支持的數(shù)據(jù)格式：

• 影像數(shù)據(jù)：Bing、天地圖、ArcGIS、OSM、WMTS、WMS等

• 地形數(shù)據(jù)：ArcGIS、谷歌、STK等

• 矢量數(shù)據(jù)：KML、KMZ、GeoJSON、TopoJSON、CZML

• 三維模型：GLTF、GLB（二進(jìn)制glTF文件）

• 三維瓦片：3D Tiles（傾斜攝影、人工模型、 三維建筑物、CAD、BIM，點(diǎn)云數(shù)據(jù)等）

Cesium能做什么：

• 支持2D,2.5D,3D 形式的地理（地圖）數(shù)據(jù)展示

• 可以繪制各種幾何圖形、高亮區(qū)域，支持導(dǎo)入圖片，甚至三維模型等多種數(shù)據(jù)可視化展示

• 可用于動(dòng)態(tài)數(shù)據(jù)可視化并提供良好的觸摸支持，支持絕大多數(shù)的瀏覽器和移動(dòng)端瀏覽器

• 支持基于時(shí)間軸的動(dòng)態(tài)流式數(shù)據(jù)展示

在WebGIS 3D領(lǐng)域，比較有爭議性的是cesium與mapboxgl。簡單來說，兩者都是二三維一體化的GIS引擎，但產(chǎn)品側(cè)重點(diǎn)不同 ，Cesium追求的三維功能全面，Mapbox追求用戶體驗(yàn)。

Cesium和Mapbox的優(yōu)缺點(diǎn)

CesiumGL的優(yōu)點(diǎn)>>

1）全局視圖支持

Cesium支持三維地球視圖模型，能夠通過更改視角和位置在虛擬環(huán)境中自由移動(dòng)，支持地球表面的不同視圖。

2）純3D

與Mapbox不同，Cesium是開箱即用的3D，允許多個(gè)角度旋轉(zhuǎn)和可視化對(duì)象。

Cesium缺點(diǎn)>>

1）占內(nèi)存

與Mapbox相比，Cesium的SDK大小相對(duì)較大，最新的Cesium.js版本大約79.4 MB。

2）加載慢

在7.2Mbps網(wǎng)速下，更新速度約為3秒或以上。

Mapbox優(yōu)點(diǎn)>>

1）地圖樣式多

Mapbox提供了很多不同的地圖樣式，可以直接使用，也可以自定義樣式。

2）加載速度快

Mapbox比Cesium更新地圖更快，在穩(wěn)定的7.2Mbps互聯(lián)網(wǎng)連接下，加載時(shí)間不到2秒。

3）更精細(xì)的建筑信息

相比Cesium，Mapbox提供了對(duì)3D建筑信息的支持。

下圖是Mapbox中3D建筑的一個(gè)例圖，可以看到清楚地提供了周圍建筑的信息，導(dǎo)航地圖會(huì)更加容易。

下面是Cesium中類似3D建筑的示例。這里沒有建筑信息，這會(huì)使導(dǎo)航地圖變得更加復(fù)雜。

Mapbox缺點(diǎn)>>

1）使用復(fù)雜

Cesium使用3D開箱即用，Mapbox使用2.5D，使得使用其他第三方庫（如Three.js）收集和組合多個(gè)3D對(duì)象時(shí)流程有點(diǎn)復(fù)雜。

2）3D功能較弱

相比于 Cesium，Mapbox無法支持“地下管網(wǎng)開挖”這種形式的頁面展示；3D支持上能力比較弱。此外，mapbox賬號(hào)注冊(cè)十分麻煩。

更多WebGIS開發(fā)教程：

免費(fèi)領(lǐng)取GIS開發(fā)相關(guān)學(xué)習(xí)資料