三維地圖前端js api對比分析


三維前端渲染的技術已經很成熟了,可使用的商業、開源的js api也很多,很多時候,三維地形數據的展示效果、效率不盡如人意,原因和難點不在於前端,而在於后台數據的質量和數據的組織方式,還有硬件的配置。

以下簡單盤點一下市面上比較常用的三維地圖前端js api吧。

一、單項簡述

1.高德、百度、天地圖

目前國內的圖商,高德、百度、騰訊都不支持實際意義上的三維渲染,支持的只是影像地球或2.5D。

例如百度的衛星地球:

http://lbsyun.baidu.com/jsdemo.htm#webgl0_2

pic_e907ebe5.png

高德的2.5維視圖:

https://lbs.amap.com/api/javascript-api/example/3d/map3d

pic_380fd192.png

天地圖理論上集成了cesium,實現基於影像和地形的三維服務,但從效果上看,並沒有鳥瞰下地形起伏的效果,也只是個影像地球。

http://lbs.tianditu.gov.cn/docs/#/sanwei/

pic_627c571f.png

之前寫過一個教程,三維地圖之cesium加載天地圖(有代碼):

https://blog.csdn.net/sinat_41310868/article/details/109233234

2.谷歌

雖然在國內,我們使用不了大部分谷歌的產品,但擁有Google earth的谷歌,仍然具有最好的三維地形數據平台和渲染技術。

https://developers.google.com/maps/documentation/javascript/examples/elevation-simple

pic_5958fde4.png

谷歌地球引擎,google earth engine雖然主要是做地理空間數據分析的,但也支持三維數據的渲染。

https://developers.google.com/earth-engine/tutorials/tutorial_api_02

pic_dbff59e5.png

3.cesiumjs

Cesium官網訪問起來有點慢,https://cesium.com/。

Cesium不僅僅是一個前端js api,它更是一個三維地理空間平台,如果會寫代碼的話,可以使用js api構建三維地形地圖頁面,如果不會寫代碼的話,cesium更支持無代碼構建三維地形地圖應用。

Cesium代碼開源,除此之外,它也提供有償的解決方案。

pic_5aa117a9.png

之前寫過一些cesium的應用。

三維地圖之cesium入門使用:https://blog.csdn.net/sinat_41310868/article/details/107924145

Cesium平台構建詩詞地圖故事:https://blog.csdn.net/sinat_41310868/article/details/107967539

Cesium開發學習路徑:https://blog.csdn.net/sinat_41310868/article/details/107993244

4.threejs

Threejs官網:https://threejs.org/

Threejs支持地形渲染:https://threejs.org/examples/#webgl_geometry_terrain

QGIS有個插件,Qgis2threejs,支持將三維地形地圖數據轉成threejs的html頁面:https://blog.csdn.net/sinat_41310868/article/details/112299752

pic_5afea4da.png

5.mapbox

大而全的mapbox當然支持三維地形地圖的渲染。

https://docs.mapbox.com/mapbox-gl-js/example/add-terrain/

pic_391f05be.png

6.arcgis和supermap

涉及到商業平台產品,就不能簡簡單單說前端還是后端了,是一整套解決方案。

Arcgis js 三維示例:

https://developers.arcgis.com/javascript/latest/sample-code/layers-custom-elevation-exaggerated/

pic_f45dfe3b.png

Supermap的三維做的還不錯,示例很豐富:

http://support.supermap.com.cn:8090/webgl/examples/webgl/editor.html#terrainAndImagery

pic_e1fcee9e.png

二、對比

做三維,百度、高德、騰訊,肯定是不行。

天地圖雖然代碼不行,但天地圖提供地形數據、影像數據的wms圖層:http://lbs.tianditu.gov.cn/server/MapService.html

谷歌地球還是業內王者,但國內訪問不了,只能對數據進行緩存,就像奧維互動地圖一樣,但奧維互動地圖也因為使用谷歌地圖,被約談整改了,不太清楚是法律法規的問題,還是版權問題。

Cesium、three、mapbox,單從前端角度看,cesium示例最多,最易於學習,mapbox最全面,我如果一直用mapbox,我就接着用它做三維,three的好處是跟QGIS結合,不寫代碼直接導出html文件。

Arcgis和supermap這兩個平台,如果之前沒有接觸過GIS平台,那么supermap無疑上手快,操作界面、資料文檔都是中文的,但如果一直用arcgis,那就接着用arcgis。

三、總結

應該使用哪個前端,需根據項目需求和個人偏好來選擇,沒有最好的,只有最合適的。

三維數據渲染展示的效率、效果,技術問題通常都不在於前端,而在於后台數據的質量和數據的組織方式,還有硬件設備的配置。

三維會是未來的一個發展趨勢。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM