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

汇总一下市面上能支持2.5D的地图相关前端。

一、2D、2.5D、3D区分

我们一般习惯于将地图分为2D、2.5D、3D,2.5D是介于二维和三维之间的一种假三维地图,说它不是三维吧,它还有高度概念,说它是三维吧,它还不太真实。

二维地图长如下,完全平面:

pic_7e3804e8.png

三维地图长如下,栩栩如生:

pic_ac0a2be0.png

2.5维长如下,建筑物轮廓是有呈现的,但它只是抽象模型,并不是真实还原的:

pic_86c49745.png

2.5维最常见的是CIM模型,柱形图等。

pic_fa0ec24a.png

pic_549e5739.png

目前大部分开源的、商业的、平台的地图前端,都支持2.5维数据渲染展示。

二、单项简述

1.高德地图

高德地图支持2.5D的建筑物真型展示,室内图展示、罗盘图、热力图等等,它也支持object 3D数据的添加,支持渲染添加的object 3D数据。

https://developer.amap.com/demo/list/js-api

https://developer.amap.com/demo/javascript-api/example/object3d-base/add-remove

pic_d74b0c3e.png

2.百度地图

百度地图现在底图就带有建筑物真型的2.5D图层,但不怎么支持数据的自定义添加。

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

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

pic_b661b945.png

pic_ab1eca5a.png

3.腾讯地图

腾讯地图底图可以切换成2.5D模式,但渲染效果要差一些。

https://lbs.qq.com/webDemoCenter/glAPI/glMap/map3d

https://lbs.qq.com/webDemoCenter/glAPI/glPolygon/polygon3D

pic_58df4c9b.png

pic_8efd0b92.png

4.图商对比

整体来说,2.5D数据的展示渲染,高德支持是最好的,渲染效率也是很好的,demo也多;百度渲染效果也很好,但交互感差了点,支持不够;腾讯明显不流畅,这就是底层的问题了。

5.mapbox

Mapbox支持2.5D数据的渲染,也支持自定义数据的渲染,从用户体验看,mapbox对2.5D数据的渲染,更流畅、更美观、更细腻。

https://docs.mapbox.com/mapbox-gl-js/example/3d-buildings/

而且mapbox支持加载geojson格式的数据,这也是通用的CIM数据格式。

pic_71c0fc1c.png

https://docs.mapbox.com/mapbox-gl-js/example/3d-extrusion-floorplan/

这张室内图,加载的就是geojson数据。

pic_84776799.png

6.maptalks

Maptalks,国图之光,这是我目前为止,知道的第一个由国内的程序员开发的开源项目,想来行业发展,未来可期。

Maptalks的github:https://github.com/maptalks/maptalks.js

Maptalks的官网:https://maptalks.org/

作者自述:https://www.v2ex.com/t/397193,我开发的开源 JS 地图引擎 maptalks.js, 请大家不吝赐教!

Maptalks最主要的工作是实现瓦片底图的倾斜、旋转,实现2.5D的效果。

pic_83c4bf11.png

Maptalks自带的渲染展示建筑物真型的效果不是特别好,所以它也扩展集成了threejs,既maptalks.three,支持2.5D数据的渲染展示。

Maptalks.three的github:https://github.com/maptalks/maptalks.three

Maptalks.three的示例:https://maptalks.org/maptalks.three/demo/buildings.html

pic_de61e6a5.png

如果要学习webGL,maptalks是一个很好的选项,因为它源码里有中文注释。

7.其他

除了以上这些之外,Threejs也支持叠加底图数据,渲染2.5D数据,而且它也可以渲染三维数据。

平台类的arcgis和super map,当然也支持得很好,不过它们不是单纯的前端,提供的是一套大而全的解决方案。

8.开源对比

在地图前端领域,mapbox大而全,毋庸置疑,它的确功能更多,效果更好。

Maptalks在webGL上是没有问题的,但它在LOD(level of detail)数据组织方案上是有优化空间的。

三、总结

图商的前端封装得太死板了,不支持通用的地理空间数据格式,例如wkt、geojson等,简单的数据展示是没有问题的,但不够灵活。

开源的前端,优选mapbox,功能大而全,符合OGC规范,适配开源后端与平台,demo丰富;maptalks,国图之光,想了解webGL,会看它的源码。

影响渲染效率和效果的,主要两个方面,LOD数据组织方案和矢量图块的三角剖分(留坑)。

原文地址:https://www.cnblogs.com/hustshu/p/14629701.html