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

二维地图前端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开发文档：

https://docs.mapbox.com/

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相关的项目，例如智慧城市、智慧交通之类的，这两家公司也会有偿的提供打包的解决方案。

转载：https://zhuanlan.zhihu.com/p/350866070