汇总一下市面上能支持2.5D的地图相关前端。
一、2D、2.5D、3D区分
我们一般习惯于将地图分为2D、2.5D、3D,2.5D是介于二维和三维之间的一种假三维地图,说它不是三维吧,它还有高度概念,说它是三维吧,它还不太真实。
二维地图长如下,完全平面:
三维地图长如下,栩栩如生:
2.5维长如下,建筑物轮廓是有呈现的,但它只是抽象模型,并不是真实还原的:
2.5维最常见的是CIM模型,柱形图等。
目前大部分开源的、商业的、平台的地图前端,都支持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
2.百度地图
百度地图现在底图就带有建筑物真型的2.5D图层,但不怎么支持数据的自定义添加。
http://lbsyun.baidu.com/jsdemo.htm#aCreateMap
http://lbsyun.baidu.com/jsdemo.htm#webgl1_6
3.腾讯地图
腾讯地图底图可以切换成2.5D模式,但渲染效果要差一些。
https://lbs.qq.com/webDemoCenter/glAPI/glMap/map3d
https://lbs.qq.com/webDemoCenter/glAPI/glPolygon/polygon3D
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数据格式。
https://docs.mapbox.com/mapbox-gl-js/example/3d-extrusion-floorplan/
这张室内图,加载的就是geojson数据。
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的效果。
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
如果要学习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数据组织方案和矢量图块的三角剖分(留坑)。