二维地图前端js api对比分析
才华横溢吴道简
才华横溢吴道简
GIS/地图/历史/文化,实践出真知。提问请走付费通道。
42 人赞同了该文章
我一直认为,实践是检验真理的唯一标准。
这段时间,分别用7个地图前端js api做了同一份专题图,so,可以通过实践,说出这7个前端各自的优劣和适用方向。
这7个地图前端分别是:百度地图、腾讯地图、高德地图、天地图、mapbox、leaflet、openlayer,至于谷歌地图、必应地图、搜狗地图等,要么国内很少用,要么太小众,就没实践。
一、教程列表
专题图制作教程如下(包含代码):
CSDN (没有效果图片,说图片违规,属于网站误杀):
百度地图JS API制作专题图
https://blog.csdn.net/sinat_41310868/article/details/113793369
腾讯地图JS API制作专题图
https://blog.csdn.net/sinat_41310868/article/details/112973343
高德地图JS API制作专题图
https://blog.csdn.net/sinat_41310868/article/details/113026369
天地图JS API制作专题图
https://blog.csdn.net/sinat_41310868/article/details/113795061
mapbox制作专题图
https://blog.csdn.net/sinat_41310868/article/details/113363043
leaflet制作专题图
https://blog.csdn.net/sinat_41310868/article/details/113797871
openlayer制作专题图
https://blog.csdn.net/sinat_41310868/article/details/113805926
知乎(有效果图片):
百度地图JS API制作专题图
https://zhuanlan.zhihu.com/p/350505192
腾讯地图JS API制作专题图
https://zhuanlan.zhihu.com/p/346082608
高德地图JS API制作专题图
https://zhuanlan.zhihu.com/p/346382270
天地图JS API制作专题图
https://zhuanlan.zhihu.com/p/350530381
mapbox制作专题图
https://zhuanlan.zhihu.com/p/347830008
leaflet制作专题图
https://zhuanlan.zhihu.com/p/350571627
openlayer制作专题图
https://zhuanlan.zhihu.com/p/350695086
有调查才有发言权,接下来,分析一下这7个地图前端js api的优劣势,和各自的适用方向。
二、单项点评
1.百度地图:
优势:使用人数多,可以与echarts深度结合。
劣势:坐标系鸡肋,数据不开放。
适用方向:简单的地图+图表的综合展示。
2.腾讯地图
优势:与微信小程序兼容性高。
劣势:使用人数少,易用性不高,底层算法有bug。
适用方向:微信公众号和小程序的地图应用。
3.高德地图
优势:数据开放,demo多,样式多,底图质量好。
劣势:没有太薄弱的地方。
适用方向:地图展示或专题图。
4.天地图
优势:国家的、官方的。
劣势:渲染有闪屏、易用性弱、底图难看。
适用方向:政务项目。
5.mapbox
优势:开源、易用、样例多、专题图首选。
劣势:没审图号,默认OSM底图,定制化底图需要提供数据。
适用方向:专题图首选。
6.leaflet
优势:开源、轻量、使用人数多,对地图小白友好。
劣势:没审图号,不适用于复杂交互,与地图风格定制。
适用方向:移动端,简单地图项目。
7.openlayer
优势:开源、全面、专业。
劣势:没审图号,使用人数较少,学习难度较高。
适用方向:交互复杂、专业的地图项目。
三、综合点评
1.开发者活跃度与易用性:
在github上搜索关键词,结果排序由高到低如下:
leaflet:20215条
mapbox:9066条
openlayer:2840条
baidu map:2044条
gaode map:315条
tencent map:85条
tianditu map:12条
易用性越高,使用的人群就越多,搜索记录就越多,尤其对于开源程序,用的人越多,维护的人就越多,易用性就会越高,这是个良性循环。
看数据,leaflet有压倒性优势,的确leaflet是最简单、最轻量的开源地图前端,一个开发者对地图越一无所知,leaflet就显得越友好。
如果想使用开源前端,不想了解太多地图相关知识,做一些没有复杂交互的地图页面,尤其是移动端页面开发,首推使用leaflet,上手很快。
leaflet官方样例:https://leafletjs.com/examples.html
但leaflet适用于所有方向吗?当然不是。
leaflet做简单地图的渲染展示,效率很高,很快。
但如果做专题图的话,还得是mapbox,mapbox就是为专题图而生的。
Mapbox的官方样例:https://docs.mapbox.com/mapbox-gl-js/example/
如果有复杂交互的话,例如地图上几何对象的绘制修改等,最好是openlayer,因为openlayer对几何对象的操作,最符合制图规范。
Openlayer官方样例:https://openlayers.org/en/latest/examples/
以上是3个开源的地图js api。
leaflet最轻量、最简单,官网示例清晰,近似于即开即用,https://leafletjs.com/examples/quick-start/。
Mapbox最适用于专题图,使用的时候,需要先在官网上注册一个账号,引用ak,有丰富的示例可以参考,https://docs.mapbox.com/mapbox-gl-js/api/#quickstart。
Openlayer上手较难,但它是最符合OGC规范的,也偏向于webGL底层,如果想了解并熟悉很多webGIS原理,可以学习并使用openlayer,https://openlayers.org/en/latest/doc/quickstart.html。
不过开源地图js api有个问题,国家规定,地图必须要有审图号,才能公开展示,开源地图js api都是叠加底图瓦片的,没有审图号,这就需要使用百度、高德、腾讯、天地图了。
(审图号,是一个比较尴尬的存在,不用问题地图,应该也没有人管,但规定是个人也可以申请审图号,不过我没试过。
关于审图号,我之前遇到过一个项目,我说地图没有审图号,最好不要在外网公开展示,专业地图前端说,你ps个审图号,贴上去不就行了吗?我竟然无言以对。)
说回百度、高德、腾讯、天地图,这四家地图的开发者活跃度,百度是遥遥领先的。
因为在前端领域,百度有一个腾讯和阿里无法比拟的优势,就是echarts被它收购了。Echarts是目前应用最广的开源可视化图表库,echarts和百度地图可以梦幻联动,从echarts官方样例中可以看到,关于地图的部分,使用的都是百度地图。
https://echarts.apache.org/examples/zh/index.html#chart-type-map
百度地图官方样例:http://lbsyun.baidu.com/jsdemo.htm#aCreateMap
不过百度地图有一个最大的硬伤,它坐标系跟别人不一样,数据转换很麻烦,且百度地图web api几乎不提供任何数据接口。
目前国内地图市场占有率份额最高的仍然是高德,高德官方的示例,也是高德、百度、腾讯三家最多的,且除了示例多、坐标系通用外,高德相较于百度,还有个优势就是,它开放的数据很多,这对于制作专题图来说,就很有用。
因为开放数据多、官方样例多,所以高德地图js api的开发要比百度地图简单。
高德地图官方示例:https://developer.amap.com/demo/list/js-api
再说一下腾讯和天地图。
腾讯在渲染展示上,不比高德、百度差,而且它对小程序的支持更好,但腾讯地图js api的底层算法肯定有点问题。
如下图,我点的位置是乌鲁木齐,但显示的数据是海南的,数据没有问题,那肯定是选择要素的时候算法有问题,这得看js api的源码才能知道具体问题出在哪来。
腾讯地图官方示例:https://lbs.qq.com/webApi/javascriptGL/glDemo
百度、高德、腾讯都支持底图风格定制,这有利于设计制作专题图。
天地图最大的问题在于底图实在不好看,而且坐标系是CGCS2000坐标系,火星加密的确是个历史遗留的鸡肋,高德、腾讯是加密过的,百度又做了二次加密,天地图自己又不做加密,坐标系转来转去,很麻烦。
希望以后国内的地图和数据,坐标系都能统一成CGCS2000坐标系。
除了底图不好看、不支持风格定制外,天地图渲染数据的时候,还有闪屏问题。
天地图官方示例:http://lbs.tianditu.gov.cn/api/js4.0/examples.html
简单粗暴的对地图js api的易用性做个排名:
开源:leaflet>mapbox>>openlayer。
图商:高德>百度>>腾讯>>天地图。
2.开发文档
开发文档是好工具。
开源的leaflet、mapbox、openlayer开发文档都是英文的,从难易程度上讲,最简单的是leaflet,最难的是openlayer,mapbox居中,但它是最全面的,还会涉及一些数据和后端的内容,因为mapbox推崇的是地图大前端,它并不是单一的前端api,而是整体性的地图生态。
Leaflet开发文档:
https://leafletjs.com/reference-1.7.1.html
mapbox开发文档:
openlayer开发文档:
https://openlayers.org/en/latest/apidoc/
图商的,从丰富性看高德>百度>腾讯>天地图,难易程度上看,也大概是这个排序,高德、百度上手是要简单的,天地图没什么东西,还闪屏,腾讯易用性很一般。
高德开发文档:
https://developer.amap.com/api/javascript-api/summary/
百度开发文档:
http://lbsyun.baidu.com/index.php?title=jspopularGL
腾讯开发文档:
https://lbs.qq.com/webApi/javascriptGL/glGuide/glOverview
天地图开发文档:
http://lbs.tianditu.gov.cn/api/js4.0/guide.html
3.发展潜力
Leaflet无疑是发展潜力最好的,首先它够简单,其次得移动端者得天下。
Mapbox搭建的是地图大前端生态,它的功能性是最好的,应用范围也是很广泛,它在专业领域会是发展最好的,因为它能实现的很多东西,轻量的leaflet是无法实现的。
Openlayer估计使用的人会越来越少,因为它的确过于专业了,不过openlayer更偏于底层,有些东西可能只有用它才能实现。
不了解地图,要做地图前端,首选leaflet;需要做样式丰富的专题图,选mapbox;熟悉专业和规范,试一试openlayer。
图商,在未来很长一段时间内,应该还是高德、百度平分秋色,腾讯在腾讯生态里扑腾,政务项目用天地图。
四、总结
地图还是比较小众的行业,但就前端来看,市场竞争就又激烈又饱和。想做点东西,选项还是挺多的,这是个好事儿,百花齐放百家争鸣。
这篇文章主要是二维地图前端,以后有时间,梳理一下三维前端,和后端、前端的瓦片与渲染原理。
Ps:这篇文章没有涉及到arcgis和supermap等商业GIS平台,虽然它们都有各自的js api,但本质上是依附自己的平台生态的,需要看平台整体,不是强GIS相关的项目,用不着arcgis和supermap,如果是强GIS相关的项目,例如智慧城市、智慧交通之类的,这两家公司也会有偿的提供打包的解决方案。