Leaflet 0.4 发布

发布于 2012 年 7 月 30 日 by Vladimir Agafonkin

经过 5.5 个月的开发，自上次稳定版本发布以来，有 33 位贡献者参与，我很自豪地宣布 Leaflet 0.4 发布！它带来了更简单的 API 和大量的改进和重要的错误修复，以及对文档的重大更新，官方插件页面以及这个开发者博客的发布。让我们逐一看看这些改进。

更简单的 API

Leaflet 0.4 包含几个 API 改进，使您可以编写更简单、更简洁的代码（类似于 jQuery），同时向后兼容以前的方法（因此您可以使用两种样式）。

L.marker([51.5, -0.09])
	.addTo(map)
	.bindPopup('Hello world!')
	.openPopup();

首先，Leaflet 方法现在以简单的数组形式接受 LatLng、LatLngBounds、Point 和 Bounds 对象，因此您无需始终显式创建它们。

map.panTo([50, 30]); // the same as:
map.panTo(new L.LatLng(50, 30));

其次，像 addLayer、addControl、openPopup 这样的 Map 方法获得了另一面的对应方法

marker.addTo(map);  // same as map.addLayer(marker)
control.addTo(map); //         map.addControl(control)
popup.openOn(map);  //         map.openPopup(popup)

再加上所有不显式返回值的 Leaflet 方法都返回对象本身这一事实，这允许方便的方法链。

第三，Leaflet 类现在带有小写快捷方式（类工厂），允许您在没有 new 关键字的情况下创建对象，这使得链式代码看起来更漂亮

L.map('map').fitWorld(); // same as
(new L.Map('map')).fitWorld();

值得注意的新功能

改进的缩放动画

在之前的版本中，标记、弹出窗口、矢量图层和图像叠加在缩放时会被隐藏，但现在（感谢 Dave Leaver），它们都具有美观、流畅的缩放动画，不同于任何其他现有的地图库。尝试缩放上面的地图，看看它看起来如何！但是，如果您的地图上有成千上万个标记，则可以关闭标记动画，如果它在 Map 的 markerZoomAnimation 选项中变得缓慢。

此外，现在如果您快速放大或缩小多次，图块不会消失。

Leaflet 地图在 0.4 中获得了很好的可访问性提升，它拥有新的键盘处理程序（由 Eric Martinez 贡献），默认启用。它允许用户使用箭头键进行平移和 +/- 键进行缩放来导航地图（在通过制表键切换到地图或单击它后使地图获得焦点）。试试看上面地图，感觉很好！

平移惯性

另一个不错的改进是平移体验 - 现在它具有惯性运动效果，在地图快速平移后，地图会平滑地继续移动。在触摸设备上感觉特别自然 - 而且默认情况下它也是启用的，现在试试看！它也非常可配置，允许您设置效果的最大速度、减速和触发它的时间阈值。

Android 4 上的捏合缩放

在之前的 Leaflet 版本中，捏合缩放只适用于 iOS 设备，但现在它终于来到了 Android！适用于 Android 4+，不仅在原生浏览器中，而且在 Chrome 和 Firefox for Android 中也能使用。

比例尺控件

一个简单、轻量级的控件，指示当前地图视图的比例尺，以公制和/或英制系统显示。与往常一样，您可以使用 CSS 自定义其外观。看看上面地图的左下角！

L.control.scale().addTo(map);

折线和多边形编辑

允许用户使用简单、直观的界面编辑折线和多边形。请注意，此功能最终将合并到 Leaflet.draw 中 - Jacob Toye 的一个很棒的插件，用于绘制形状。

polygon.editing.enable();

基于 Div 的图标

除了基于图像的 Icon 类之外，Leaflet 0.4 还获得了 DivIcon 类，用于创建轻量级基于 div 的标记（可以包含自定义 HTML 并且可以用 CSS 进行样式化）。例如，您可以在编辑折线（正方形手柄）或在稍后将要讨论的 Leaflet.markercluster 插件（彩色集群）中看到它们在实际应用中。

L.marker([50.505, 30.57], {
	icon: L.divIcon({className: 'my-div-icon'})
}).addTo(map);

矩形图层

矩形是创建矩形区域图层的便捷快捷方式。您以前可以使用多边形来实现这一点，但这更容易

L.rectangle([[51.505, -0.03], [51.5, -0.045]]).addTo(map);

API 改进

GeoJSON API

GeoJSON API 经过改进，变得更简单、更灵活。Jason Sanford 写了一个很棒的教程，展示了新的 API。但是，这些更改与以前不兼容，因此请确保更新您的旧代码。

图标 API

Icon API 经过改进，变得更简单、更灵活，并且这些更改也不兼容（旧代码可以很快更新）。查看更新后的自定义图标教程，或者直接前往 API 文档。

控件 API

现在创建自定义控件更容易 - 查看 API 文档，其中也包含一个简单的示例。

更好的事件 API

Aaron King 对事件方法做了一些改进。on 和 off 方法现在可以将多个事件类型作为以空格分隔的字符串类型同时接受

map.on('click dblclick moveend', doStuff);

此外，它们可以接受一个对象，其中类型和侦听器函数作为键值对，如下所示

marker.on({
	click: onMarkerClick,
	dragend: onMarkerDragEnd
});

此外，现在如果您只为 off 方法指定事件类型，它将删除与该事件关联的所有侦听器。

map.off('click');

其他 API 改进

Leaflet 0.4 在不同的 Leaflet 类中提供了 30 多种新的方法、选项和事件，使 API 更加完整和强大。查看完整变更日志，了解完整列表。

性能和可用性改进

您可能会认为 Leaflet 已经快得难以置信，但这个版本带来了一些性能改进，使其更快。

平移、地图大小调整和捏合缩放性能得到了改进（关于此的一些技巧将在以后的博客文章中解释）。
在画布后端（例如在 Android 2 上）更新和删除矢量图层的速度快了很多倍。
在移动设备上，控件的方框阴影被简单的边框替换，以提高性能。
现在，矢量图层在 iOS 上每次平移后不会闪烁。

此外，还有一些尚未提到的可用性改进

即使光标下方有标记，平移也能正常工作（有助于处理拥挤的地图）。
弹出窗口外观略有改进。
图块图层现在具有 detectRetina 选项，当启用时，会将视网膜显示屏的图块分辨率加倍（由 Mithgol 贡献）。

错误修复

Leaflet 0.4 带来了大约 45 个错误修复，使其在所有浏览器和平台上更加稳定和可靠。值得注意的错误修复包括臭名昭著的 iOS 错误，该错误会导致地图在某些情况下捏合缩放后完全消失，IE10 beta 中缩放损坏，使用 XHTML 内容类型提供的页面上的 Leaflet 地图损坏，以及固定位置元素内的地图缩放不正确。

以下是变更日志中错误修复的完整列表。

从旧版本升级

除了上面提到的 GeoJSON 和图标更改之外，这里有一个潜在的破坏性更改列表 - 在更新代码时仔细阅读它（不过应该不会花太多时间）。

Leaflet 0.4 的下载选项（包括实际下载、CDN 托管版本以及手动构建说明）在下载页面上列出。

代码统计

我仍然致力于使 Leaflet 尽可能小巧轻便。以下是库当前大小的细分

JavaScript: 27 KB，压缩并 gzip 压缩（压缩后 102 KB，源代码 176 KB，7578 行代码）
CSS: 1.8 KB，gzip 压缩（压缩后 8 KB，377 行代码）
图像: 10 KB（5 张 PNG 图像）

文档更新

到目前为止，Leaflet API 参考是不完整的。但是对于这个版本，我们付出了巨大的努力，使其 100% 完成、最新，并且总体上是您见过的最好的 API 参考页面。所有剩余的类、方法、选项、事件和属性都经过仔细记录，并添加了更多代码示例，并且从现在开始，文档将始终保持最新状态。

此外，页面的设计也得到了显著改进 - 采用了更好的颜色、字体、间距、连字符化、手动调整的列宽等 - 很多细节使它美观易读。

插件页面

Leaflet 网站现在有一个官方的插件页面，列出了由 Leaflet 社区创建的许多 Leaflet 插件，添加了许多很棒的功能并帮助进行服务集成。

我想提到的一个插件是 Leaflet.markercluster，由 Dave Leaver 创建，它是我在任何地图库中见过的最好的标记聚类插件 - 它速度快、美观、为聚类提供了流畅的动画，包括 Google Earth 风格的智能解决方案，用于解决最后一级缩放级别上的拥挤标记（由 George MacKerron 贡献），可以在悬停时突出显示集群覆盖的区域，在移动设备上运行良好，并且可以轻松定制。我认为我们将在下一篇文章中更详细地介绍这个插件。

另一个值得注意的插件是 Leaflet.draw，由 Jacob Toye 创建，灵感来自 Bruno B 的类似插件。它允许通过带有图标和提示的非常人性化的界面来绘制折线、多边形、矩形、圆形和标记等特征。其他与编辑相关的代码可能会在将来移入这个插件。

此外，感谢 Proj4Leaflet 插件，由 Kartena 创建，GIS 爱好者现在可以享受 Leaflet，用于具有某些独特和罕见投影的地图。

每个人都需要查看的另一个基于 Leaflet 的创作是 OSM Buildings，由 Jan Marsch 创建，这是一个很棒的 JS 库，用于在 Leaflet 地图上可视化 3D OSM 建筑数据。非常酷的东西。

开发者博客

这是 Leaflet 开发者博客的第一个帖子，它将成为所有重要 Leaflet 相关新闻、教程、提示和开发笔记的主要场所。

使用 Leaflet 的大玩家

自上一个版本发布以来，Leaflet 已经被许多优秀的公司采用，包括 Flickr、foursquare 和维基媒体基金会（现在已在首页上展示）。这对 Leaflet 和开源地图来说是一个激动人心的时刻，我期待看到更多公司在未来跟随这一趋势。

感谢

我要感谢所有帮助 Leaflet 成为现在这样的人——贡献代码、报告 bug、在他们的网站上使用 Leaflet、向同事推荐它、在会议上谈论它等等。继续努力！

特别感谢 Dave Leaver 的精彩贡献，包括改进的缩放动画和最先进的聚类插件，以及 Jason Sanford 的友好支持（以及其他事项，例如设置 Leaflet CDN）。

当然，还要感谢我伟大的公司 CloudMade，他们拥抱开源并支持此开发。

真诚地,
Vladimir Agafonkin，Leaflet 维持者。