三维前端渲染的技术已经很成熟了，可使用的商业、开源的js api也很多，很多时候，三维地形数据的展示效果、效率不尽如人意，原因和难点不在于前端，而在于后台数据的质量和数据的组织方式，还有硬件的配置。

以下简单盘点一下市面上比较常用的三维地图前端js api吧。

一、单项简述

1.高德、百度、天地图

目前国内的图商，高德、百度、腾讯都不支持实际意义上的三维渲染，支持的只是影像地球或2.5D。

例如百度的卫星地球：

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

高德的2.5维视图：

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

天地图理论上集成了cesium，实现基于影像和地形的三维服务，但从效果上看，并没有鸟瞰下地形起伏的效果，也只是个影像地球。

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

之前写过一个教程，三维地图之cesium加载天地图（有代码）：

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

2.谷歌

虽然在国内，我们使用不了大部分谷歌的产品，但拥有Google earth的谷歌，仍然具有最好的三维地形数据平台和渲染技术。

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

谷歌地球引擎，google earth engine虽然主要是做地理空间数据分析的，但也支持三维数据的渲染。

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

3.cesiumjs

Cesium官网访问起来有点慢，https://cesium.com/。

Cesium不仅仅是一个前端js api，它更是一个三维地理空间平台，如果会写代码的话，可以使用js api构建三维地形地图页面，如果不会写代码的话，cesium更支持无代码构建三维地形地图应用。

Cesium代码开源，除此之外，它也提供有偿的解决方案。

之前写过一些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

5.mapbox

大而全的mapbox当然支持三维地形地图的渲染。

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

6.arcgis和supermap

涉及到商业平台产品，就不能简简单单说前端还是后端了，是一整套解决方案。

Arcgis js 三维示例：

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

Supermap的三维做的还不错，示例很丰富：

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

二、对比

做三维，百度、高德、腾讯，肯定是不行。

天地图虽然代码不行，但天地图提供地形数据、影像数据的wms图层：http://lbs.tianditu.gov.cn/server/MapService.html

谷歌地球还是业内王者，但国内访问不了，只能对数据进行缓存，就像奥维互动地图一样，但奥维互动地图也因为使用谷歌地图，被约谈整改了，不太清楚是法律法规的问题，还是版权问题。

Cesium、three、mapbox，单从前端角度看，cesium示例最多，最易于学习，mapbox最全面，我如果一直用mapbox，我就接着用它做三维，three的好处是跟QGIS结合，不写代码直接导出html文件。

Arcgis和supermap这两个平台，如果之前没有接触过GIS平台，那么supermap无疑上手快，操作界面、资料文档都是中文的，但如果一直用arcgis，那就接着用arcgis。

三、总结

应该使用哪个前端，需根据项目需求和个人偏好来选择，没有最好的，只有最合适的。

三维数据渲染展示的效率、效果，技术问题通常都不在于前端，而在于后台数据的质量和数据的组织方式，还有硬件设备的配置。

三维会是未来的一个发展趋势。

三维地图前端js api对比分析相关推荐

corodva中使用高德地图web js api
高德地图web js api有一个其他的地图插件都没有的功能,就是地图俯角可以达到80°,而其他的地图api(百度45°,mapbox60°),包括高德地图的Android sdk都无法达到这样的大角 ...
三维地图前端arcgis_【ArcGIS JS API + eCharts系列】实现二、三维网络路径图的绘制...
概述前面两篇文章通过扩展EchartsLayer.js这个图层类,实现了使用ArcGIS JS API和eCharts,在二维和三维场景下绘制迁徙图和散点图.这篇文章继续通过绘制网络路径图的例子,再 ...
高德地图 Web JS API示例学习笔记（3）——地图（三维地图）
文章目录三维地图 3D地图区域掩膜三维地图 3D地图 map = new AMap.Map('container', {resizeEnable: true,rotateEnable: true ...
三维地图前端arcgis_通过ArcGIS创建2D及3D地图
前端开发中,GIS的用途很明确,就是用来做地图.你对地图的操作,不管是图形的绘制还是实体的添加都是在基础地图之上.本文将向你讲诉如何使用GIS创建基础地图以一些API的使用. 前提在编写代码之前先简 ...
三维地图前端arcgis_vue地图可视化 ArcGIS篇（3）
ArcGIS for javascript开发心得本次实例中采用ArcGIS for javascript3.24版本,由于版本3与4在API等存在较大区别,就不一一列举,详细区别看官方解释 arc ...
高德h5定位误差_高德地图定位JS API不准确问题
到网上找了个解决高德偏移量的代码 https://blog.csdn.net/woshimu... 我的是ip定位转换过的定位就准确了 this.map.plugin('AMap.Geolocati ...
高德地图 Web JS API示例学习笔记（1）——地图（生命周期、地图属性）
文章目录生命周期地图的创建异步加载地图地图属性获取地图中心点/级别设置地图中心点/级别获取地图当前行政区属性信息设置地图当前行政区设置/获取地图显示范围限制地图显示范围地图的平移 ...
高德地图 Web JS API示例学习笔记（11）——覆盖物（矢量图形）
文章目录矢量图形折线的绘制和编辑多边形的绘制和编辑矩形的绘制和编辑圆的绘制和编辑绘制矢量图形(重点) 带洞多边形遮罩 GeoJSON(重点) 自定义折线方向箭头矢量图形折线的绘制和编 ...
WebGIS开发及二三维GIS开发框架对比分析
GIS(地理信息系统)前端开发是GIS应用开发的重要组成部分,随着Web GIS技术的发展,前端开发在地图应用中的作用愈加重要. 本文将介绍GIS前端开发的基本计划以及市面上各种二三维GIS开发框架的 ...
vue 给圆遮盖物添加文字高德地图_通过 Vue + 高德地图 JS API 在地图上标记咖啡店...
通过 Vue + 高德地图 JS API 在地图上标记咖啡店由学院君创建于2年前, 最后更新于 2年前版本号 #1 在上一篇教程中我们为咖啡店地址进行了地理编码,这样,就可以调用高德地图支持的 ...

三维地图前端js api对比分析