「开源项目」8款最受欢迎的地图API和javascript库

17,913 阅读7分钟

作者:Sathishravi 译者:JackChen007 来源:medium.com

前言

在创建您的第一个地图应用程序之前,先来了解一下主流的地图API和JavaScript库。

我们今天使用的大多数应用程序都将在地图上显示实时位置和数据。例如在线商品到我们使用地图的外卖递送应用程序。地图被广泛用于表示数据,我们总是希望能有更多的交互性。有许多不同的库和插件可供地图使用,有的是付费的,有的是开源的。

谷歌地图并不是地图应用程序的最终有效解决方案。它不提供任何定制选项,使其更方便您自己。如果您想用自己的功能实现它,就必须在市场上使用开放源码。在本文中,我们将看到不同的地图都包含用于使用地图库的JavaScript工具。

使用javascript函数库对地图进行分类

有很多工具可以使用JavaScript。我们可以根据这个来分类。

  • 库(Libraries):允许公共类和函数在更高的编程级别上构建应用程序。
  • 包装器(Wrappers):它充当调用者和包装代码之间的接口。
  • 工具包(Toolkits):它是模块化的,很容易集成到定制的应用程序中。
  • 框架(Frameworks):用于启用和支持服务的可重用组件,配置并与应用程序代码集成。
  • 客户端(Clients):最终产品需要使用的Web地图应用程序。

如何选择有效的解决方案

这取决于您将如何使用它们,以及您希望对其进行多大程度的定制以使其更具交互性。

当您在为地图选择工具时。您必须首先选择付费或开源框架。它们都有很多功能。

版本和升级

以 Google Maps 和 Leaflet 这两大产品为例。谷歌地图由谷歌控制。任何可用的更新都将由谷歌安排。Leaflet更新是经常和它发布新版本的新功能。插件更新独立于整个更新。

地图工具和库

一些工具将减少生成交互式地图的工作量。它允许您只用几行代码就可以创建一个动态地图。JS库会让你添加标记功能,绘制地图上特定点的自定义线路。

CSS允许你在地图中添加自定义样式。通过考虑所有这些功能,我们整合了以下库,这些库将帮助开发人员轻松快速地创建复杂的地图。

Leafletjs

官方站点:leafletjs.com/

GitHub stars: 28.1k, github.com/Leaflet/Lea…

价格:免费

地图数据来源:OpenStreetMap

依赖性:无

类别:JS库

示例:leafletjs.com/examples.ht…

Leaflet 是一个为建设移动设备友好的互动地图,而开发的、现代的、开源的 JavaScript 库。它是由 Vladimir Agafonkin 带领一个专业贡献者团队开发,虽然代码仅有 38 KB,但它具有开发人员开发在线地图的大部分功能。

Leaflet 设计坚持简便、高性能和可用性好的思想,在所有主要桌面和移动平台能高效运作,在现代浏览器上会利用HTML5和CSS3的优势,同时也支持旧的浏览器访问。支持插件扩展,有一个友好、易于使用的API文档和一个简单的、可读的源代码。

它包含强大的API文档和各种示例,方便供初学者快速查阅及上手。

推荐阅读相关入门教程:

入门Leaflet之小Demo

leafletjs可视化地理位置

leafLet API中文文档参考

Openlayers

官方站点:openlayers.org/

GitHub stars: 7.1k, github.com/openlayers/…

价格:免费

地图数据来源:OpenStreetMap

依赖性:无

类别:JS库

示例:openlayers.org/en/latest/e…

OpenLayers 也是创建交互式地图的最佳开源JavaScript框架。您可以使用向量贴片选择不同类型的样式地图。它还能够将矢量数据转换为GeoJson格式。它还为开发人员提供了更好的文档和工作代码示例。

最近公司项目中有个业务需求要实现Web GIS(网络地理信息系统)功能,开发一套军用模拟指挥系统,小编特地参考了很多资料,最终选定OpenLayers这个框架。等项目完成后,会写一篇开发使用心得及经验的分享文章。如下图所示:

推荐阅读相关入门教程:

OpenLayers基础教程

OpenLayers中文详解

Mapbox

官方站点:www.mapbox.com/

GitHub stars: 6.1k, github.com/mapbox/mapb…

价格:部分免费

地图数据来源:Mapbox

依赖性:无

类别:WEB应用程序

示例:docs.mapbox.com/mapbox-gl-j…

Mapbox 是用于创建高性能交互式地图的最先进的地图解决方案。它是由具有更多功能的开发人员构建的,比如定制标记、矢量图、静态地图和地理编码。它提供卫星图像和方向。

它还提供在线编辑器,使您的自定义地图与您自己的数据快速。该文档设计良好,易于使用。

推荐阅读相关入门教程:

Mapbox中文版

vue 地图可视化(2)mapbox篇

Google Maps API

官方站点:developers.google.com/maps/docume…

价格:部分免费

地图数据来源:Google

依赖性:无

类别:WEB应用程序

示例:developers.google.com/maps/docume…

Google Maps API最适合所有人,无论是有经验的还是初学者。很容易将谷歌地图与任何应用程序或网站集成。此外,WordPress用户有更多的插件来添加JavaScript谷歌地图API。

Datamaps

官方站点:datamaps.github.io/

GitHub stars: 3.4k, github.com/markmarkoh/…

价格:免费

地图数据来源:D3.js

依赖性:D3.js and TopoJSON

类别:JS库

示例:datamaps.github.io/

Datamaps 是一种用于数据可视化的交互式地图。它被绑定到一个单独的JavaScript文件中。它以JSON格式存储,您可以使用以下结构轻松创建任何自定义地图。

Bing Maps

官方站点:www.microsoft.com/en-us/maps/…

价格:免费

地图数据来源:Bing Maps

依赖性:无

类别:WEB应用程序

示例:docs.microsoft.com/en-us/bingm…

这个地图是由微软创建的,是一个非常流行的地图平台。它包含AJAX SDK,提供了示例代码和片段,供开发人员构建自定义地图。它提供多种API功能,如REST服务和空间数据服务。

ArcGIS

官方站点:developers.arcgis.com/

价格:部分免费

地图数据来源:Esri

依赖性:无

类别:框架

示例:developers.arcgis.com/javascript/…

ArcGIS 是一个轻量级的JavaScript框架,可以很容易地将地图嵌入到任何应用程序或网站中。它装载了大量的特性和示例。开发人员门户包含ArcGIS API和SDK。它为开发人员提供了很友好的文档。

推荐阅读相关入门教程:

vue地图可视化(3) ArcGIS篇

Zeemaps

官方站点:www.zeemaps.com/

价格:部分免费

依赖性:无

类别:WEB应用程序

示例:www.zeemaps.com/mobile?grou…

Zeemaps 是一种企业级地图服务,可以让你轻松的创建、发布和共享交互式地图,你可以构建可视化动态地理位置信息地图,例如标注企业用户的地理为hi,你曾经去过的地方,销售地图等等,所有的地图搜存储在官方服务器上,用户可以在任何地点、任何时间进行访问。

写在最后

我希望您喜欢并了解JavaScript中的地图API和库,并根据您的需要为您的应用程序或网站创建一个高度交互的地图,选择最好的框架。

原文:medium.com/javascript-…

如有前端技术问题,请加微信好友:lazycode520,小编拉您进前端实战交流学习群。

推荐阅读相关优质文章

获取更多项目实战经验及各种源码资源,请关注作者公众号:懒人码农