随着移动定位服务和浏览器中的地理定位API等基于位置的技术的蓬勃发展，我们看到应用程序中的地图和位置的增长。与此同时，我们看到网络上出现了许多地图库，允许开发者在他们的应用程序中建立基于地图的体验。这些库抽象出了一些复杂的东西，如地理坐标系统、正确的地图瓦片排序、平移、缩放和其他各种行为。
当涉及到建立一个基于位置元素的网络应用程序时，选择正确的网络地图库对于向用户提供正确的功能至关重要。你如何确定你可能需要的功能？有什么选择可以为你和你的团队找到合适的库和服务？
知道你需要什么
在深入研究技术选择之前，值得研究一下你正在建立的应用程序的业务需求。了解这些要求将帮助你确定哪种绘图库适合你的团队。以下是一些在收集需求后需要考虑的问题：
- 需要什么地理空间功能？地图瓦片？地址查询？编辑多边形？卫星图像？
- 我们是否有这些功能的内部服务，还是我需要第三方服务？
- 一个库/服务的许可协议是否符合我的商业模式？
- 对于这将为应用程序增加的价值来说，定价是否过于昂贵？
- 在应用程序中加入映射部分会带来哪些额外的复杂性和开发时间的增加？
如何回答这些问题可以极大地改变 "什么是适合我的地图库 "这一问题的结果。不同的映射库在满足你的要求方面会有不同的优势，以及对它们的使用方式有不同的规定。在实施解决方案之前解决这些问题，从长远来看可能会节省很多精力，所以值得投入一些时间来更好地了解这些选项。
图书馆与服务
正如上面提到的，掌握库（有时被称为JavaScript API）和服务（网络API、网络服务）之间的区别是很重要的。库在浏览器中运行，而服务则是这些库向诸如瓷砖或确定给定地址的位置等事项提出的请求。这些服务通常需要某种形式的API密钥来验证请求。这可以链接到你与供应商的账户，有时还提供使用指标。
当涉及到服务时，重要的是要注意这些服务中有许多是付费服务。许多公司会提供一个免费的使用级别，但在达到一定的使用限制后，就会产生财务费用。使用量通常与你的API密钥挂钩，它可以跟踪请求。测绘服务提供商很少对实际测绘库本身的访问收费。
渲染方法和地图砖
不同的库采取不同的方法来渲染地图数据。库可能只是直接使用DOM与分层元素，其他库则利用HTML5 Canvas，而最有表现力的是，有些库使用WebGL来渲染数据。有些库可能允许使用不同的渲染器（例如Leaflet，我们后面会提到，它是基于DOM的，但有一个HTML5画布渲染器）。根据你的用例，渲染方法的类型可能很重要。例如，需要高帧率的高性能应用，或者渲染大量密集视觉数据的应用，可能会受益于基于 WebGL 的渲染方法，因为它能够将工作转移到设备 GPU 上。任何3D绘图一般都需要基于WebGL的方法。
基地图，即你将数据钉在上面的底层地图（例如街道地图），可以有各种不同的格式。历史上，最主要的方法是光栅地图瓦片，这基本上是在浏览器中拼接的图像。最近，矢量地图瓦片（被渲染到屏幕上的单个点、线和多边形）被引入。这种方法得益于上面提到的Canvas和WebGL方法，因为使用这些技术对矢量数据非常有效。矢量地图瓦片通常采用Mapbox矢量地图瓦片标准，该标准是开放的，基于protobufs进行有效的数据传输。有些供应商，比如谷歌，并没有公开他们的基图平铺方法。
专有库
诸如Google、Esri和Here这样的地图技术公司提供了定制的地图库，允许在你的应用程序中轻松使用他们的服务。由于服务被集成到了库中，这通常意味着你需要做较少的配置来启动和运行一个特定的地图组件（例如查看器、位置搜索栏）。让我们来看看其中的一些库，以便对它们有更好的感觉。
谷歌地图JavaScript API
谷歌地图可以说是所有地图库中最知名的一个，它为开发者提供了一套强大的组件和服务，可以集成到他们的应用程序中。这可以说是谷歌地图最强大的地方之一，它有非常详细的基础地图、路由API和组件以及精确的地理编码器。这个库有很长的历史，在Stack Overflow上有很多问题，也有很多关于它的文章和帖子，给了它一个良好的社区支持和兴趣。
使用谷歌地图API需要包括CDN中的谷歌地图库。没有正式的方法可以通过npm ，除了直接用节点的API通过 @google/maps包直接使用API。有一个非官方的加载器在 google-maps有一个非官方的加载器，可以使用它。使用API用JavaScript创建一个地图看起来像这样:
var map;
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
center: {lat: -34.397, lng: 150.644},
zoom: 8
});
}
谷歌地图提供了一个简单的API，构建一个地图只需要我们希望放置的元素，以及我们想要定位的地图的经纬度即可。谷歌地图在需要高质量和准确的基础地图的情况下会大放异彩，比如在你的应用程序中添加一个导航小部件，或显示你的商店的位置，或在地图上做简单的绘图。它还有一个好处是，许多消费者已经使用并熟悉了谷歌地图的外观和感觉。去年6月，谷歌改变了他们对地图的定价模式，需要一个API密钥和计费账户才能开始使用谷歌地图的开发。谷歌地图服务的最新定价信息可以在谷歌地图网站上找到。
Esri ArcGIS JavaScript API
Esri是一家大型的地图API供应商，专门从事复杂空间数据的展示和分析。ArcGIS API同时支持2D地图和3D场景。ArcGIS JavaScript API是一个重型测绘库，你可以从地理信息系统公司那里得到期望。对于需要支持多个重叠层、编辑多边形、可视化可能来自不同来源的多种类型的数据（即WMS、WFS、Vector Tiles、GeoJSON）等功能的更深入的应用，该API大放异彩。
该API是一个可行的解决方案，用于建立具有多个数据源的深度需求的应用程序，例如，可视化和分析土地使用或探索特定区域的渔业法规。该库有很长的历史，并以Dojo工具包为基础，因此在下面的代码示例中使用了require和AMD模块方法:
require([
"esri/Map",
"esri/views/MapView"
], function(Map, MapView) {
var map = new Map({
basemap: "topo-vector"
});
var view = new MapView({
container: "viewDiv",
map: map,
center: [-118.71511,34.09042],
zoom: 11
});
});
如果你用的不是Dojo工具包的框架，你可以使用esri-loader来帮助你。该库是闭源的，但在npm上有缩减版，可以在你的应用程序中使用。Esri ArcGIS JavaScript API还提供了对TypeScript的支持，在Esri JS API文档中提供了一份指南。Esri ArcGIS JS CLI工具也可用于搭建应用程序的脚手架，以及用于将ArcGIS for JS用于Webpack的插件。
价格信息可在Esri开发者网站上找到。使用Esri构建地图不需要付费，只需要创建一个开发账户。
Here JavaScript API
Here是一家提供精选地图服务、地图瓦片、路由、地理编码、地点搜索和交通数据的公司。可以说，与一些竞争对手相比，Here的知名度较低，但它仍然为构建地图应用提供了一套有竞争力的工具。除了他们的API之外，Here还提供了一个JavaScript库，该库以一系列 "模块 "的形式出现（尽管它们似乎附加到一个全局H 变量）。你可以看到一个Here模块的列表。不幸的是，这些模块在npm上似乎并不可用。这里是你如何使用API创建一个基本的地图:
var platform = new H.service.Platform({
useHTTPS: true
});
var pixelRatio = window.devicePixelRatio || 1;
var defaultLayers = platform.createDefaultLayers({
tileSize: pixelRatio === 1 ? 256 : 512,
ppi: pixelRatio === 1 ? undefined : 320
});
var map = new H.Map(document.getElementById('map'),
defaultLayers.normal.map,
{pixelRatio: pixelRatio, zoom: 12,
center: { lng: -0.15, lat: 51.5 }
});
var behavior = new H.mapevents.Behavior(new H.mapevents.MapEvents(map));
我们可以看到，这个代码样本可以说比前面的例子要复杂一些。然而，人们可以将Here的地图服务与Leaflet或OpenLayers等开源地图提供商一起使用。如果你在做运输和物流方面的工作，Here可能是最有意义的，因为他们的许多服务都是面向这个领域的。Here的开发者计划包括一个免费层级和基于交易的定价。
开放源码库
开发人员也可以使用一套开源的库。这些库可以在没有任何强烈规定的情况下使用，这使得它们成为一个很好的选择，当许可是一个项目的敏感问题，或者当你需要更大的透明度和底层实现的可扩展性。
利福莱
Leaflet是一个轻便简单的映射库，使用起来相对容易。该库在BSD-2-Clause下授权，并在npm上提供。Leaflet有一个强大的插件生态系统，它提供了强大的附加功能集，可以帮助Leaflet像其他映射库一样发挥作用。下面是一个使用API创建一个简单地图的例子:
var map = L.map('map').setView([51.505, -0.09], 13);
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);
由于其轻量级的特性和直接的API，当你需要一个简单的地图来绘制少量的数据时，Leaflet是一个不错的选择。Leaflet可以使用TMS/XYZ源和WMS层，但不支持开箱即用的矢量图（尽管有一个插件）。
OpenLayers
OpenLayers提供了一个强大的、深入的绘图API，可用于各种复杂的应用。OpenLayers提供了对更复杂的功能的支持，如编辑多边形、热图和更小众的数据源如WMTS。和Leaflet一样，OpenLayers也是在BSD 2-Clause下授权的。OpenLayers在NPM上也是可用的，并提供了使用捆绑器（本例中为Parcel）的入门说明。OpenLayers的API使用Canvas，在某些情况下使用WebGL来提供高性能的渲染。该API具有很强的可扩展性，并能很好地与其他工具和框架整合。用OpenLayers创建一个地图看起来有点像这样:
var map = new ol.Map({
target: 'map',
layers: [
new ol.layer.Tile({
source: new ol.source.OSM()
})
],
view: new ol.View({
center: ol.proj.fromLonLat([37.41, 8.82]),
zoom: 4
})
});
总的来说，当你的用例有复杂的要求时，包括组件、控件和地图符号学的定制，OpenLayers提供了一个可靠的开源选择。
MapBox GL
MapBox是另一个位置和地图服务的供应商。MapBox有各种服务产品，如基本地图、位置搜索和路由。他们为网络用户提供一个基于请求的定价模式，有一个强大的免费层。在提供服务的同时，MapBox还提供了一系列的地图库，其中许多是开源的。
MapBox GL是Mapbox的WebGL驱动的地图库，是一个性能良好、使用简单的库，用于渲染2D和3D地图。Mapbox GL可以做一些事情，比如在3D中可视化建筑物，创建热图或在地图上添加视频。
MapBox也可以在npm上使用，并可通过捆绑器使用，这有助于现代网络开发方法。该库是在3条款BSD许可下授权的。下面是一个创建基本基图的例子:
L.mapbox.accessToken = 'ACCESS_TOKEN_GOES_HERE';
var map = L.mapbox.map('map')
.setView([40, -74.50], 9)
.addLayer(L.mapbox.styleLayer('mapbox://styles/mapbox/streets-v11'));
如果你热衷于使用Mapbox服务和/或需要将3D地图整合到你的应用程序中，Mapbox GL将是一个不错的选择。如果您需要一个高性能的用户体验，例如针对移动网络应用，它也是一个不错的选择。
总结
正如你所看到的，在选择地图库时有很多选择。选择可能有点多，但重要的是要从你的用户需求开始。然后你可以用这些来推断出有意义的服务和库。诸如功能、性能、开发人员的工效、许可和价格等因素都会影响到做出一个合理的决定。也许值得将你的选择列入短名单，然后做一些探索性的工作，以确定最能满足你所收集的要求的库。
最后，值得一提的是，在某些情况下，可以将一个地图供应商的服务与另一个地图库一起使用，例如，将MapBox或Esri的服务与Leaflet或OpenLayers一起使用，这可以实现新的解决方案。
除了这篇博文之外，你还可以查看Web-mapping-libraries GitHub仓库，它整理了上述例子供你探索，以及一些不太知名的库。希望这篇文章中的指导和汇总的库列表能够帮助你挑选出适合你和你的团队的库!
如果你在选择地图库或创建你的下一个基于地图的应用程序方面需要帮助，请联系我们，讨论我们可以如何提供帮助
