®
世界顶尖人才，点播 ®

Toptal, LLC版权所有

\n \n \n
\n \n \n\n\n\n

生成的地图是这样的:

\n\n

\"使用API的谷歌地图\"

\n\n

Pros

\n\n\n\n

Cons

\n\n\n\n

OpenLayers

\n\n

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

\n\n

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

\n\n

实现

\n\n

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

\n\n
\n\n  \n    \n    \n    \n    \n    \n    \n  \n  \n    
\n      
\n    
\n    \n  








































\n\n
\n\n

结果是:

\n\n

\"使用openlayer3映射\"

\n\n

Pros

\n\n\n\n

Cons

\n\n\n\n

Leaflet

\n\n

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

\n\n

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

\n\n

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

\n\n

实现

\n\n

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

\n\n
\n\n  \n    \n    \n    \n  \n  \n    
\n    \n  








































\n\n
\n\n

\"使用地图单张\"

\n\n

Pros

\n\n\n\n

Cons

\n\n\n\n

MapBox

\n\n

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

\n\n\n\n

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

\n\n

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

\n\n

CartoCSS

\n\n

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

\n\n

\"使用地图\"

\n\n

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

\n\n

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

\n\n
@ name:“[name_en]”;\n@name_arrr: \"[name_en].replace('([Aa]r)','\\1rr')\";\n@land: # fff8f0;\n@water: # cdd;\n@park: #cda;\n\nMap {\n  background - color: @land;\n  背景图片:url (img /噪音.png);\n}\n\n#admin[maritime=0][zoom>=3] {\n  线连接:圆形;\n  线条颜色:# 478;\n  comp-op:繁殖;\n  // Countries\n  (admin_level = 2) {\n    line-cap:圆形;\n    线宽:0.8;\n    [zoom>=6] { line-width: 2; }\n    [zoom>=8] { line-width: 4; }\n    (有争议的= 1){\n      line-dasharray: 4, 4;\n      line-cap:对接;\n    }\n  }\n  //国家/省/分区域\n  [admin_level>=3] {\n    线宽:0.4;\n    line-dasharray: 10, 3, 3, 3;\n    [zoom>=6] { 线宽:1; }\n    [zoom>=8] { line-width: 2; }\n    [zoom>=12] { line-width: 3; }\n  }\n}\n\n@water_line:减轻(@water 8);\n#water {\n  ::b {\n    polygon-pattern-file: url (img /水.png);\n  polygon-pattern-alignment:全球;\n  }\n  polygon-fill:混合(@water # fff 50);\n  polygon-gamma: 0.6;\n  comp-op:繁殖;\n  a /线条颜色:@water_line;\n  /线宽:0.4;\n  a / line-comp-op:繁殖;\n  / line-smooth: 2;\n  b /线条颜色:@water_line;\n  b /线宽:0.4;\n  b / line-comp-op:繁殖;\n  b / line-smooth: 4;\n  c /线条颜色:@water_line;\n  c /线宽:0.4;\n  c / line-comp-op:繁殖;\n  c / line-smooth: 6;\n  [zoom>=12] {\n    /线宽:0.8;\n    b /线宽:0.8;\n    c /线宽:0.8;\n  }\n}\n\n#waterway {\n  comp-op:繁殖;\n  类型=“河”,\n  (type = '管']{\n    线条颜色:@water;\n    线宽:0.5;\n    [zoom>=12] { 线宽:1; }\n    [zoom>=14] { line-width: 2; }\n    [zoom>=16] { line-width: 3; }\n  }\n  (类型=“流”){\n    线条颜色:@water;\n    线宽:0.5;\n    [zoom>=14] { 线宽:1; }\n    [zoom>=16] { line-width: 2; }\n    [zoom>=18] { line-width: 3; }\n  }\n}\n\n#landuse {\n  ::glow {\n    comp-op:繁殖;\n    [类=“公园”],[类= '节'],[类= '学校']{\n      线宽:2;\n      线连接:圆形;\n      (类=“公园”){ line-color:#ddb; }\n      [class='pitch'] { line-color:#eed; }\n      [类= '学校']{ line-color:#edb; }\n    }\n  }\n  ::main[zoom>=0] {\n    comp-op:繁殖;\n    (类=“公园”){\n      polygon-pattern-file: url (img /公园.png);\n      polygon-pattern-alignment:全球;\n    }\n    [类= '学校']{\n      polygon-fill: # ed9;\n      polygon-opacity: 0.5;\n    }\n  }\n  ::木(类=‘木’){\n    线条颜色:# C3CFB4;\n    line-opacity: 0.33;\n    线宽:3;\n    线连接:圆形;\n    polygon-pattern-file: url (img /森林.png);\n    polygon-pattern-alignment:全球;\n    comp-op:繁殖;\n    opacity:0.5;\n  }\n}\n\n#building {\n  polygon-fill: # efe8d8;\n  comp-op:繁殖;\n  [zoom>=15] {\n    Line-color:#efe8d8 * 0.9;\n    [zoom>=15] { line-width:0.2; }\n    [zoom>=16] { line-width:0.4; }\n    [zoom>=17] { line-width:0.8; }\n  }\n}\n\n#tunnel{透明度:0.5; }\n\n#road,\n#tunnel,\n#bridge {\n  (“mapnik:: geometry_type”= 2){\n    线宽:1;\n    线条颜色:# edc;\n    line-comp-op:繁殖;\n    (类=‘高速公路’),\n    (类=“主要”),\n    [类= ' motorway_link '] {\n      线条颜色:# dba;\n      [zoom>=10] { 线宽:1; }\n      [zoom>=12] { line-width: 2; }\n      [zoom>=14] { line-width: 3; }\n      [zoom>=16] { line-width: 5; }\n    }\n    (类=“街”),\n    [类= ' street_limited '] {\n      [zoom>=13] { line-width: 1.4; }\n      [zoom>=14] { line-width: 2; }\n      [zoom>=16] { line-width: 3; }\n    }\n    [类= ' street_limited '] { line-dasharray: 4,1; }\n    [class='path'] { line-dasharray: 3,2; }\n  }\n}\n
\n\n

Arrgh, matey!

\n\n

\"带地图盒的地图\"

\n\n

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

\n\n

Pros

\n\n\n\n

Cons

\n\n\n\n

CartoDB

\n\n

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

\n\n

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

\n\n

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

\n\n

GeoJSON

\n\n

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

\n\n
{\n    \"type\": \"FeatureCollection\",\n    \"features\": [\n        {\n            \"type\":\"Feature\",\n            \"geometry\": {\n                \"type\":\"Point\",\n                \"coordinates\":[15.9833,45.8167]\n            },\n            \"properties\": {\n                \"cartodb_id\":1,\n                \"name\":\"Zagreb\",\n                \"description\":null,\n                \"created_at\":\"2015-02-20T21:02:16Z\",\n                \"updated_at\":\"2015-02-20T21:03:59Z\"\n            }\n        }\n    ]\n}\n
\n\n

\"使用cartodb绘制地图\"

\n\n

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

\n\n

Pros

\n\n\n\n

Cons

\n\n\n\n

Web开发人员的其他选择

\n\n

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

\n\n

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

\n\n

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

\n\n

设计你的地图

\n\n

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

\n\n

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

\n\n

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

\n\n

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

\n\n

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

\n\n\n\n

Wrap Up

\n\n

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

\n\n

To summarize:

\n\n\n","as":"div","isContentFit":true,"sharingWidget":{"url":"http://dcjn.hadeslo.com/web/the-roadmap-to-roadmaps-a-survey-of-the-best-online-mapping-tools","title":"Best Online Mapping Tools for Web开发人员","text":null,"providers":["linkedin","twitter","facebook"],"gaCategory":null,"domain":{"name":"developers","title":"Engineering","vertical":{"name":"developers","title":"Developers","publicUrl":"http://dcjn.hadeslo.com/developers"},"publicUrl":"http://dcjn.hadeslo.com/developers/blog"},"hashtags":"OnlineMaps,GoogleMapsAlternatives,Leaflet,OpenLayers,MapBox,CartoDB"}}