最佳在线地图工具为Web开发人员| Toptal®-欧博体育app下载

没有什么比一张好的、有用的地图更好的了.

今天，使用在线地图是一个简单而引人入胜的过程. Making your own online maps is not a big undertaking anymore; we have at our disposal a wide range of available online mapping tools, 从自由和简单, 以丰富和复杂的使用为特征. For web开发人员如果不熟悉网络地图，选择的痛苦可能会令人生畏. 您想制作地图，但不知道从哪里开始，也不知道使用哪种工具. 我在这里帮助你列出最好的映射工具.

一点点历史

从一开始，技术就对地图的制作和使用方式产生了影响. 随着技术的进步, 制图学和地图制作过程也随之发展, 从在纸莎草纸上手工绘制的地图到网络上的交互式地图.

过去的制图.

20世纪下半叶是地图学的一个转折点. 计算机成为了一种选择工具. 航空摄影、卫星图像和遥感改变了空间数据的收集方式. 地理信息系统 (GIS)诞生了. Eventually, GIS地图开始从桌面转向网络, 大型GIS供应商开始为在线地图制作第一个框架.

但是GIS制图并不容易. 它需要许多服务器端技术, 地理空间的标准, and protocols, 以及它们的实现. 它需要理解地理空间数据和地图投影, 了解如何收集数据, 如何显示数据, 用什么颜色, 如何将数据推广到特定的尺度, 如何在地图上放置标签, 如何设置服务器来提供地图服务, 如何使用空间数据库, and so on. GIS中充满了缩写, such as WMS, WFS, EPSG, CRS, SLD, GML, TMS, 仅举几个例子, 去认识和理解它们, 你需要读书, 学术论文及文章.

在线地图的演变

最初的网络地图通常只显示一张非常小的地图图像. At that time, 平移是通过移动一步来实现的, 通常是地图大小的一半, 在罗盘的八个可能方向之一——N, NW, W, SW, S, SE, E, NE. 在用户点击平移或缩放按钮之后, 需要在地图服务器上呈现一个全新的图像, 通过网络加载, 然后由浏览器处理. 因为技术的限制, 地图只占整个网页很小的一部分. 为了获得更好的互动, 早期的地图需要Flash或基于Java的插件, 甚至是ActiveX, 只能在ie浏览器中使用.

谷歌在2005年推出谷歌地图时，颠覆了地图世界. 谷歌在其创新中引入了通过拖动的连续平移. 他们的解决方案是将地图切成许多更小的方形图像，称为“瓷砖”。. 这些贴图是由“地图贴图服务器”渲染和提供的，通常是256 x 256像素. 缩放和平移现在只需要加载新的地图块，而不是重新加载整个网页. 结果是一个更大的可见地图，覆盖了超过一半的浏览器窗口, 并为探索地图提供了流畅的体验. 因为它可以通过平滑的缩放和平移功能“滑动”地图, 这些新地图被称为“滑地图”。. 谷歌也允许编写脚本, 这样用户就可以把谷歌的地图放到他们自己的网站上，并把他们自己的数据添加到地图上. 这就产生了另一个新词:“地图混搭”.”

Suddenly, online maps become popular; to add a nice-looking map to your website, 你不再需要成为一名制图师, 或GIS专家. 在“Web 2”的翅膀上.0” movement, 以HTML5等现代技术为基础, CSS3, and SVG, 这样可以轻松创建交互式内容, 交互式地图正在经历一场新的文艺复兴.

未来的地图?

Map Data

如前所述，早期的在线地图是基于GIS数据集及其空间 geodatabases. 没有多少人能接触到这些数据，更不用说它的价格了. 谷歌和开放地图 (OSM)项目数据集改变了这一点. b谷歌的数据库是私有的，随附 restrictions, 而OSM则受到了维基百科概念的启发, 作为一个合作项目来创建一个免费的世界地图. 开放地图是由一群志愿绘制地图的人创建的, 谁负责维护空间数据.

In short, 使今天的地图制作变得简单的最大革命是，与维护地图服务器和空间数据库相关的麻烦已经消除了.

选择一个Web映射框架

那么，在这么多选择中，我们如何选择合适的在线地图工具呢? 一方面，一方面, 还有像谷歌这样的商业在线地图提供商, MapQuest, Microsoft, and Nokia. 这些服务提供地图块和适当的JavaScript api来查看它们并与地图交互. 另一方面, 有一些开源的地图项目可以很容易地加载基于openstreetmap的地图块. 这些包括OpenLayers和传单. 还有像MapBox和CartoDB这样的项目, 哪些公司的业务模型是基于开源库和OSM数据的, 并提供附加价值，但不是免费的.

让我们看一下这些类别中的一些例子. Here, 我将讨论其中几个在线地图工具, 提供每个的简要概述, 以及代码示例, 权衡利弊. 我们还写了 D3.Js映射教程你可能会觉得单独阅读会很有趣.

Google Maps

让我们从最明显的选择开始， Google Maps. 谷歌Maps API的第一个版本于2005年2月推出, 以及2009年6月发布的谷歌Maps API v3. The Google Maps API is not just the JavaScript API endpoint; it includes more projects and offers several different ways to embed Google Maps into web pages with extensive customization.

目前可用的谷歌Maps api包括:

为了帮助您选择正确的API，谷歌开发了一个 API picker.

值得注意的是，虽然基本api是免费的，但也有一些限制. 首先是地图必须对最终用户免费和公开地访问. 其次是使用限制:服务是免费的，只要你的网站不生成在任何90天内，每天都有超过25,000个地图加载. 如果你需要更大的比例尺或想要一个私人地图, 或者你正在运行一个企业或商业网站, 你应该考虑付钱谷歌为工作映射API.

实现

下面是如何在代码中实现简单谷歌映射的示例. 它展示了如何使用API创建一个简单的映射, 在地图上做个记号, 用鼠标点击打开一个弹出窗口.

生成的地图是这样的:

Pros

由谷歌开发和维护.
有很多不同的api可以在你的网站或应用程序中包含地图.
庞大的用户社区.
非常好的API文档，有很多例子.

Cons

我们确定在某个时候我们不会看到添加吗?
Everyone is using it; all maps (mostly) look the same.
封闭和专有的API.
除了b谷歌官方开发的插件外，没有其他插件.
谷歌工作地图定价不明确.

OpenLayers

OpenLayers 是由 MetaCarta 作为谷歌Maps的开源版本，第一版于2006年6月发布. OpenLayers是一个在线地图工具，它实现了一个JavaScript API，用于构建丰富的基于web的地理应用程序, 使用类似于谷歌Maps API的API. OpenLayers很快就获得了很多关注，一开始的发展也很快. OpenLayers 2在版本1发布两个月后，即2006年8月发布. 图书馆在不断地发展, 带有新功能的新版本不断被添加. 这种快速发展的缺点是，版本2库变得非常庞大和笨重, 最终达到1MB大小，包含超过100个,000行代码! 虽然它有很多功能，但并不是所有功能都是普通用户需要的.

这是全面重写其库的主要原因. 我们的目标是瞄准最新的HTML5和CSS3功能, 具有与OpenLayers 2相同的功能, 比如对预测的支持, 标准协议, 编辑功能. 主要关注的是性能改进, 轻的构建, 更美观的视觉组件, 以及更好的API. This 大大改进的OpenLayers 3 出版于2014年8月.

实现

让我们看看如何与前面的例子相同的映射，这次使用OpenLayers 3.

结果是:

Pros

免费和开源.
功能丰富的库，可满足您的映射需求.
有很多例子.
支持一系列数据类型和GIS标准.
内置支持地图投影和编辑功能.

Cons

版本3仍在大量开发中，API也在不断变化每点释放.
复杂的API语法.
版本3文档目前还没有达到应有的全面.

Leaflet

可以肯定地说 Leaflet 是对OpenLayers臃肿、杂乱和复杂的反应. 弗拉基米尔•Agafonkin 被要求围绕OpenLayers构建一个包装器, 但他却创造了一个简单而轻量级的OpenLayers替代品, 2011年5月，传单出生了. Vladimir专注于这个在线地图工具的简单性、性能和可用性. 核心库只有基本的功能，这对于大多数实际用例来说已经足够了. Still, 传单可以扩展与大量的插件，很容易开发和添加在核心库的顶部. 此外，传单是从头开始开发与移动支持的思想.

传单很容易使用，并有一个良好的文档API，以及简单的源代码可以在GitHub上找到. 因为它专注于性能, usability, simplicity, small size, 移动支持, 它比OpenLayers简单得多.

传单的未来看起来也很有趣. 根据Vladimir的说法，他计划下一个主要版本是更简单，进一步提高性能，并升级插件基础结构.

实现

这是和之前一样的地图，这次使用了传单.

Pros

免费和开源.
小而快.
简单易用的API语法.
移动友好.
非常适合快速轻松地获取在线地图.
大量的例子和非常好的文档.

Cons

缺乏高级功能.

MapBox

一家名为 MapBox 是想彻底改变在线地图市场吗, 目标是建造更好看的建筑, 更多功能的在线地图. The MapBox JavaScript API 使用传单，并写为传单插件. 它扩展了传单功能，并与其他 MapBox web服务，包括MapBox托管用户创建的自定义地图和数据集. 除了JavaScript API, MapBox还包括以下连接服务:

移动iOS和 Android SDKs.
一套预先设计好的 maps.
Static maps 不需要映射库就可以显示.
A 地理编码服务.
A 方向服务.

MapBox提供的不仅仅是地图服务, 还有获取数据的权限, 包括私人获得的卫星图像, 来自NASA的公开数据, 以及来自开放地图的社区驱动的世界数据. 数据样式化使用 CartoCSS是MapBox基于CSS和LESS样式框架创建的一种样式格式. 虽然MapBox服务提供了一个免费的层, 它在带宽和存储方面是有限的, 对于任何严肃的使用，这项服务都必须付费.

许多大公司已经认识到MapBox提供的好处, 并在他们自己的网站上使用. 其中包括Foursquare、Evernote、Pinterest、The Financial Times、GitHub和Etsy等.

CartoCSS

下面是一个光滑的MapBox地图的例子，它使用了一个名为 Pirates，由MapBox的设计师创建. 因为MapBox运行在传单之上, 嵌入到你的网页的代码将类似于上面的传单的例子:

如上所述，在MapBox中，CartoCSS用于样式化矢量贴图. 这是用他们的 MapBox Studio，这也是 open source. 使用MapBox Studio, 可以从头开始创建自己的地图样式, 或者改变和扩展其他设计师创造的现有风格. 一旦您的自定义地图上传到您的MapBox帐户, 你可以使用MapBox API将它嵌入到你的网站上.

下面是一个用于获取 Pirates baselayer:

@ name:“[name_en]”;
@name_arrr:“[name_en].取代(' ((Aa) r) ', ' \ 1 rr ')”;
@land: # fff8f0;
@water: # cdd;
@park: #cda;

Map {
  background - color: @land;
  背景图片:url (img /噪音.png);
}

#admin[maritime=0][zoom>=3] {
  线连接:圆形;
  线条颜色:# 478;
  comp-op:繁殖;
  // Countries
  (admin_level = 2) {
    line-cap:圆形;
    线宽:0.8;
    [zoom>=6] { line-width: 2; }
    [zoom>=8] { line-width: 4; }
    (有争议的= 1){
      line-dasharray: 4, 4;
      line-cap:对接;
    }
  }
  //国家/省/分区域
  [admin_level>=3] {
    线宽:0.4;
    line-dasharray: 10, 3, 3, 3;
    [zoom>=6] { 线宽:1; }
    [zoom>=8] { line-width: 2; }
    [zoom>=12] { line-width: 3; }
  }
}

@water_line:减轻(@water 8);
#water {
  ::b {
    polygon-pattern-file: url (img /水.png);
  polygon-pattern-alignment:全球;
  }
  polygon-fill:混合(@water # fff 50);
  polygon-gamma: 0.6;
  comp-op:繁殖;
  a /线条颜色:@water_line;
  /线宽:0.4;
  a / line-comp-op:繁殖;
  / line-smooth: 2;
  b /线条颜色:@water_line;
  b /线宽:0.4;
  b / line-comp-op:繁殖;
  b / line-smooth: 4;
  c /线条颜色:@water_line;
  c /线宽:0.4;
  c / line-comp-op:繁殖;
  c / line-smooth: 6;
  [zoom>=12] {
    /线宽:0.8;
    b /线宽:0.8;
    c /线宽:0.8;
  }
}

#waterway {
  comp-op:繁殖;
  类型=“河”,
  (type = '管']{
    线条颜色:@water;
    线宽:0.5;
    [zoom>=12] { 线宽:1; }
    [zoom>=14] { line-width: 2; }
    [zoom>=16] { line-width: 3; }
  }
  (类型=“流”){
    线条颜色:@water;
    线宽:0.5;
    [zoom>=14] { 线宽:1; }
    [zoom>=16] { line-width: 2; }
    [zoom>=18] { line-width: 3; }
  }
}

#landuse {
  ::glow {
    comp-op:繁殖;
    [类=“公园”],[类= '节'],[类= '学校']{
      line-width:2;
      线连接:圆形;
      (类=“公园”){ line-color:#ddb; }
      [class='pitch'] { line-color:#eed; }
      [类= '学校']{ line-color:#edb; }
    }
  }
  ::main[zoom>=0] {
    comp-op:繁殖;
    (类=“公园”){
      polygon-pattern-file: url (img /公园.png);
      polygon-pattern-alignment:全球;
    }
    [类= '学校']{
      polygon-fill: # ed9;
      polygon-opacity: 0.5;
    }
  }
  ::木(类=‘木’){
    线条颜色:# C3CFB4;
    line-opacity: 0.33;
    line-width:3;
    线连接:圆形;
    polygon-pattern-file: url (img /森林.png);
    polygon-pattern-alignment:全球;
    comp-op:繁殖;
    opacity:0.5;
  }
}

#building {
  polygon-fill: # efe8d8;
  comp-op:繁殖;
  [zoom>=15] {
    Line-color:#efe8d8 * 0.9;
    [zoom>=15] { line-width:0.2; }
    [zoom>=16] { line-width:0.4; }
    [zoom>=17] { line-width:0.8; }
  }
}

#tunnel{透明度:0.5; }

#road,
#tunnel,
#bridge {
  (“mapnik:: geometry_type”= 2){
    线宽:1;
    线条颜色:# edc;
    line-comp-op:繁殖;
    (类=‘高速公路’),
    (类=“主要”),
    [类= ' motorway_link '] {
      线条颜色:# dba;
      [zoom>=10] { 线宽:1; }
      [zoom>=12] { line-width: 2; }
      [zoom>=14] { line-width: 3; }
      [zoom>=16] { line-width: 5; }
    }
    (类=“街”),
    [类= ' street_limited '] {
      [zoom>=13] { line-width: 1.4; }
      [zoom>=14] { line-width: 2; }
      [zoom>=16] { line-width: 3; }
    }
    [类= ' street_limited '] { line-dasharray: 4,1; }
    [class='path'] { line-dasharray: 3,2; }
  }
}

Arrgh, matey!

看看其他一些预先设计的MapBox样式 here.

Pros

扩展了传单.
大仓库的详细和无云卫星图像.
详细地形资料.
大量的连接服务.
设计精美的地图开箱即用.
用于样式化和自定义现有地图的图形界面.

Cons

好东西不是免费的.
Pricing 是基于流量而不是功能.

CartoDB

对于更复杂的地理空间数据可视化和分析， CartoDB 是最好的工具之一吗. 这是一种云服务，它将地理数据存储在一个支持空间的云数据库中 PostGIS, 提供访问数据的工具, 利用PostGIS的空间和地理定位功能进行分析, 并使用单张显示.

由于缺乏简便的地理空间数据可视化和存储的替代方案，因此创建了CartoDB. 因此，可以将CartoDB视为 b谷歌的聚变表. 用户可以导入各种格式的数据集, including CSV, KML或Excel表格, 并将它们叠加在b谷歌等常见来源的地图上, Here (Nokia)或开放地图. 因为所有地理数据都存储在真实的数据库中, 可以使用SQL访问和查询数据, 然后用CSS样式.

CartoDB的服务是以“免费增值”的方式提供的，向公众开放数据的用户可以在CartoDB网站上免费托管他们的项目. 存储私人数据, 导入超过5MB的数据或使用超过5个表, 用户必须订阅 premium plan.

GeoJSON

CartoDB是一个数据可视化工具, 所以它的用法和其他在线地图工具的例子有点不同. 您的CartoDB地图将自动可视化地图上具有地理参考坐标的任何数据. 因此，我们可以通过简单地将它添加到PostGIS数据库中来显示萨格勒布的标签. 下面是一个用GeoJSON格式化的例子:

{
    “类型”:“FeatureCollection”,
    “特征”:[
        {
            “类型”:“特性”,
            “几何”:{
                “类型”:“点”,
                “坐标”:[15.9833,45.8167]
            },
            "属性":{
                “cartodb_id”:1、
                “名称”:“萨格勒布”,
                “描述”:空,
                “created_at”:“2015 - 02 - 20 t21:02:16z”,
                “updated_at”:“2015 - 02年- 20 - t21:03:59z”
            }
        }
    ]
}

然而，要真正了解CartoDB的能力，可以看看他们的 gallery.

Pros

非常适合管理和存储地理空间数据.
支持多种数据格式和大型数据集.
基于成熟的开源产品，如传单和PostGIS.
免费增值模式.

Cons

Not free.
Pricing 基于存储的数据大小，如果使用非常大的数据集，这可能会变得昂贵.

Web开发人员的其他选择

这些是目前可用的最流行的映射框架, 但在野外还有其他不太为人所知的选择. 如果你与微软的生态系统紧密相连，他们提供了一个类似于谷歌Maps的API Bing Maps API.

而且，我们不能不提到在线地图世界中的恐龙，MapQuest. 它仍然存在并提供 MapQuest映射工具.

如果你正在寻找一种稍微不同的地图制作方法， Kartograph 有趣是因为它是根据设计师和数据记者的需求创建的吗.

设计你的地图

所有这些框架都提供了一种自定义地图样式和外观的方法. MapBox和CartoDB使用CSS或CSS的变体提供样式.

在谷歌方面，引入了谷歌Maps API的第3版自定义样式地图. 这最终允许开发者, 尤其是设计师, 更多的空间来定制默认谷歌地图设计随处可见, 并使其更符合网站的整体视觉主题. 在丰富的谷歌Maps社区中，已经诞生了一些样式资源. 最值得注意的是 Snazzy Maps，一个为谷歌地图创建自定义样式并免费分享的社区.

如果你决定使用OpenLayers或传单，那么你就只能使用预渲染的地图贴图. Fortunately, 这里有不同范围的地图贴图可供选择, from Google, Nokia, Bing或默认的OSM磁贴, 专为设计师设计的, such as Stamen. 以获得有多少可用的地图块存在的感觉, 或者它们彼此之间的对比, visit the Streetmap攻击波 or Map compare sites.

网络地图和地图工具的未来

地图世界的未来看起来很有趣. 以下是几年前还像是科幻小说里出现的一些新兴技术:

Vector-Only -使用矢量图，而不是光栅图像与 D3.js 带来了一个使用标准框架无法实现的新特性世界. MapBox也在朝着这个方向发展 MapBox GL，基于OpenGL.
3D 三维地形和建筑现在可以在地图上显示了, 和OpenLayers v3提供了内置的支持 Cesium.
地理信息系统和空间分析在web浏览器 -已经可以使用 Turf. Turf是一个支持空间和统计操作的JavaScript库, 数据分类, 和GeoJSON数据创建, 都在浏览器内.

Wrap Up

这里列出的每个最好的在线地图工具都有其优点和缺点. For example, 代码示例显示了使用传单的简单性, 与OpenLayers带来的复杂性相比. 但是传单不能解决你的复杂的空间问题，而OpenLayers可以. 选择取决于你的需求是什么.

To summarize:

Google Maps -全面发展, 已建立的映射解决方案, 特别是对于非开发人员来说，他们可以在网上获得基本的地图, 以及b谷歌所拥有的所有力量.
OpenLayers -当其他映射框架不能解决你的空间分析问题的情况.
Leaflet - Currently, 很容易成为通用映射的最佳映射框架, 尤其是当你不需要MapBox或CartoDB提供的额外服务时.
MapBox -快速增长和市场变化的地图解决方案，当你想要更多的控制地图样式或有需要的服务，别人没有提供, 比如详细的卫星图像, 地理编码或方向.
CartoDB -如果你有大量的数据集，以不同的数据格式存储，不要再寻找.

Tomislav Bacinger