Leaflet Dev Blog
2023-11-08T22:20:34+08:00
https://leafletjs.com/
Volodymyr Agafonkin
Leaflet 1.9 发布
2022-09-21T00:00:00+08:00
https://leafletjs.com/2022/09/21/leaflet-1.9.0
<p>v1.9 版本为自 2016 年以来 Leaflet 的第一个主要版本升级奠定了基础! 从那以后发生了很多变化,是时候让 Leaflet 与 Web 平台一起成长了。</p>
<p>在此版本之后,我们将会把 1.x 版本代码切出一个分支并持续进行维护,该分支主要用于关键的错误修复。虽然 <strong>2.0 版本</strong> 还很遥远,并且需要一些时间才能成型,但我们计划进行以下更改:</p>
<ul>
<li><strong>放弃对 Internet Explorer 的支持</strong>。
我们将不在支持 IE 浏览器,因为 IE 浏览器已经<a href="https://blogs.windows.com/windowsexperience/2022/06/15/internet-explorer-11-has-retired-and-is-officially-out-of-support-what-you-need-to-know/">正式停止使用</a>,是时候说再见了。在未来 Leaflet 将会针对 Firefox、Chrome、Edge 和 Safari 等浏览器进行重点支持。</li>
<li><strong>拥抱现代 JavaScript</strong>。
为了保持向后兼容性,Leaflet 完全用 ES5 编写,这是旧版浏览器支持的 JavaScript 版本。因此,我们无法利用许多出色的 JavaScript 特性(例如<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes">标准化的类</a>,而不得不依赖<a href="https://leafletjs.com/reference.html#class">我们自己的实现</a>)。通过采用更现代的 ECMAScript 标准版本,我们可以开始努力使 Leaflet 与现代 JavaScript 库的预期保持一致。</li>
<li><strong>标准化模块</strong>。
当我们发布 Leaflet v1 时,JavaScript 世界的格局大不相同,充满了竞争的模块标准,例如 CommonJS、AMD 和 UMD。今天,<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules">ECMAScript modules</a> 标准已经将 JavaScript 生态统一在一起。在未来,Leaflet 将仅使用单个模块化标准,这将大大降低了我们分布式代码的复杂性。</li>
<li><strong>移除 Leaflet global</strong>。
作为使用 Leaflet 的开发人员,你可能对大写字母 <code class="language-plaintext highlighter-rouge">L</code> 非常熟悉。这是 Leaflet 的所有功能所在的 Leaflet 全局变量。为了允许编译器工具可以通过 <a href="https://developer.mozilla.org/en-US/docs/Glossary/Tree_shaking">tree-shaking</a> 来更好地消除无用代码,我们正在删除这个全局变量。为了保持与旧插件的向后兼容性,我们将提供一个可以手动导入的 shim,以恢复此功能。</li>
</ul>
<p>在这里查看<a href="https://github.com/Leaflet/Leaflet/releases/tag/v1.9.0">完整的更新日志</a>。</p>
<p><strong>编辑</strong>: 已发布 <a href="https://github.com/Leaflet/Leaflet/releases/tag/v1.9.1">v1.9.1 补丁</a> 以解决与 <em>Leaflet.markercluster</em> 插件的兼容性问题。</p>
<p><strong>Edit</strong>: <a href="https://github.com/Leaflet/Leaflet/releases/tag/v1.9.2">v1.9.2 补丁</a> 已经发布,由于与插件的许多兼容性问题,它恢复了 ESM 支持。</p>
<p><strong>Edit</strong>: <a href="https://github.com/Leaflet/Leaflet/releases/tag/v1.9.3">v1.9.3 补丁</a> 已发布,解决了一些 BUG 和可访问性问题。</p>
<p><strong>Edit</strong>: <a href="https://github.com/Leaflet/Leaflet/releases/tag/v1.9.4">v1.9.4 补丁</a> 已发布, 解决了一些 BUG。</p>
<p>Cheers,<br />
The Leaflet team.</p>
<p><a href="https://stand-with-ukraine.pp.ua"><img src="https://raw.githubusercontent.com/vshymanskyy/StandWithUkraine/main/banner-direct.svg" alt="Stand With Ukraine" /></a></p>
Leaflet 1.8 版本在战争中发布
2022-04-18T00:00:00+08:00
https://leafletjs.com/2022/04/18/leaflet-1.8.0
<p>我们刚刚发布了 Leaflet v1.8.0,这是过去一年半以来开发的结晶。这是一个大的版本,专注于 <strong>bug 的修复</strong>,<strong>可靠性</strong>和<strong>可访问性</strong>的改进,<strong>清理</strong>遗留的代码,以及对文档、开发工作流程和发布过程的大量改进。这是数百个贡献的结晶,也是为未来更大的变化做准备。🍃从现在开始,发布将变得更加频繁。</p>
<p>我发布此版本时,外面的基辅正在响起<a href="https://observablehq.com/@mourner/sirens">空袭警报</a>,警告俄罗斯即将进行空袭。此版本致力于为乌克兰争取自由和民主以对抗俄罗斯入侵(查看如何<a href="https://stand-with-ukraine.pp.ua/">在此处支持乌克兰</a>)。</p>
<p>感谢我们了不起的社区,感谢你们的耐心帮助。❤️🙏特别感谢<a href="https://github.com/johnd0e">@johnd0e</a>,他在长期停滞后恢复了 Leaflet 的开发,并做出了最大的贡献,<a href="https://github.com/Falke-Design">@Falk-Design</a>做了大量的工作,组织开发和准备发布,<a href="https://github.com/Malvoz">@Malvoz</a>做出了大量的无障碍贡献,以及<a href="https://github.com/jonkoops">@jonkoops</a>在工作流程自动化上的帮助。❤️</p>
<p>在这里查看<a href="https://github.com/Leaflet/Leaflet/releases/tag/v1.8.0">完整的更新日志</a>。</p>
<p>Cheers,<br />
The Leaflet team.</p>
<p><a href="https://stand-with-ukraine.pp.ua"><img src="https://raw.githubusercontent.com/vshymanskyy/StandWithUkraine/main/banner-direct.svg" alt="Stand With Ukraine" /></a></p>
Leaflet 1.7 发布
2020-09-04T00:00:00+08:00
https://leafletjs.com/2020/09/04/leaflet-1.7.1
<p>在过去一年左右的时间里,主流网络浏览器已经巧妙地改变了触摸屏的工作方式;不幸的是,Leaflet 1.6.0 和以前的版本现在在触摸屏上总会出现一些奇怪的问题。</p>
<p>Leaflet 1.7.1 通过对如何检测和处理 PointerEvents 进行了一些调整,在可用时使用被动触摸事件侦听器修复了该问题。</p>
<p>这个版本的编号应该是 1.7.0 ,但在最后一刻出现了一个 NPM 依赖的问题,产生了一个糟糕的构建,1.7.0 版本在 NPM 中被标记为废弃版本,因此使用 1.7.1 来代替。</p>
<p>除此之外,还有一堆小的错误和文档修复,详细内容见 <a href="https://github.com/Leaflet/Leaflet/blob/master/CHANGELOG.md">更新日志</a> 。无论是多小的修复,都要感谢每一个参与修复的人。</p>
<p>如果要获取最新版本,请在你喜欢的软件包管理器中更新你的依赖,或查看 <a href="https://leafletjs.com/download.html">下载页面</a> 。</p>
<p>Cheers,<br />
The Leaflet team.</p>
发布 Leaflet 1.6.0
2019-11-17T00:00:00+08:00
https://leafletjs.com/2019/11/17/leaflet-1.6.0
<p>Leaflet 1.6.0 已经发布!</p>
<p>这个版本带来了一些新的功能,以及错误的修正和改进!</p>
<p>这里有一些亮点:</p>
<ul>
<li>在 <code class="language-plaintext highlighter-rouge">L.CircleMarker</code> 的 <code class="language-plaintext highlighter-rouge">move</code> 事件中添加 <code class="language-plaintext highlighter-rouge">oldLatLng</code> 坐标</li>
<li>在 <code class="language-plaintext highlighter-rouge">L.GeoJSON</code> 中增加新的 <code class="language-plaintext highlighter-rouge">markersInheritOptions</code> 选项</li>
<li>修复 iOS 13 上的 <code class="language-plaintext highlighter-rouge">dblclick</code></li>
<li>使用 passive 事件监听器</li>
</ul>
<p>非常感谢所有使这个版本成为可能的贡献者!</p>
<p><a href="https://github.com/Leaflet/Leaflet/blob/master/CHANGELOG.md">更新日志</a> 可在此查阅。</p>
<p>如果要获取最新版本,请在你喜欢的软件包管理器中更新你的依赖,或查看 <a href="https://leafletjs.com/download.html">下载页面</a> 。</p>
<p>Cheers,<br />
The Leaflet team.</p>
发布 Leaflet 1.5.1
2019-05-08T00:00:00+08:00
https://leafletjs.com/2019/05/08/leaflet-1.5.1
<p>Leaflet 1.5.1 发布了!</p>
<p>这是一个 hotfix 版本,它修复了 1.5.0 中的模块导出问题。</p>
<p><a href="https://github.com/Leaflet/Leaflet/blob/master/CHANGELOG.md">更新日志</a> 可在此查阅。</p>
<p>如果要获取最新版本,请在你喜欢的软件包管理器中更新你的依赖,或查看 <a href="https://leafletjs.com/download.html">下载页面</a> 。</p>
<p>Cheers,<br />
The Leaflet team.</p>
发布 Leaflet 1.5.0
2019-05-08T00:00:00+08:00
https://leafletjs.com/2019/05/08/leaflet-1.5.0
<p>Leaflet 1.5.0 发布了!</p>
<p>这个版本带来了一些新的功能,以及错误的修正和改进!</p>
<p>这里有一些亮点:</p>
<ul>
<li>为 <code class="language-plaintext highlighter-rouge">VideoOverlay</code> 新增 <code class="language-plaintext highlighter-rouge">keepAspectRatio</code> 选项</li>
<li>支持 <code class="language-plaintext highlighter-rouge">keydown</code> 和 <code class="language-plaintext highlighter-rouge">keyup</code> 事件</li>
<li>为 <code class="language-plaintext highlighter-rouge">Marker</code> 新增 <code class="language-plaintext highlighter-rouge">shadowPane</code> 选项</li>
<li>修正了使用多张地图时的图层控制 state</li>
<li>更新属性链接至 HTTPS</li>
</ul>
<p>非常感谢所有使这个版本成为可能的贡献者!</p>
<p><a href="https://github.com/Leaflet/Leaflet/blob/master/CHANGELOG.md">更新日志</a> 可在此查阅。</p>
<p>如果要获取最新版本,请在你喜欢的软件包管理器中更新你的依赖,或查看 <a href="https://leafletjs.com/download.html">下载页面</a> 。</p>
<p>Cheers,<br />
The Leaflet team.</p>
发布 Leaflet 1.4.0
2018-12-30T00:00:00+08:00
https://leafletjs.com/2018/12/30/leaflet-1.4.0
<p>Leaflet 1.4.0 发布了!</p>
<p>这个小版本的发布带来了新的有用的 <a href="https://leafletjs.com/reference.html#map-paninside">Map.panInside</a> 方法,以及错误的修正和改进!:)</p>
<p>非常感谢所有使这个版本成为可能的贡献者!</p>
<p><a href="https://github.com/Leaflet/Leaflet/blob/master/CHANGELOG.md">更新日志</a> 可在此查阅。</p>
<p>如果要获取最新版本,请在你喜欢的软件包管理器中更新你的依赖,或查看 <a href="https://leafletjs.com/download.html">下载页面</a> 。</p>
<p>Happy New Year,<br />
The Leaflet team.</p>
发布 Leaflet 1.3.4
2018-08-21T00:00:00+08:00
https://leafletjs.com/2018/08/21/leaflet-1.3.4
<p>Leaflet 1.3.4 发布了!</p>
<p>这个版本包含一些错误修复和改进!:)
非常感谢所有使这个版本成为可能的贡献者!</p>
<p><a href="https://github.com/Leaflet/Leaflet/blob/master/CHANGELOG.md">更新日志</a> 可在此查阅。</p>
<p>想在新的 Leaflet 发布时收到通知?订阅 <a href="https://github.com/Leaflet/Leaflet/issues/6295">本期</a> 。</p>
<p>如果要获取最新版本,请在你喜欢的软件包管理器中更新你的依赖,或查看 <a href="https://leafletjs.com/download.html">下载页面</a> 。</p>
<p>Cheers,<br />
The Leaflet team.</p>
发布 Leaflet 1.3.3
2018-07-18T00:00:00+08:00
https://leafletjs.com/2018/07/18/leaflet-1.3.3
<p>Leaflet 1.3.3 发布了!</p>
<p>此版本修正了全局变量 <code class="language-plaintext highlighter-rouge">L</code> 未被暴露的问题。详见 <a href="https://github.com/Leaflet/Leaflet/issues/6238">#6238</a> 。</p>
<p>非常感谢所有使这个版本成为可能的贡献者!</p>
<p><a href="https://github.com/Leaflet/Leaflet/blob/master/CHANGELOG.md">更新日志</a> 可在此查阅。</p>
<p>如果要获取最新版本,请在你喜欢的软件包管理器中更新你的依赖,或查看 <a href="https://leafletjs.com/download.html">下载页面</a> 。</p>
<p>Cheers,<br />
The Leaflet team.</p>
发布 Leaflet 1.3.2
2018-07-17T00:00:00+08:00
https://leafletjs.com/2018/07/17/leaflet-1.3.2
<p>Leaflet 1.3.2 发布了!</p>
<p>这个版本包含一些错误修复和改进!:)</p>
<p>非常感谢所有使这个版本成为可能的贡献者!详情见完整的 <a href="https://github.com/Leaflet/Leaflet/blob/master/CHANGELOG.md">更新日志</a> 。</p>
<p>如果要获取最新版本,请在你喜欢的软件包管理器中更新你的依赖,或查看 <a href="https://leafletjs.com/download.html">下载页面</a> 。</p>
<p>Cheers,<br />
The Leaflet team.</p>
发布 Leaflet 1.3.1
2018-01-18T00:00:00+08:00
https://leafletjs.com/2018/01/18/leaflet-1.3.1
<p>Leaflet 1.3.1 刚刚发布!</p>
<p>此版本修复了 1.3.0 版本中引入的 <code class="language-plaintext highlighter-rouge">L.TileLayer</code> 回归问题。哎呀!
详见 <a href="https://github.com/Leaflet/Leaflet/blob/master/CHANGELOG.md">更新日志</a> 。</p>
<p>如果要获取最新版本,请在你喜欢的软件包管理器中更新你的依赖,或查看 <a href="https://leafletjs.com/download.html">下载页面</a> 。</p>
<p>Cheers,<br />
The Leaflet team.</p>
发布 Leaflet 1.3.0
2018-01-15T00:00:00+08:00
https://leafletjs.com/2018/01/15/leaflet-1.3.0
<p>期待已久的 Leaflet 1.3.0 刚刚发布!</p>
<p>这个版本包含了大量的错误修复、改进和一些新的选项。
非常感谢所有使这个版本成为可能的贡献者!详情见完整的 <a href="https://github.com/Leaflet/Leaflet/blob/master/CHANGELOG.md">更新日志</a> 。</p>
<p>如果要获取最新版本,请在你喜欢的软件包管理器中更新你的依赖,或查看 <a href="https://leafletjs.com/download.html">下载页面</a> 。</p>
<p>Cheers,<br />
The Leaflet team.</p>
Leaflet 1.2.0 已发布
2017-08-08T00:00:00+08:00
https://leafletjs.com/2017/08/08/leaflet-1.2.0
<p>Leaflet 1.2.0 刚刚发布。这次发布的主要原因是为了解决 1.1.0 版本中一个不幸的退步, <a href="https://github.com/Leaflet/Leaflet/issues/5589">给一些插件带来麻烦</a> 。传统上,Leaflet 插件已经改变和增加了 Leaflet 的命名空间( <code class="language-plaintext highlighter-rouge">L</code> 全局),在 Leaflet 在 ES6 模块上重建后,这种情况不再被允许(导入的模块是只读的)。为了保持向后的兼容性,我们做了一个变通,使 Leaflet 的命名空间和它的内容再次变得可变。</p>
<p>对于未来,我们希望制定一个新的建议来编写 Leaflet 插件,考虑到现代 JavaScript 是如何用 ES6 模块构建的,而不是修改
Leaflet 命名空间。
像往常一样,我们还设法关闭了一些其他的 bug ,并做了一些小的改进,所有这些都是在我们许多贡献者的帮助下完成的 —— 非常感谢所有为今年夏天的发布做出贡献的人! 详情请见完整的 <a href="https://github.com/Leaflet/Leaflet/blob/master/CHANGELOG.md">更新日志</a> 。</p>
<p>如果要获取最新版本,请在你喜欢的软件包管理器中更新你的依赖,或查看 <a href="https://leafletjs.com/download.html">下载页面</a> 。</p>
<p>Cheers,<br />
The Leaflet team.</p>
发布 Leaflet 1.1.0
2017-06-27T00:00:00+08:00
https://leafletjs.com/2017/06/27/leaflet-1.1.0
<p>我们已经发布了 Leaflet 1.1.0 版本,这是第一个用 <a href="https://babeljs.io/learn-es2015/#ecmascript-2015-features-modules">ES6 模块</a> 构建的版本 —— 这是一个很大的进步,确保 Leaflet 与现代 JavaScript 的编写方式保持一致。对于升级到这个版本的用户来说,这一变化应该不会有什么影响,而如果你的应用程序是用 ES6 构建的,它提供了单独导入 Leaflet 各个部分的可能性。因此,1.1.0 也是第一个没有使用 Leaflet 的自定义构建系统的版本,而是使用 <a href="https://rollupjs.org/">Rollup</a> 。</p>
<p>在这个版本中,还有一个新的 <code class="language-plaintext highlighter-rouge">L.VideoOverlay</code> 类,允许 <a href="https://leafletjs.com/examples/video-overlay/">在你的地图上覆盖视频</a> 。</p>
<p>在大约 20 个不同的贡献者的帮助下,我们还成功地修复了 30 多个 bug: 详情请见完整的 <a href="https://github.com/Leaflet/Leaflet/blob/master/CHANGELOG.md">更新日志</a> 。</p>
<p>如果要获取最新版本,请在你喜欢的软件包管理器中更新你的依赖,或查看 <a href="https://leafletjs.com/download.html">下载页面</a> 。</p>
<p>Cheers,<br />
The Leaflet team.</p>
发布 Leaflet 1.0.3
2017-01-23T00:00:00+08:00
https://leafletjs.com/2017/01/23/leaflet-1.0.3
<p>Leaflet 1.0.3 已经出来了,自 1.0.2 以来,大约有十几个错误被修复。</p>
<p>主要的亮点之一是处理网络浏览器的 <code class="language-plaintext highlighter-rouge">dblblick</code> 事件。
支持<a href="https://developer.mozilla.org/en-US/docs/Web/API/PointerEvent"><code class="language-plaintext highlighter-rouge">PointerEvent</code>s</a> 。
到目前为止,唯一使用 <code class="language-plaintext highlighter-rouge">PointerEvent</code> 的浏览器是 Internet Explorer 和 Edge;
但现在 Chrome 已经 <a href="https://developers.google.com/web/updates/2016/11/nic55#pointer-events">在 55 版中启用支持</a> ,
检查双击和触摸屏的 Leaflet 代码必须改变。</p>
<p>Leaflet 1.0.3 也改进了 <code class="language-plaintext highlighter-rouge">L.Canvas</code> 渲染的性能和行为,
回传了一些针对 Internet Explorer 8 的修正,以及一些杂项的修正。</p>
<p>完整的变化清单可以在 <a href="https://github.com/Leaflet/Leaflet/blob/master/CHANGELOG.md">更新日志</a> 上找到。</p>
<p>像往常一样,请查看 <a href="https://leafletjs.com/download.html">下载页面</a> 以获得这个版本。</p>
<p>Cheers,<br />
The Leaflet team.</p>
发布 Leaflet 1.0.2
2016-11-21T00:00:00+08:00
https://leafletjs.com/2016/11/21/leaflet-1.0.2
<p>作为我们“我们真的承诺了一个更快的发布周期”愿景的一部分,我们正在发布 Leaflet 1.0.2 。</p>
<p>与 1.0.1 相比,这个版本修复了大约十几个错误,还有几个新的选项。完整的变化列表可以在 <a href="https://github.com/Leaflet/Leaflet/blob/master/CHANGELOG.md">更新日志</a> 上找到。</p>
<p>像往常一样,请查看 <a href="https://leafletjs.com/download.html">下载页面</a> 来获取这个版本。</p>
<h3 id="下一步计划">下一步计划?</h3>
<p>现在,Leaflet 使用一组脚本将大量的文件放在一起。虽然这多年来一直很可靠,但我们希望能接受当代 JavaScript 的一些特性。</p>
<p>我们一直在努力重新组织代码库,以实现 ES6 模块。这意味着一个更干净、更容易理解的构建系统,并且由于有了 <a href="http://rollupjs.org/">RollupJS</a> ,文件大小也稍微小了一点。</p>
<p>我们的目标是通过新的滚动构建实现 1.1.0 版本。尽管这不是一个非常令人兴奋的发展,但这将为实验新的 Leaflet 插件的方式铺平道路。</p>
<p>Cheers,<br />
The Leaflet team.</p>
Leaflet 1.0 正式发布.
2016-09-27T00:00:00+08:00
https://leafletjs.com/2016/09/27/leaflet-1.0-final
<p><img alt="This is totally not making fun of the announcements by a company with a fruit logo." src="https://cloud.githubusercontent.com/assets/25395/18873565/c4856f70-84c8-11e6-82b1-48992fc5afe8.png" width="800" /></p>
<p>今天标志着 Leaflet 1.0 的最终发布。它是来自世界各地的几十位贡献者数年工作的结晶。这是有史以来最快、最稳定和最完善的 Leaflet 版本。</p>
<p><a href="https://github.com/Leaflet/Leaflet/blob/master/CHANGELOG.md">更新日志</a> 与之前的稳定版,即 v0.7.7 相比,包含了超过 400 处的变化。亮点包括:</p>
<ul>
<li>在库的各个方面,特别是在矢量图层方面有巨大的性能改进。</li>
<li>新的 <code class="language-plaintext highlighter-rouge">L.Tooltip</code> 类满足你所有的动态标签需求。</li>
<li>飞越动画(用 <code class="language-plaintext highlighter-rouge">map.flyTo</code> 在曲线上缩放和平移)。</li>
<li>支持小数点缩放级别( <code class="language-plaintext highlighter-rouge">map.setZoom(12.34)</code> )。</li>
<li>更好的瓷砖加载算法,减少闪烁。</li>
<li>自定义窗格管理(包括多个矢量层窗格和交错矢量和瓦片层)。</li>
<li>更好地支持非标准推算。</li>
<li>更多的无障碍功能。</li>
<li>大大改善了文档。</li>
<li>大量的错误修复和稳定性改进。</li>
</ul>
<p>如果没有这样一个惊人的、多样化的、充满爱的社区,这个版本是不可能的。我们为能成为其中的一员而感到无比自豪。非常感谢你们的支持!</p>
<h3 id="新的发布周期">新的发布周期</h3>
<p>这个版本已经逾期了,而且花了太长时间。部分原因是我们最初对 1.0 的雄心壮志,要求几乎从头开始重写库的许多部分,部分原因是完美主义(一些 beta / rc 版本已经比我们最后的稳定版本更稳定),部分原因是我们低估了在一个被成千上万的开发者使用的库中引入大的破坏性变化的成本。</p>
<p>从 1.0 开始,我们将转向快速的发布周期,每 2-4 周就会有一个新的版本出来。我们也倾向于许多小的、渐进式的变化(中间有发布)。而不是雄心勃勃的重写任务。</p>
<h3 id="下一步是什么">下一步是什么?</h3>
<p>除了用修复和改进来支持新版本外,以下领域现在将得到我们的密切关注:</p>
<ul>
<li>一个更干净、更稳定的插件生态系统。我们希望确保所有流行的插件都能在最新的版本中很好地工作,并得到维护。我们将修改我们的插件列表页面,收紧我们的审查程序,把更多的关键插件放在 GitHub 上的 Leaflet 组织的翅膀下,并花更多的时间在它们身上。</li>
<li>教程和实例涵盖了库的更多高级功能,其流行的插件,以及与 D3 和 React / Angular 等库的整合。</li>
<li>探索切换到一个更现代的 JavaScript 风味和模块系统( ES6,Babel,Rollup )。</li>
<li>支持地图旋转。</li>
</ul>
<p>请帮助我们测试这个新版本,确保它与你喜欢的插件一起工作,参与 GitHub 上的讨论,别忘了我们一直在寻找 <a href="https://github.com/Leaflet/Leaflet/blob/master/CONTRIBUTING.md">新的贡献者</a> !</p>
<p>当然,我们也要庆祝一下!</p>
<p>Love,<br />
The Leaflet team.</p>
<p><img src="https://www.reactiongifs.com/wp-content/uploads/2013/06/umad.gif" alt="" /></p>
发布 Leaflet 1.0-rc3
2016-08-05T00:00:00+08:00
https://leafletjs.com/2016/08/05/leaflet-1.0-rc3
<p>事件监听器调用方式的退步促使 Leaflet 团队冻结了一个新的候选版本,所以这里是第三个。</p>
<h3 id="修正错误修正错误修正错误">修正错误,修正错误,修正错误!</h3>
<p>之前的候选版本有一个事件重构和新的 <code class="language-plaintext highlighter-rouge">L.Tooltip</code> 类,而且,很奇怪。
这个版本中几乎所有的修复都与这两个变化有关!</p>
<p>主要的退步影响了 Leaflet 调用事件监听器的方式:我们调用监听器的顺序和它们被注册的顺序不一样。</p>
<p>在 rc2 之前,Leaflet 对有明确上下文和无明确上下文的监听器的处理是不同的。前者总是在后者之前被调用,无论它们的注册顺序如何,但它们的顺序是不可预测的。同时,没有显式上下文的监听器,虽然总是在其他监听器之后被调用,但却是按照注册顺序被调用。</p>
<p>在为 rc2 重构事件的任务中,为了使它们更快,我们也对这些代码进行了因子化。但我们做错了!</p>
<p>然后,第三个版本是让所有听众以可预测的方式行事。虽然这是一个明显的改进,但它在角落里可能会产生副作用。因此,在升级时要小心谨慎!</p>
<p>关于这个快速修复版本没有更多需要强调的地方,请查看 <a href="https://github.com/Leaflet/Leaflet/blob/master/CHANGELOG.md#10-rc3-august-3-2016">1.0.0-rc3 更新日志</a> 以了解完整的变化列表。</p>
<h3 id="夏季黑客攻击">夏季黑客攻击</h3>
<p>在夏天,当所有的团队都在休息的时候发布,有一些有趣的副作用。这次发布主要是在旅行中完成的,坐火车和飞机。
还有一部分是在伊拉克的某个小村庄,温度在53摄氏度以下!</p>
<p><img src="/docs/images/2016-08-03-iraq-hacking.jpg" alt="伊拉克黑客" /></p>
<h3 id="获取候选版本">获取候选版本</h3>
<p>与以前的版本一样,你可以使用CDN:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code><link rel="stylesheet" href="https://unpkg.com/leaflet@1.0.0-rc.3/dist/leaflet.css" />
<script src="https://unpkg.com/leaflet@1.0.0-rc.3/dist/leaflet.js"></script>
</code></pre></div></div>
<p>一个非简化版本的 javascript 文件也可以在以下网址找到:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code><script src="https://unpkg.com/leaflet@1.0.0-rc.3/dist/leaflet-src.js"></script>
</code></pre></div></div>
<p>该版本也可以通过 NPM ( <code class="language-plaintext highlighter-rouge">npm install leaflet@rc</code> )、<a href="https://github.com/Leaflet/Leaflet/archive/v1.0.0-rc.3.zip">GitHub 下载</a> 和 <a href="http://cdn.leafletjs.com/leaflet/v1.0.0-rc.3/leaflet.zip">CDN 下载</a> 获得。我们不鼓励使用 Bower 。</p>
<p>使用它,享受它,并请报告任何 <a href="https://github.com/Leaflet/Leaflet/issues">issue</a> 。以帮助准备最终的 Leaflet 1.0 版本!</p>
<p>Best,</p>
<p>The “Leafteam”</p>
发布 Leaflet 1.0-rc2
2016-07-16T00:00:00+08:00
https://leafletjs.com/2016/07/16/leaflet-1.0-rc2
<p>这里有 Leaflet 1.0 的第二个候选版本,这是有史以来最稳定的 Leaflet 版本!</p>
<p>Leaflet 1.0-rc2 主要是修复错误,有两个明显的例外。完整的修改列表在 <a href="https://github.com/Leaflet/Leaflet/blob/master/CHANGELOG.md#10-rc2-july-18-2016">1.0.0-rc2 更新日志</a> 中,和以往一样。</p>
<h3 id="值得注意的变化">值得注意的变化</h3>
<ul>
<li>
<p>事件重构:由于 <a href="https://github.com/fab1an">@fab1an</a> 的初步工作,在 <a href="https://github.com/perliedman">@perliedman</a> 的协调下,事件被大大优化:它们更快,消耗的内存更少。</p>
</li>
<li>
<p>新的 <code class="language-plaintext highlighter-rouge">L.Tooltip</code> 类:开始是将 Leaflet.Label 插件移植到 Leaflet 核心,然后重新加工,这个新类允许显示附在地图特征上的小工具提示。其 API 与 Leaflet.Label 非常相似(在 <a href="https://github.com/Leaflet/Leaflet.label#upgrade-path-to-ltooltip">选项命名和默认值</a> 中有一些例外),所以从 Leaflet.Label 到 <code class="language-plaintext highlighter-rouge">L.Tooltip</code> 的升级路径应该是直接的,我们鼓励你在将 Leaflet 升级到 1.0 时这样做。</p>
</li>
</ul>
<p><img src="/docs/images/2016-07-18-tooltip.png" alt="L.Tooltip" /></p>
<p>更多内容见 <a href="https://github.com/Leaflet/Leaflet/blob/master/CHANGELOG.md#10-rc2-july-18-2016">1.0.0-rc2 更新日志</a> 。</p>
<h2 id="100--最终版还剩下什么">1.0.0 —— 最终版还剩下什么?</h2>
<p>Leaflet 团队对从 rc1 到 rc2 的进展非常满意,但不是所有的功能都得到了解决。</p>
<p>值得注意的是,使用苹果魔力鼠标的滚动变焦被证明是非常棘手的调试(特别是由于不是所有的团队成员都能得到一个)。当用这种特殊的设备进行滚动缩放时,获得良好的体验曾计划在 rc2 中实现,但最终被推到了 1.0.0 —— final。</p>
<p>虽然没有大的功能计划,但有一些但 <a href="https://github.com/Leaflet/Leaflet/milestone/21">调皮和棘手的 bug 被留下</a> —— 如子像素偏移,CSS 欺骗,变焦振动。</p>
<h3 id="leafdays">Leafdays</h3>
<p>核心团队分布在欧洲各地,我们不时地进行所谓的 “Leafdays”,在一整天的时间里一起远程工作。这里是一个与 <a href="https://github.com/perliedman">@perliedman</a> 屏幕共享的调试会话:</p>
<p><img src="/docs/images/2016-07-18-remote-session.png" alt="远程会议" /></p>
<p>下一次面对面的会议将在 8 月波恩的 <a href="http://2016.foss4g.org/">FOSS4G</a> 期间举行,我们希望在那里见到你。这将是最后一次 1.0 发布会议吗?</p>
<h3 id="获取候选版本">获取候选版本</h3>
<p>与以前的版本一样,你可以使用 CDN:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code><link rel="stylesheet" href="https://unpkg.com/leaflet@1.0.0-rc.2/dist/leaflet.css" />
<script src="https://unpkg.com/leaflet@1.0.0-rc.2/dist/leaflet.js"></script>
</code></pre></div></div>
<p>一个非简化版本的 javascript 文件也可以在以下网址找到:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code><script src="https://unpkg.com/leaflet@1.0.0-rc.2/dist/leaflet-src.js"></script>
</code></pre></div></div>
<p>该版本也可以通过 NPM ( <code class="language-plaintext highlighter-rouge">npm install leaflet@rc</code> )、<a href="https://github.com/Leaflet/Leaflet/archive/v1.0.0-rc.2.zip">GitHub 下载</a> 和 <a href="http://cdn.leafletjs.com/leaflet/v1.0.0-rc.2/leaflet.zip">CDN 下载</a> 获得。我们不鼓励使用 Bower 。</p>
<p>使用它,享受它,并请报告任何 <a href="https://github.com/Leaflet/Leaflet/issues">issue</a> 。以帮助准备最终的 Leaflet 1.0 版本!</p>
<p>Best,</p>
<p>The “Leafteam”</p>
发布 Leaflet 1.0-rc1
2016-04-18T00:00:00+08:00
https://leafletjs.com/2016/04/18/leaflet-1.0-rc1
<p>通往 Leaflet 1.0 的道路仍在继续 —— 我们很自豪地将 1.0 的第一个候选发布版放到了野外。</p>
<p>Leaflet 1.0-rc1 关闭了 beta2 中存在的边缘案例和 API 不一致的问题。完整的修改列表在 <a href="https://github.com/Leaflet/Leaflet/blob/master/CHANGELOG.md#10-rc1-april-18-2016">1.0.0-rc1 更新日志</a> ,像往常一样,有大约 50 个 bug 修复和十几个改进和小的 API 修改。</p>
<h3 id="值得注意的变化">值得注意的变化</h3>
<ul>
<li>
<p>小数点的缩放控制。在 beta2 中,开发者只能通过代码来设置小数点的缩放级别,例如,运行 <code class="language-plaintext highlighter-rouge">map.setZoom(8.5)</code> 。现在,地图有了选项( <code class="language-plaintext highlighter-rouge">zoomSnap</code> 和 <code class="language-plaintext highlighter-rouge">zoomDelta</code> ),可以让用户在小数点的缩放级别中导航。</p>
</li>
<li>
<p>在使用 <code class="language-plaintext highlighter-rouge"><canvas></code> 渲染器时,当图层为非交互式且线条为虚线时,更好地处理矢量图层。</p>
</li>
<li>
<p>史上第一个微软 Edge 黑客(处理 Win10 触摸屏上不一致的 <code class="language-plaintext highlighter-rouge">dblclick</code> 行为)。</p>
</li>
<li>
<p>使用 <code class="language-plaintext highlighter-rouge">prosthetic-hand</code> 进行单元测试,让我们确信触摸交互的行为是一致的。这有其 <a href="https://leafletjs.com/2016/03/20/debugging-touch-interactions.html">自己的博文</a> 。</p>
</li>
</ul>
<h3 id="api-文档中的变化">API 文档中的变化</h3>
<p>API 文档现在是由 docstrings 生成的,这要感谢一个被称为 <a href="https://github.com/Leaflet/Leafdoc">🍂doc</a> (或 “leafdoc”)的新工具。</p>
<p>以前,API 文档是手动编辑的。这涉及到大量的复制粘贴,随着时间的推移,一些代码开始与文档不一致。</p>
<p>大多数复杂的软件项目都使用某种形式的 <a href="https://en.wikipedia.org/wiki/Docstring">docstrings</a> 和 <a href="https://en.wikipedia.org/wiki/Javadoc">JavaDoc</a>、<a href="http://www.naturaldocs.org/">NaturalDocs</a> 或 <a href="http://usejsdoc.org/">JSdoc</a> 等工具来将 docstrings 转换成网页。</p>
<p>但是 Leaflet 的文档需要一些特殊的位子 —— docstrings 涵盖了方法和属性,但它们不包括选项和事件,而且我们想保持文档的现有外观和感觉。于是,🍂doc诞生了,以克服这些限制。</p>
<p>Leaflet 相当广泛地使用类的继承,而旧的文档有时对此并不清楚。一些用户很难找到一些类的可用方法,而且继承的选项有时被提及,有时没有。🍂doc 解决了这个问题,它包括所有继承的方法、选项、事件、属性的文档,默认情况下是折叠的:</p>
<p><img src="/docs/images/2016-04-18-inheritances.gif" alt="L.Polygon的折叠式继承权" /></p>
<p><a href="https://github.com/Leaflet/Leaflet/blob/master/CONTRIBUTING.md#setting-up-the-build-system">build system</a> 现在会在最小化的 <code class="language-plaintext highlighter-rouge">leaflet.js</code> 文件旁边建立一个包含 API 文档的 HTML 文件。文档将在每个版本中基于该文件进行更新,对 <code class="language-plaintext highlighter-rouge">gh-pages</code> 分支的修复文档的拉动请求将被自动拒绝。</p>
<h3 id="获取候选版本">获取候选版本</h3>
<p>与以前的版本一样,你可以使用 CDN:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code><link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet/v1.0.0-rc.1/leaflet.css" />
<script src="http://cdn.leafletjs.com/leaflet/v1.0.0-rc.1/leaflet.js"></script>
</code></pre></div></div>
<p>一个非简化版本的 javascript 文件也可以在以下网址找到:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code><script src="http://cdn.leafletjs.com/leaflet/v1.0.0-rc.1/leaflet-src.js"></script>
</code></pre></div></div>
<p>该版本也可以通过 NPM ( <code class="language-plaintext highlighter-rouge">npm install leaflet@rc</code> )、<a href="https://github.com/Leaflet/Leaflet/archive/v1.0.0-rc.1.zip">GitHub 下载</a> 和 <a href="http://cdn.leafletjs.com/leaflet/v1.0.0-rc.1/leaflet.zip">CDN 下载</a> 获得。我们不鼓励使用 Bower 。</p>
<h3 id="团队亲临现场">团队亲临现场</h3>
<p>当大多数 Leaflet 团队在马德里举行周末会议,修复错误,讨论架构决策,以及一些大的功能是否应该进入 1.0 版本或被推迟时,这个候选版本就向前跃进了。</p>
<table class="image">
<caption align="bottom"><small>This photograph <em>might</em> have been digitally altered to include somebody who couldn't come to Madrid that weekend.</small></caption>
<tr><td style="text-align:center"><img src="/docs/images/2016-04-18-madrid-leaflet-864px.jpg" alt="The Leaflet team in Madrid" /></td></tr>
</table>
<table class="image">
<caption align="bottom"><small>Iván and Yohan want to extend a special thanks to the roll of toilet paper.</small></caption>
<tr><td style="text-align:center"><img src="/docs/images/2016-04-18-leaflet-toilet-paper.jpeg" alt="The Leaflet team in Madrid" width="864" /></td></tr>
</table>
<p>我们很喜欢亲自见面,一起打虫子。这被证明是一件非常有成效的事情,因为那天有大约 20 个问题被解决了。希望另一次面对面的会议将很快发生,并发布另一个版本!</p>
<p>我们希望你喜欢 Leaflet 1.0-rc1,就像我们编写它时一样!</p>
<p>Best,
Iván & Vladimir & Yohan & Per & Zsolt.</p>
调试触控的交互
2016-03-20T00:00:00+08:00
https://leafletjs.com/2016/03/20/debugging-touch-interactions
<p>大多数时候,修复 Leaflet 代码中的错误是很容易的。代码很简单,容易阅读(大部分情况下),结构良好。代码惯例和单元测试使新人很容易尝试对核心代码进行一些修改。在过去的几个月里,我们向 <a href="https://yourfirstpr.github.io/">Your First PR</a> 的朋友们发送了一些简单的错误报告——我们喜欢看到第一次来的人对 Leaflet 的修复做出贡献!</p>
<p>维护、开发像 Leaflet 这样的 javascript 库的一些困难是要确保所有东西都能在每一个主要的浏览器上运行。一个在 Ubuntu 桌面上的 Firefox 上运行的技术,在 Macbook 上的 Safari 上可能会出现故障;一个在 Windows 10 上的 Edge 上运行的技术,在 Android 上的 Chrome 上可能会完全失效。</p>
<p>幸运的是,通过查看代码中的 <a href="https://github.com/search?q=Browser+repo%3ALeaflet%2FLeaflet+language%3AJavaScript+extension%3Ajs+path%3A%2Fsrc&ref=searchresults&type=Code&utf8=%E2%9C%93">对 <code class="language-plaintext highlighter-rouge">L.Browser</code> 的引用</a> ,可以轻易看到 Leaflet 中所有的浏览器专用黑客。</p>
<p>这有时会导致一些 <a href="https://github.com/Leaflet/Leaflet/blob/master/src/dom/DomEvent.DoubleTap.js#L65">不理想的代码</a>:</p>
<pre><code class="javascript"> // 在一些平台上(特别是 win10 上的 chrome + 触摸屏 + 鼠标),
// 浏览器不会触发 touchend / pointerup 事件,但会触发
// 原生的双击。见 #4127 。
if (!L.Browser.edge) {
obj.addEventListener('dblclick', handler, false);
}
</code></pre>
<p>浏览器开发者不止一次告诉我,浏览器嗅探是错误的,而特征检测是正确的。我的意思是,检测 3D CSS 变换和 HTML5 <code class="language-plaintext highlighter-rouge"><video></code> 支持很容易,但没有(理智的)方法来检测浏览器在双击触摸屏时是否自己发射了 <code class="language-plaintext highlighter-rouge">dblclick</code> 事件。</p>
<p>调试触摸交互特别棘手。有时重现一个触摸交互错误的条件很简单(在同一位置双击触摸屏),但有时却更具体。在 <a href="https://github.com/Leaflet/Leaflet/issues/3798">#3798</a> 和 <a href="https://github.com/Leaflet/Leaflet/issues/3814">#3814</a> 中,条件是”用一个手指拖动,然后放下另一个手指并捏住”,而在 <a href="https://github.com/Leaflet/Leaflet/issues/3530">#3530</a> 中是 “捏住直到达到 <code class="language-plaintext highlighter-rouge">maxZoom</code>,然后做双指拖动”。</p>
<p>这种 bug 的问题在于,它们在受控条件下的重现是<strong>令人沮丧的</strong>,而且是<strong>耗时的</strong>。想象一下,当你有一个代码编辑器和一个浏览器调试器的时候,同时用两只手在看调试器的时候做一个非常特殊的触摸手势。然后你想在调试器中检查一个变量,但你不能移动你的手指,哪怕是一个像素,因为那会运行更多的代码并改变状态。</p>
<p>然后,在过去的一个小时里,第五次,摇晃的手机充电器连接器再次摇晃,调试器断开连接,你不得不重新开始。</p>
<table class="image">
<!-- <caption align="bottom"><small></small></caption> -->
<tr><td style="text-align:center"><img src="https://i.chzbgr.com/full/4896152320/h3FAAE99E/" alt="rage quit" /></td></tr>
</table>
<p>如果我有一两只多余的手,调试触摸互动就会简单得多,但生物技术离让我多长出一只手还很遥远。</p>
<p>幸运的是,我们可以利用 <a href="https://developer.mozilla.org/docs/Web/API/EventTarget/dispatchEvent">向浏览器调度自定义事件</a> 。通常,当我们使用鼠标(或触摸板,或触摸屏,或数字板)时,网络浏览器会产生一个 <a href="https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent"><code class="language-plaintext highlighter-rouge">MouseEvent</code></a> (或 <a href="https://developer.mozilla.org/docs/Web/API/TouchEvent"><code class="language-plaintext highlighter-rouge">TouchEvent</code></a> 或 <a href="https://developer.mozilla.org/docs/Web/API/PointerEvent"><code class="language-plaintext highlighter-rouge">PointerEvent</code></a> 。但是,我们的 javascript 程序员可以创建一个合成的(即假的)事件,然后把它扔给浏览器,这样它就可以把它派发给任何正在监听事件的代码。</p>
<p>不幸的是,创建和分配这些事件是很麻烦的。一个触摸手势至少需要 4 到 8 个事件,以特定的顺序、特定的数据和特定的时间进行。已经有一些人尝试将其自动化(我能找到的最好的是 <a href="https://github.com/hammerjs/simulator">hammer.js simulator</a> ,但没有好的方法来模拟复杂的自定义触摸手势。</p>
<p>直到现在。</p>
<p>我很自豪地介绍 <a href="https://github.com/Leaflet/prosthetic-hand"><strong>假手</strong></a> ,以满足你所有需要多出一只手的 javascript 调试需要。</p>
<p>用假手,我现在可以在 Leaflet 网页上自动进行捏合缩放的手势了:</p>
<table class="image">
<caption align="bottom"><small>You get to see my disembodied fingers as a bonus</small></caption>
<tr><td style="text-align:center"><img src="/docs/images/2016-03-20-prosthetic-hand-zooming.gif" alt="Animated screenshot of prosthetic-hand zooming in and out" /></td></tr>
</table>
<p>装上这个库后,只需要求一个额外的手(有特定的计时模式)即可:</p>
<pre><code class="javascript">var h = new Hand({ timing: 'frame' });
</code></pre>
<p>然后长出一些手指:</p>
<pre><code class="javascript">var f1 = h.growFinger('touch');
var f2 = h.growFinger('touch');
</code></pre>
<p>然后移动手指(使用像素坐标和毫秒):</p>
<pre><code class="javascript">f1.wait(100).moveTo(250, 200, 0)
.down().wait(500).moveBy(-200, 0, 1000).wait(500).up().wait(500)
.down().wait(500).moveBy( 200, 0, 1000).wait(500).up().wait(500);
f2.wait(100).moveTo(350, 200, 0)
.down().wait(500).moveBy( 200, 0, 1000).wait(500).up().wait(500)
.down().wait(500).moveBy(-200, 0, 1000).wait(500).up().wait(500);
</code></pre>
<p>你可以在 <a href="https://leaflet.github.io/prosthetic-hand/demos/">现场假手演示</a> 中查看这一点。</p>
<p>义肢库并不完美,有些类型的事件只在某些浏览器中起作用,但它可以帮助以可重复的方式触发鼠标、触摸、指针事件,并可调整时间,使开发人员能够在调试器中保持双手。计时模式允许对触发的事件进行细化控制,允许为同样的手势运行更少的代码迭代,这反过来意味着更简单、更好地理解正在发生的事情。</p>
<hr />
<p>有一句名言(经常 <a href="http://quoteinvestigator.com/2014/03/29/sharp-axe/">误认为是亚伯拉罕-林肯</a> 说:</p>
<blockquote>A woodsman was once asked, "What would you do if you had just five minutes to chop down a tree?" He answered, "I would spend the first two and a half minutes sharpening my axe."</blockquote>
<p>网络开发也不例外——拥有正确的工具将使你的任务变得更加容易。</p>
<p>这不仅仅是一个时间问题。也许从头开始写一个工具是很耗时的,但最好的收获是,调试<strong>不再令人沮丧</strong>。以前,它是 “在触摸屏上用一只手,仔细看调试器,不要使用断点,因为你的手不够用”。现在是 “改变假手事件的时间,设置断点,<strong>轰</strong>“。</p>
<p>而更棒的是,拥有一个自动化工具意味着 Leaflet 现在有了 <a href="https://github.com/Leaflet/Leaflet/blob/master/spec/suites/map/handler/Map.TouchZoomSpec.js"><strong>触摸交互的单元测试</strong></a> 。PhantomJS 无头网页浏览器可以理解义肢产生的 <code class="language-plaintext highlighter-rouge">TouchEvent</code>s,并可以检查地图在执行该手势时是否有预期的行为。</p>
<p>通过自动化的触摸测试,我们在 Leaflet 中节省的时间和麻烦将是巨大的。我们只能希望更多的项目能从类似的自动化测试中受益。</p>
<hr />
<p>不要只写开源代码。为每个人制作更好的工具。</p>
<p>Yours,
Iván</p>
发布 Leaflet 1.0 第二个测试版
2015-10-14T00:00:00+08:00
https://leafletjs.com/2015/10/14/leaflet-1.0-beta2-released
<p>自从几个月前 1.0.0-beta1 发布以来,Leaflet 团队一直忙于修复 beta1 用户报告的 bug,另外还有一些以前被忽略的 API 的小改动。你可以在 <a href="https://github.com/Leaflet/Leaflet/blob/master/CHANGELOG.md#10-beta2-october-14-2015">1.0.0-beta2 更新日志</a> 中找到完整的修复和变化清单。</p>
<h3 id="获取新版本">获取新版本</h3>
<p>与以前的版本一样,你可以使用我们的 CDN:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code><link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet/v1.0.0-beta.2/leaflet.css" />
<script src="http://cdn.leafletjs.com/leaflet/v1.0.0-beta.2/leaflet.js"></script>
</code></pre></div></div>
<p>该版本也可以通过 NPM ( <code class="language-plaintext highlighter-rouge">npm install leaflet@beta</code> )、 Bower 和 <a href="https://github.com/Leaflet/Leaflet/archive/v1.0.0-beta.2.zip">GitHub 下载</a> 获得。</p>
<p>1.0 的 API 参考资料仍然是暂时的 <a href="http://mourner.github.io/Leaflet/reference.html">可在此获得</a> 。</p>
<h3 id="未来">未来</h3>
<p>不过,工作还没有完成。可能会有一个 beta3 ,对瓷砖加载算法的错误进行修复,对小数点缩放的 API 方法和文档的改进,以及其他待定项目。</p>
<p>我们希望已经修复了前一个测试版中最有问题的 bug ,但也许还有一个我们没有注意到的 bug 。我们鼓励 1.0.0-beta1 的用户升级到 beta2 并继续报告问题。</p>
<p>帮助我们帮助你,花一分钟时间学习 <a href="http://www.chiark.greenend.org.uk/~sgtatham/bugs.html">如何写一个好的 bug 报告</a> ,并检查一个 <a href="https://github.com/Leaflet/Leaflet/issues">类似的问题</a> 是否已经被报告。甚至更好的是,如果你可以的话,潜入 Leaflet 的代码中去!</p>
<p>最后但并非最不重要的是,非常感谢使用 Leaflet 的所有人。继续创造伟大的地图!</p>
<p><strong>给插件开发者的提示</strong>:我们鼓励你升级你的插件,使之与最新的测试版兼容。在这一点上,1.0 的 API 是相当稳定的,许多用户已经开始在生产中使用测试版。此外,随着 1.0 最终版本的临近,我们希望对获得 <a href="https://leafletjs.com/plugins.html">官方列表</a> 的插件的质量更加认真,确保它们得到维护并与最近的 Leaflet 版本兼容。</p>
<p>Best,
Iván & Vladimir & Yohan.</p>
Leaflet 0.7.5 发布
2015-09-01T00:00:00+08:00
https://leafletjs.com/2015/09/01/leaflet-0.7.4-released
<p>当 Leaflet 开发团队正忙于 1.0 的测试时,有几个 bug 影响到了 0.7.3 ,重要到足以花费一些精力来移植一个修复。不过,它们并不多:</p>
<ul>
<li>解决由新浏览器衍生出来的问题(可触摸的浏览器,在最近的Chrome 中加载瓷砖)的方法</li>
<li>对基于画布的矢量图层的样式和事件进行了回传修复</li>
<li>修复涉及瓦片层和弹出事件的 <code class="language-plaintext highlighter-rouge">maxZoom</code>、<code class="language-plaintext highlighter-rouge">minZoom</code>、<code class="language-plaintext highlighter-rouge">maxNativeZoom</code> 的边缘案例</li>
<li>修正 0.7.4 中的一个回归错误,该错误与标记群发生冲突</li>
</ul>
<p>详细的变化清单可以在 <a href="https://github.com/Leaflet/Leaflet/blob/master/CHANGELOG.md#074-sep-01-2015">更新日志</a> 中找到</p>
<p>距离上一次稳定发布已经超过<em>一年半</em>,这应该是 Leaflet API 质量和稳定性的一个证明。如果你认为 Leaflet 1.0 的开发花了很长时间,请记住,我们希望在最终的 1.0 版本中保持同样的质量水平。</p>
<p>0.7.x 版本将不会实现新的功能。请继续关注更多关于 1.0 测试版的消息!</p>
<h3 id="获取最新信息">获取最新信息</h3>
<p>建议使用 Leaflet 0.7.3 的开发者升级到 0.7.5 以防止现代浏览器产生的问题。</p>
<p>该版本也可以通过 NPM、Bower、<a href="http://cdn.leafletjs.com/downloads/leaflet-0.7.5.zip">直接下载</a> ,或通过我们的 CDN 获得:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code><link rel="stylesheet" href="cdn.leafletjs.com/leaflet-0.7.5/leaflet.css" />
<script src="http://cdn.leafletjs.com/leaflet-0.7.5/leaflet.js"></script>
</code></pre></div></div>
发布 Leaflet 1.0 第一个测试版
2015-07-15T00:00:00+08:00
https://leafletjs.com/2015/07/15/leaflet-1.0-beta1-released
<p>在过去的一年里,我们开始了一项雄心勃勃的探索,以实现 Leaflet 用户多年来一直要求的几乎所有功能,同时高度关注性能、代码清理和稳定 API。这是一条极富挑战性的道路,有很多坎坷,但现在我们终于接近了终点线。</p>
<p>今天,我很高兴并自豪地宣布 Leaflet 1.0 beta 1 的发布,这是我们经过一年多的工作和 36 位贡献者的一千次提交后的第一次正式发布。</p>
<h3 id="最新动态">最新动态</h3>
<p>1.0 将是有史以来最好的 Leaflet 版本,带来了大量的改进和错误修复。该版本的亮点包括:</p>
<ul>
<li>巨大的性能改进,特别是对矢量图层而言</li>
<li>飞越动画(用 <code class="language-plaintext highlighter-rouge">map.flyTo</code> 在一个曲线上缩放和平移)。</li>
<li>支持小数点缩放级别( <code class="language-plaintext highlighter-rouge">map.setZoom(12.34)</code> )。</li>
<li>更漂亮的瓷砖加载,更少的闪动</li>
<li>自定义窗格管理(包括多个矢量层窗格)</li>
<li>更好地支持非标准推算</li>
<li>更多无障碍功能</li>
<li>大量的错误修复和稳定性改进</li>
</ul>
<p>更详细的变化列表可以在 <a href="https://github.com/Leaflet/Leaflet/blob/master/CHANGELOG.md">更新日志</a> 中找到(请注意,这是一个很长的阅读内容)。</p>
<p><img src="https://camo.githubusercontent.com/07c492b230f1a3762118eaf457f0cc182fb0a98d/68747470733a2f2f662e636c6f75642e6769746875622e636f6d2f6173736574732f32353339352f313936353934392f32613934343166342d383263312d313165332d393836372d6230343033663266643966372e676966" alt="" /></p>
<h3 id="测试周期和升级">测试周期和升级</h3>
<p>该版本对 API 进行了一些细微的修改,一些插件将不得不进行更新。为了使升级不那么痛苦,我们在最终的 1.0 版本之前做了一个简短的测试周期,以使用户和插件开发人员能够赶上这些变化,同时我们发现并修复剩余的问题。</p>
<p>自从上次稳定版发布以来,我们在重构方面投入了大量的精力。我们所做的许多改变对用户来说是不可见的,但却使源代码更简单,更容易理解,同时也为我们优秀的插件开发者社区带来了许多新的可能性。基本上,一半的 Leaflet 代码被完全重写了,现在代码库已经为一些相当极端的扩展做好了准备(谁刚刚说了”旋转”和 “WebGL”?)。</p>
<p>我们计划在发布前写一份全面的 1.0 升级指南。同时,如果你升级到 1.0-beta 后有什么问题,请查看更新日志。如果你找不到相应的破坏性变化,请在 GitHub 上提交问题。</p>
<p>1.0 的 API 参考资料暂时 <a href="http://mourner.github.io/Leaflet/reference.html">可在此获得</a> 。它是由 Leaflet <code class="language-plaintext highlighter-rouge">gh-pages-master</code> 分支构建的,欢迎修改和补充!</p>
<h3 id="获取新版本">获取新版本</h3>
<p>在您的应用程序上测试新版本,并帮助我们抓住剩余的问题,使最终的 1.0 版本接近完美!</p>
<p>你可以使用我们的CDN:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code><link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-1.0.0-b1/leaflet.css" />
<script src="http://cdn.leafletjs.com/leaflet-1.0.0-b1/leaflet.js"></script>
</code></pre></div></div>
<p>该版本也可以通过 NPM、Bower 和 <a href="https://github.com/Leaflet/Leaflet/archive/v1.0.0-beta.1.zip">GitHub 下载</a> 获得。</p>
<h3 id="谢谢你">谢谢你</h3>
<p>我非常感谢每一个使这个版本成为可能的人 — 通过使用这个库,传播关于它的消息,报告问题和发送你的贡献。你的帮助是无价的!</p>
<p>特别感谢 <a href="https://github.com/IvanSanchez">Ivan Sánchez</a> 、<a href="https://github.com/yohanboniface">Yohan Boniface</a> 、<a href="https://github.com/jfirebaugh">John Firebaugh</a> 、<a href="https://github.com/danzel">Dave Leaver</a> 、<a href="https://github.com/patrickarlt">Patrick Arlt</a> 、<a href="https://github.com/perliedman">Per Liedman</a> 、 <a href="https://github.com/Jakobud">Jake Wilson</a> 和 <a href="https://github.com/snkashis">Steve Kashishian</a> 在去年做出了很多惊人的贡献和支持。所有这些人现在都是 Leaflet 核心团队的一员。让他们继续努力吧!</p>
<p><img src="https://www.reactiongifs.com/r/msy.gif" alt="" /></p>
<p>Love,<br />
Vladimir.</p>
Leaflet 持续活跃,敬请关注 1.0!
2015-07-01T00:00:00+08:00
https://leafletjs.com/2015/07/01/leaflet-is-alive-and-kicking
<p>我知道这个博客已经很久没有更新了 — 实际上是 1.5 年了。但这只是因为我是一个懒惰的博主,在这段时间里,尽管缺乏博文和重要的发布,Leaflet 还是发生了很多事情。</p>
<p>我们即将发布 Leaflet 1.0 — 这是有史以来最大、最棒的 Leaflet 版本。最新的稳定版本,0.7.3 ,已经很完美了,所以你不会相信我们在即将发布的版本中打包了多少很棒的东西 — 914 次提交!但我要把这个问题留到我们解决了 <a href="https://github.com/Leaflet/Leaflet/pull/3307">最后一个问题</a> 后,再单独发表 <code class="language-plaintext highlighter-rouge">1.0-beta1</code> 博文。</p>
<p>同时,我很高兴向你介绍重新设计的新的 <a href="https://leafletjs.com/">Leaflet 网站</a> !现在终于实现了移动友好,简单,干净,简约和现代,就像图书馆本身。同时注意到在 <a href="/reference.html">文档</a> 和 <a href="/plugins.html">插件</a> 页面向下滚动时的浮动菜单,这是一个被强烈要求的功能,将使导航更加容易。非常感谢 <a href="https://github.com/rowanhogan">Rowan Hogan</a> 对新设计的帮助!</p>
<p>P.S. 我最近为 <a href="http://www.geospatialworldforum.org/">地理空间世界论坛</a> 制作了一个 13 分钟的古怪视频,分享 Leaflet 背后的有趣故事以及它如何成为今天的样子。请观看并与你的地理朋友们分享,这样我们就能让 GIS 世界再次变得有趣起来!</p>
<p>Love,<br />
Vladimir.</p>
<iframe width="640" height="480" src="https://www.youtube.com/embed/NLbyHffKQuU" frameborder="0" allowfullscreen=""></iframe>
Leaflet 0.7 发布, MapBox and 未来的计划
2013-11-18T00:00:00+08:00
https://leafletjs.com/2013/11/18/leaflet-0-7-released-plans-for-future
<p>Leaflet 0.7 发布 — 支持 IE11 的触摸功能,提高了瓷砖的比例,并有大量的其他改进和 bug 修复! 同时,我已经全职加入了 MapBox 团队…</p>
<p>经过5个月的积极开发和 <a href="https://github.com/Leaflet/Leaflet/graphs/contributors?from=2013-06-27&to=2013-11-18&type=c">很多贡献者的参与</a> ,我很高兴宣布发布 Leaflet 0.7 稳定版。</p>
<p>这是一个重度 bug 修复的版本;随着 Leaflet 在功能上越来越稳定,我们的重点转向稳定性、可用性和 API 改进,而不是新功能。我也一直在推迟一些计划中的深度重构(我将在后面的文章中谈及),直到 0.7 版本发布,这样一来,在发布周期的开始阶段就完成了重度风险的工作,留下了足够的空间来捕捉错误和不兼容的变化,从而无意中破坏现有的应用程序。</p>
<h3 id="加入-mapbox">加入 MapBox</h3>
<p>在其他新闻中,我 <a href="https://www.mapbox.com/blog/vladimir-agafonkin-joins-mapbox/">全职加入了MapBox团队</a> 。这让我非常兴奋,因为这是我梦想已久的工作 — <a href="https://www.mapbox.com">MapBox</a> 以其所有令人惊叹的工作永远改变了互动地图的世界,有一些世界上最伟大的地理测绘工程师和设计师一起工作,推动了可能的界限,每天都激励着其他人。</p>
<p>对于 Leaflet 来说,这只能意味着非常好的事情 &mdash;更多的时间用于 Leaflet 的开发,更多的热情,更多的游戏,更多的疯狂的地图实验(比如 <a href="https://www.mapbox.com/blog/dynamic-hill-shading/">这个</a> ,以及很多的学习。我现在是有史以来最快乐的地图专家之一。请继续关注我们的精彩内容。</p>
<h3 id="07-变化">0.7 变化</h3>
<p>你可以查看 <a href="https://github.com/Leaflet/Leaflet/blob/master/CHANGELOG.md#07-dev-master">详细的更新日志</a> 近几个月来为 0.7 所做的工作(大约 90 个改进和错误修正),但我想提及一些亮点:</p>
<ul>
<li>增加了将<strong>瓷砖放大</strong>到更高的缩放级别的能力(例如,当源文件最大为18时,有缩放19-20)。</li>
<li>增加了对<strong>IE11触摸设备</strong>的支持。在开发者预览版和最终的 IE11 版本之间,MS意外地破坏了他们的指针 API 兼容性,我们最终重写了相当多的代码,以使所有的 IE 版本(包括桌面和移动)都能顺利工作,同时也修复了一堆 IE10 的错误。</li>
<li>正式<strong>放弃了对 IE6 的支持</strong>(反正没人在乎),并清理、修正了 IE7-8 的样式。</li>
<li>当包括 Leaflet 时,放弃了对IE条件注释的需要,使代码段更简单 — 所有 IE7 / 8 特有的样式被简化并移至主 <code class="language-plaintext highlighter-rouge">leaflet.css</code> 文件。</li>
<li>修正了一个<strong>不明显的 iOS7 内存泄露</strong>问题,当你试图创建几千个图层(例如用于聚类的标记)时,Safari 会崩溃。我仍然不明白为什么会发生这种情况,但我们设法用一点小技巧来修复它。</li>
<li>修正了一个关键的 <strong>Chrome for Android</strong> 错误,该错误使某些设备上的瓷砖在缩放后消失。</li>
<li>删除了 TileLayer 实现中一些<strong>与地球有关的硬编码</strong>,使 Proj4Leaflet 等插件更容易处理复杂的投影,而不需要可怕的黑客。这个方向的其他工作将在 0.8 中跟进。</li>
<li>在有大量元素的复杂页面上改进了<strong>平移性能</strong> — 我们发现简单的事情,如将不同的光标设置为 <code class="language-plaintext highlighter-rouge">document</code> (用于 “抓取”手),在一些浏览器(尤其是 Chrome )上造成明显的性能打击。</li>
<li><strong>改变了 maxBounds 的工作方式</strong>,不是强制执行它的派生 <code class="language-plaintext highlighter-rouge">minZoom</code> ,而是限制在较低的缩放级别上进行平移,以及一些技巧,使其在平移惯性或偏移缩放等方面发挥得更好。</li>
</ul>
<h3 id="08-版本的计划">0.8 版本的计划</h3>
<p>在重构 Leaflet 的过程中,有几项大的工作我想在发布 0.7 之后立即转入 — 我已经拖得太久了,而且这些工作对插件和基于 Leaflet 的 API 作者非常有利。其中一些已经在进行中了。</p>
<ul>
<li>重构<strong>层</strong>的架构。目前,在不同图层(地图、标记、矢量图层等)的实现中存在大量重复的逻辑,特别是事件处理、缩放动画逻辑、zIndex 和窗格处理(什么出现在什么上面等)。使代码一致,更通用,并在不同的图层之间共享,将使定制图层和制作自己的图层更加容易(例如,整合 d3 等)。</li>
<li>将庞大的 TileLayer 实现拆分为 <strong>GridLayer 和 TileLayer</strong> ,将图像瓦片相关的逻辑和网格逻辑分开,这将使其他类似网格的图层实现(例如 UTFGrid 交互或平铺的 GeoJSON )更加简单。</li>
<li>重构<strong>缩放动画逻辑</strong>,使期待已久的 Easey 风格的动画(点间缩放平移)成为可能。</li>
<li>重构<strong>投影</strong>代码,使其更容易设置平面地图和奇怪的投影,并自定义 Leaflet 处理它们的方式。</li>
<li>重构<strong>矢量图层</strong>代码,使其能够在同一张地图上的不同图层使用不同的渲染后端(Canvas, SVG等),并在它们之间轻松切换。这也将为有趣的扩展打开大门,比如用 <a href="https://github.com/mourner/rbush">RBush</a> 对图层进行索引以实现快速交互功能。</li>
</ul>
<p>虽然这是一个雄心勃勃的计划,而且可能需要超过一个稳定版本,但完成所有这些重构将意味着 Leaflet 正在为 1.0 版本做好准备。</p>
<p>在发布 0.7 之后,我想关注的另一个方向是<strong>网站和文档的改进</strong>。首先,Leaflet 正在乞求<strong>更多的步骤教程</strong>(有更多的高级功能,如自定义图层、自定义控件等),我很想在未来的某个时候做一个文档/教程的冲刺。第二,演示文稿可以大大改进 — 增加一个突出的<strong>视觉展示</strong>或应用程序画廊,通过一些标识和引言/推荐,使 Leaflet 用户更加突出,并更新布局、设计,使其看起来更加时尚、简洁,等等。</p>
<p>希望这能让大家对 Leaflet 在不久的将来的发展有一个很好的了解,如果有任何问题,请在评论中提出 — 我很乐意回答!</p>
<p>像往常一样,在 <a href=".../.../.../download.html">下载页面</a> 上获取新版本的 CDN 链接或下载。请务必在你的应用程序上试用它,并报告任何回归情况,以便我们能够立即修补它们。像往常一样,让我们在 Twitter 上对该版本进行一些漂亮的宣传吧!</p>
<p>感谢所有参与 Leaflet 贡献、bug 报告、邮件列表、Twitter 讨论、制作很棒的应用程序和传播 Leaflet 的人 — 谢谢你们! 你们是有史以来最棒的社区。</p>
<p>Cheers,<br />
Vladimir.</p>
Leaflet 插件开发指南
2013-06-28T00:00:00+08:00
https://leafletjs.com/2013/06/28/leaflet-plugin-authoring-guide
<p>Leaflet 最伟大的地方之一是它强大的插件生态系统。
<a href="https://leafletjs.com/plugins.html">Leaflet 插件页面</a> 列出了几十个很棒的插件,而且每周都会有更多的插件加入。</p>
<p>本指南列出了一些发布符合 Leaflet 本身质量标准的 Leaflet 插件的最佳实践。也可<a href="https://github.com/Leaflet/Leaflet/blob/master/PLUGIN-GUIDE.md">在 repo</a> 。</p>
<h3 id="演示文稿">演示文稿</h3>
<h4 id="存储库">存储库</h4>
<p>把你的 Leaflet 插件放在一个单独的 <a href="http://github.com">GitHub</a> 仓库里是最好的。
如果你创建了一个用于不同用途的插件集合,
不要把它们放在一个版本库里 —
通常情况下,在单个仓库中使用小型、独立的插件会更容易。</p>
<h4 id="演示">演示</h4>
<p>在发布一个插件时,最重要的事情是包括一个演示,展示该插件的功能 —
这通常是人们要找的第一件事。</p>
<p>放置演示的最简单方法是使用 <a href="http://pages.github.com/">GitHub Pages</a> 。
一个好的 <a href="https://help.github.com/articles/creating-project-pages-manually">起点</a> 是在你的 repo 中创建一个 <code class="language-plaintext highlighter-rouge">gh-pages</code> 分支并在其中添加一个 <code class="language-plaintext highlighter-rouge">index.html</code> 页面 —
推送后,它将被发布为 <code class="language-plaintext highlighter-rouge">http://<user>.github.io/<repo></code> 。</p>
<h4 id="阅读手册">阅读手册</h4>
<p>接下来你需要有一个描述性的 <code class="language-plaintext highlighter-rouge">README.md</code> 在 repo 的根部(或一个有类似内容的网站的链接)。
它至少应包含以下项目:</p>
<ul>
<li>插件的名称</li>
<li>简单扼要地描述它的作用</li>
<li>要求
<ul>
<li>Leaflet 版本</li>
<li>其他外部依赖(如果有的话)</li>
<li>浏览器、设备兼容性</li>
</ul>
</li>
<li>演示链接</li>
<li>包括该插件的说明</li>
<li>简单的使用代码示例</li>
<li>API 参考(方法、选项、事件)。</li>
</ul>
<h4 id="许可证">许可证</h4>
<p>每个开放源码库都应该包括一个许可证。
如果你不知道该为你的代码选择什么样的开源许可证。
<a href="http://opensource.org/licenses/MIT">MIT License</a> 和 <a href="http://opensource.org/licenses/BSD-2-Clause">BSD 2-Clause License</a> 都是不错的选择。
你可以把它作为 <code class="language-plaintext highlighter-rouge">LICENSE</code> 文件放在 repo 中,或者直接从 Readme 链接到许可证。</p>
<h3 id="编码">编码</h3>
<h4 id="文件结构">文件结构</h4>
<p>保持文件结构的干净和简单,
不要在一个地方堆积大量的文件 —
让新人在你的 repo 中容易找到自己的方向。</p>
<p>一个简单的插件的原始版本应该是这样的:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>my-plugin.js
README.md
</code></pre></div></div>
<p>一个更复杂的插件的文件结构的例子:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>/src JS source files
/dist minified plugin JS, CSS, images
/spec test files
/examples HTML examples of plugin usage
README.md
LICENSE
package.json
</code></pre></div></div>
<h4 id="代码公约">代码公约</h4>
<p>每个人的口味都不同,但重要的是,无论你为你的插件选择什么惯例,都要保持一致。</p>
<p>要想有一个好的起点,请查看 <a href="https://github.com/airbnb/javascript">Airbnb JavaScript 指南</a> 。
Leaflet 几乎遵循同样的惯例
除了使用智能制表符(硬制表符用于缩进,空格用于对齐)之外
和在 <code class="language-plaintext highlighter-rouge">function</code> 关键词后面加一个空格。</p>
<h4 id="插件-api">插件 API</h4>
<p>不要在你的插件中暴露全局变量。<br />
如果你有一个新的类,直接把它放在 <code class="language-plaintext highlighter-rouge">L</code> 命名空间( <code class="language-plaintext highlighter-rouge">L.MyPlugin</code> )。<br />
如果你继承了一个现有的类,让它成为一个子属性( <code class="language-plaintext highlighter-rouge">L.TileLayer.Banana</code> )。<br />
如果你想给现有的 Leaflet 类添加新方法,你可以这样做。<code class="language-plaintext highlighter-rouge">L.Marker.include({myPlugin: ...})</code> 。</p>
<p>函数、方法和属性名称应使用 <code class="language-plaintext highlighter-rouge">camelCase</code> 。<br />
类名应使用 <code class="language-plaintext highlighter-rouge">大写的 CamelCase</code> 。</p>
<p>如果你的函数中有很多参数,可以考虑接受一个选项对象来代替(尽可能放上默认值,这样用户就不需要指定所有的参数):</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>// bad
marker.myPlugin('bla', 'foo', null, {}, 5, 0);
// good
marker.myPlugin('bla', {
optionOne: 'foo',
optionThree: 5
});
</code></pre></div></div>
<p>而最重要的是,保持简单。Leaflet 是关于<em>简单的</em>。</p>
<p>Cheers,<br />
Vladimir.</p>
Leaflet 0.6 发布, 在 DC 中使用 MapBox
2013-06-26T00:00:00+08:00
https://leafletjs.com/2013/06/26/leaflet-0-6-released-dc-code-sprint-mapbox
<p>Leaflet 0.6 发布了 — 有更好的控制,更好的可用性和大量的 API 改进和各种 bug 修复 — 超过 120 个变化! 第一届 Leaflet 代码冲刺活动在华盛顿特区与 MapBox 团队一起举行…</p>
<p>自上一个主要版本以来,经过5个月的积极开发,<a href="https://github.com/Leaflet/Leaflet/graphs/contributors?from=2013-01-18&to=2013-06-26&type=c">36 位贡献者参与</a> ,今天我很高兴地宣布<strong>发布 Leaflet 0.6</strong> 稳定版。</p>
<p>0.6 的亮点包括更漂亮的控件,大量的交互可用性改进,许多新的 API 方法、事件和选项,能够将图层保存为 <a href="http://en.wikipedia.org/wiki/GeoJSON">GeoJSON</a> ,更好的测试基础设施和大量的错误修正,使 Leaflet 明显更可靠。请看巨大的详细变化列表(120多个!) <a href="https://github.com/Leaflet/Leaflet/blob/master/CHANGELOG.md">在变化日志</a> 。<a href=".../.../.../reference.html">API 参考</a> 也被更新以反映所有这些变化。</p>
<p>发布的最后冲刺(最后 2 天)是首次 Leaflet 代码冲刺的一部分,由了不起的 <a href="http://mapbox.com">MapBox</a> 在华盛顿特区组织,该公司负责近年来地理空间世界中最伟大的创新和最棒的工具,现在也 <a href="mapbox.com/blog/mapbox-js-with-leaflet/">在其 JS API 中使用 Leaflet</a> 。这次冲刺将持续一周,在接下来的日子里,还有很多更棒的改进(也有很多聚会)。</p>
<p>与此相关的是,甚至 GitHub 本身现在也在 <a href="https://github.com/blog/1541-geojson-rendering-improvements">使用 Leaflet 进行 GeoJSON 可视化</a> ,以及 <a href="github.com/Leaflet/Leaflet.markercluster">Leaflet.markercluster</a> 和 MapBox 瓷砖! 这有多酷啊?</p>
<p>特别感谢 <a href="http://universalmind.com/">Universal Mind</a> ,我令人敬畏的雇主和过去 5 个月 Leaflet 开发的赞助商,感谢最活跃的贡献者 — <a href="https://github.com/jfirebaugh">MapBox</a> 的 <a href="https://github.com/jfirebaugh">John Firebaugh</a> 和 <a href="https://github.com/tmcw">Tom MacWright</a> , <a href="https://github.com/danzel">Dave Leaver</a> 和 <a href="http://www.smartrak.co.nz/">Smartrak</a> 的 <a href="https://github.com/jacobtoye">Jacob Toye</a> ,<a href="http://www.firstmilegeo.com/">First Mile Geo</a> 的 <a href="https://github.com/snkashis">Steve Kashishian</a> ,以及其他参与贡献、错误报告、邮件列表、Twitter、制作很棒的应用等的人。你们是这样一个了不起的社区! 我真的很高兴能成为其中的一员。</p>
<p>像往常一样,在 <a href="./././download.html">下载页面</a> 上抓取新版本的 CDN 链接或下载。尽情享受吧! 请务必试用,并报告你的应用程序中的任何退步情况,以便我们能够立即修补它们。</p>
<p><strong>更新</strong> (6月27日):0.6.1 的热修复版发布,修复了几个退步(特别是 FF 滚动缩放太快的问题)。<br />
<strong>更新</strong> (6月28日):0.6.2 热修复版发布,又修复了几个小问题。<br />
<strong>更新</strong> (7月17日):0.6.3 版本发布,修正了很多退步和错误。<br />
<strong>更新</strong> (7月25日):0.6.4 版本发布,修复了 0.6.3 版本的退步。</p>
<p>P.S. 在接下来的几天里,每个在推特上、贴出关于新的 Leaflet 发行或他为什么喜欢 Leaflet 的人都会得到超过 9000 分的业力提升。这是我昨天在乔治敦从一个路过的和尚那里听到的,真实的故事!</p>
<p>Cheers,<br />
Vladimir, Leaflet creator and maintainer.</p>
Leaflet.draw 0.2 发布
2013-02-20T00:00:00+08:00
https://leafletjs.com/2013/02/20/guest-post-draw
<p>这是 Jacob Toye的客座文章,他是 Leaflet 的活跃贡献者,同时也是目前最复杂的矢量绘图和编辑插件的作者,在这篇文章中介绍了这个插件。</p>
<p><a href="https://github.com/Leaflet/Leaflet.draw/">Leaflet.draw</a> 诞生于为用户提供在地图上绘制多边形的能力的需要。Leaflet 已经提供了一个非常好的方法来编辑现有的折线和多边形。合乎逻辑的下一步是在这个功能上进行扩展,以允许创建这些图层,并最终创建其他的矢量图层。</p>
<p>一经发布,Leaflet 社区的直接反应是非常积极的。很明显,下一步将是把这个工具发展到用户除了创建形状之外还可以编辑和删除形状的状态。这就是 Leaflet.draw 0.2 最终要做的事情。</p>
<p>经过几个月的断断续续的开发,在我的雇主 <a href="http://www.smartrak.co.nz" title="GPS车队管理解决方案" target="_blank">Smartrak</a> 的赞助下,我们隆重推出 Leaflet.draw 0.2 ———— 你在 Leaflet 地图上绘制、编辑和删除矢量和标记的一站式插件。:)</p>
<p>来自 Vladimir 的注意:Leaflet 核心的多线、多边形编辑功能已经被移到这个插件中,在那里它更适合。该插件又被移到了 <a href="https://github.com/Leaflet">GitHub 上的 Leaflet 组织</a> ,现在已被 Leaflet 开发团队正式支持。请注意,0.2 版目前依赖于 Leaflet master(正在开发的版本)来工作。</p>
<p>您可以从 <a href="https://github.com/Leaflet/Leaflet.draw/" target="_blank">github repo</a> 下载最新版本。请在 <a href="https://github.com/Leaflet/Leaflet.draw/issues" target="_blank">问题页面</a> 上报告您遇到的任何错误。</p>
<div id="map" class="map" style="height: 288px"></div>
<h3 id="plugin-features">特点</h3>
<p>Leaflet.draw 的设计不仅便于终端用户使用,而且也便于开发者整合。</p>
<ul>
<li>用易于使用的绘图工具在地图上绘制形状。</li>
<li>编辑和删除矢量和标记。</li>
<li>超级可定制:
<ul>
<li>自定义每个形状的风格,以适应你的地图主题。</li>
<li>挑选你想使用的工具。</li>
<li>只需使用绘图和编辑处理程序,就可以推出你自己的。</li>
</ul>
</li>
<li>基于事件的系统允许你在形状被创建、编辑或删除时执行任何必要的行动。</li>
</ul>
<h3 id="如何使用">如何使用</h3>
<p>Leaflet.draw 非常简单,可以放入你的 Leaflet 应用程序中。下面的例子将在一张地图上添加绘图和编辑工具栏:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>// 在 "map"栏目中创建一个地图,将视图设置为指定地点并进行缩放。
var map = L.map('map').setView([175.30867, -37.77914], 13);
// 添加一个OpenStreetMap 的瓦片层
L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);
// 初始化FeatureGroup来存储可编辑的图层
var drawnItems = new L.FeatureGroup();
map.addLayer(drawnItems);
// 初始化绘图控件,并将可编辑层的特征组传递给它
var drawControl = new L.Control.Draw({
edit: {
featureGroup: drawnItems
}
});
map.addControl(drawControl);
</code></pre></div></div>
<h4 id="处理新创建的图层">处理新创建的图层</h4>
<p>一旦你成功地将 Leaflet.draw 插件添加到你的地图中,你就会想对用户可能触发的不同动作做出反应。</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>map.on('draw:created', function (e) {
var type = e.layerType,
layer = e.layer;
if (type === 'marker') {
// 做标记的具体行动
}
// 做其他你需要做的事情。(保存到数据库,添加到地图等)
drawnItems.addLayer(layer);
});
map.on('draw:edited', function () {
// 更新数据库以保存最新的变化。
});
map.on('draw:deleted', function () {
// 更新数据库以保存最新的变化。
});
</code></pre></div></div>
<p>请参阅 <a href="https://github.com/Leaflet/Leaflet.draw" target="_blank">Leaflet.draw README</a> 以了解关于如何配置该插件的更多细节。</p>
<h3 id="谢谢">谢谢</h3>
<p>首先,我想感谢我的雇主 <a href="http://www.smartrak.co.nz" title="GPS车队管理解决方案" target="_blank">Smartrak</a> 。如果没有他们对开源软件的态度,我就不会有时间来完成这个插件。</p>
<p>Leaflet 开发者社区通过灵感、拉动请求和问题报告对这个插件给予了极大的支持。特别感谢。 <a href="https://github.com/mourner" title="@mourner" target="_blank">@mourner</a> 、 <a href="https://github.com/danzel" title="@danzel" target="_blank">@danzel</a> 、 <a href="https://github.com/brunob" title="@brunob" target="_blank">@brunob</a> 、 <a href="https://github. com/tnightingale" title="@tnightingale" target="_blank">@tnightingale</a> 、 <a href="https://github.com/Starefossen" title="@Starefossen" target="_blank">@Starefossen</a> 和 <a href="https://github.com/shramov" title="@shramov" target="_blank">@shramov</a> 。</p>
<h3 id="关闭">关闭</h3>
<p>我在实施这个插件时很开心。我希望你喜欢使用它。如果您有问题或只是想问候一下,请给我发电子邮件: <a href="mailto:jacob.toye@gmail.com">jacob.toye@gmail.com</a> 。</p>
<p>Cheers,
Jacob Toye</p>
<link rel="stylesheet" href="https://leaflet.github.io/Leaflet.draw/lib/leaflet/leaflet.css" />
<link rel="stylesheet" href="https://leaflet.github.io/Leaflet.draw/leaflet.draw.css" />
<!--[if lte IE 8]>
<link rel="stylesheet" href="https://leaflet.github.io/Leaflet.draw/lib/leaflet/leaflet.ie.css" />
<link rel="stylesheet" href="https://leaflet.github.io/Leaflet.draw/leaflet.draw.ie.css" />
<![endif]-->
<script src="https://leaflet.github.io/Leaflet.draw/libs/leaflet/leaflet.js"></script>
<script src="https://leaflet.github.io/Leaflet.draw/leaflet.draw.js"></script>
<style>
.leaflet-bar {
border: none;
}
</style>
<script>
// create a map in the "map" div, set the view to a given place and zoom
var map = L.map('map').setView([-37.77914, 175.30867], 16);
// add an OpenStreetMap tile layer
L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);
// Initialize the FeatureGroup to store editable layers
var drawnItems = new L.FeatureGroup();
map.addLayer(drawnItems);
// Initialize the draw control and pass it the FeatureGroup of editable layers
var drawControl = new L.Control.Draw({
edit: {
featureGroup: drawnItems
}
});
map.addControl(drawControl);
map.on('draw:created', function (e) {
var type = e.layerType,
layer = e.layer;
if (type === 'marker') {
layer.bindPopup('A popup!');
}
// Do whatever else you need to. (save to db, add to map etc)
drawnItems.addLayer(layer);
});
</script>
Leaflet 0.5 发布
2013-01-17T00:00:00+08:00
https://leafletjs.com/2013/01/17/leaflet-0-5-released
<p>欢呼吧,大家 — 自上一个主要版本以来,经过4.5个月的开发,有 <a href="https://github.com/Leaflet/Leaflet/graphs/contributors?from=2012-08-30&to=2013-01-17&type=c">26 个贡献者参与</a> ,我很高兴地宣布 Leaflet 0.5 稳定版的发布,万岁!</p>
<p>0.5 的亮点包括支持 IE10 触摸设备和 Metro 应用程序,支持视网膜的标记,一个更好的平移惯性实现,用于拖动的手部光标和一个新的缩放控制设计。但这个版本的真正力量来自于大约100个细微的改进和错误修复,进一步改善了可用性、性能和浏览地图的整体 “感觉”。</p>
<p>一如既往,你可以在 <a href=".../.../.../download.html">下载页面</a> 上找到新版本的 CDN 链接和下载。</p>
<p>巨大的详细变化列表记录在 <a href="https://github.com/Leaflet/Leaflet/blob/master/CHANGELOG.md">更新日志</a> 中。在升级之前,请务必阅读其中的 “Breaking Changes” 部分,以避免出现任何问题! <a href=".../.../.../reference.html">API 参考</a> 也被更新以适应所有的变化。</p>
<p>在其他新闻中,<a href="https://github.com/Leaflet/Leaflet">Leaflet 仓库</a> 已经转移到 <a href="https://github.com/Leaflet">它自己的 GitHub 组织</a> ,同时还有两个最重要的插件 — <a href="https://github.com/Leaflet/Leaflet.markercluster">Leaflet.markercluster</a> 和 <a href="https://github.com/Leaflet/Leaflet.draw">Leaflet.draw</a> 。正如你们中的一些人所注意到的,这是关于 Leaflet 未来的一个非常好的公告的线索之一 — 敬请关注。:)</p>
<p>感谢大家! 看到 Leaflet 社区在过去几个月里所取得的成就,以及所有的贡献、令人惊叹的项目和演示,绝对令人叹为观止,说实话,我为能成为其中的一员感到自豪。</p>
<p>P.S.我还在梦中听说,每个在推特上发布新 Leaflet 的人都会在接下来的一个月里获得难以置信的运气提升。对我来说听起来是真的。</p>
<p>Cheers,<br />
Vladimir, Leaflet creator and maintainer.</p>
Leaflet 0.4.5 Bugfix 版发布 以及 0.5 的计划
2012-10-25T00:00:00+08:00
https://leafletjs.com/2012/10/25/leaflet-0-4-5-bugfix-release-and-plans-for-0.5
<h3 id="045-发布">0.4.5 发布</h3>
<p>当我们继续为下一个主要版本( 0.5 )工作时,今天我们决定发布 Leaflet 0.4.5 。它只包含一个小但重要的 bug 修复,即在即将到来的 Chrome 23 (目前处于测试阶段,将在几周内发布)和 Internet Explorer 10 (除了 Windows 8 之外,最终将进入 Windows 7 )上的 wonky 缩放动画。</p>
<p>我们鼓励每个人都进行升级(在 Chrome 23 变成稳定版之前)。一如既往,你可以在 <a href=".../.../.../download.html">下载页面</a> 找到新版本的 CDN 链接和下载。</p>
<h3 id="05-的计划">0.5 的计划</h3>
<p>随着 Leaflet 接近功能完整的状态和 API 的稳定,我们自然而然地将重点从新功能转向性能和可用性的改进,更好的浏览器和设备支持,错误修复和内部重构,使 Leaflet 的某些部分(如投影和矢量渲染)更容易为插件开发者和高级用户扩展和定制。</p>
<p>在 <code class="language-plaintext highlighter-rouge">master</code> 分支中已经实现的亮点包括对 <strong>IE10 触摸设备和 Metro 应用程序的触摸交互支持</strong>,以及更流畅、更灵敏的平移惯性。更多细节请关注 <a href="https://github.com/Leaflet/Leaflet/blob/master/CHANGELOG.md">完整更新日志</a> 。</p>
<p>我们也正在对矢量渲染代码进行重大的重构,以允许用自定义形状、额外的渲染系统(如现有的 SVG、VML 和 Canvas 渲染器之外的 WebGL )对基本功能进行更简单的扩展,在渲染器之间轻松切换,也使代码更简单、更容易理解。</p>
<p>投影相关的代码也是如此,使使用 Leaflet 的非标准投影更容易,包括游戏和室内地图的普通投影。由于这些变化,除了让先进的 GIS 人士更高兴之外,我们还将看到更多令人敬畏的 Leaflet 项目,如 <a href="http://www.ign.com/wikis/the-elder-scrolls-5-skyrim/interactive-maps/Skyrim"> IGN 上的交互式 Skyrim 地图</a> 或 <a href="http://www.wowhead.com/map"> Wowhead 上的魔兽世界地图</a> 。</p>
<p>即将到来的几周的另一个重要任务是与插件开发者更紧密地合作。特别是,重点领域之一将是 <a href="https://github.com/jacobtoye/Leaflet.draw">Leaflet.draw</a> 插件,它将很快成为最先进的地图矢量绘制/编辑解决方案,就像 Dave 的 <a href="https://github.com/danzel/Leaflet.markercluster">Leaflet.markercluster</a> 成为所有地图平台中最好的标记聚类解决方案。</p>
<p>目前的计划是在 11 月中旬的某个时候发布 0.5 稳定版。请继续关注!</p>
<h3 id="为-leaflet-投稿">为 Leaflet 投稿</h3>
<p>Leaflet 是一个真正的开源项目,所以我们总是很高兴认识新的贡献者,接受补丁和错误报告。为了帮助其他人参与 Leaflet 的开发,并使管理贡献更容易,我放了一个 <a href="https://github.com/Leaflet/Leaflet/blob/master/CONTRIBUTING.md">贡献于 Leaflet </a> 指南,其中有最佳实践和建议 — 请看!</p>
<p>感谢大家! Leaflet 有一个相当惊人的社区,这让我非常自豪。继续努力吧!</p>
<p>Cheers,<br />
Vladimir, Leaflet author and maintainer.</p>
Leaflet.MarkerCluster 0.1 发布
2012-08-20T00:00:00+08:00
https://leafletjs.com/2012/08/20/guest-post-markerclusterer-0-1-released
<p><em>这是一篇来自 Dave Leaver 的客座文章,他是一位活跃的 Leaflet 贡献者(特别是,他实现了 0.4 缩放动画的改进),也是目前最好的标记聚类插件的作者,在这篇文章中介绍了这个插件。</em></p>
<p>几乎所有拥有一张带有标记的地图的人,最终都会出现这些标记重叠的情况。我在 <a href="http://www.smartrak.co.nz/" title="Smartrak GPS Fleet Tracking">Smartrak</a> 的日常工作中,我们经常有客户在地图上有成千上万的点。当你把它放大时,这些标记都会重叠,使地图看起来很乱很拥挤。还有一种情况是,即使在最大的缩放级别上,标记也会重叠,这就使得无法与它们进行互动。另外,在地图上有大量的标记,通常最终会将性能降低到一个不可接受的水平。</p>
<p>为了改善这一点,许多网站使用了标记聚类,这是一种将每个区段上彼此相近的标记分组的技术。这方面的一个好例子是 <a href="http://www.redfin.com/homes-for-sale">Redfin</a> 。我们需要类似的东西,但是在 Leaflet 中。本着开放源代码的精神,我们开发并发布了我们的解决方案,以便每个人都能利用它。因此,我们自豪地介绍 <a href="https://github.com/leaflet/Leaflet.markercluster">Leaflet.MarkerCluster</a> 。</p>
<div id="map" class="map" style="height: 320px"></div>
<h3 id="plugin-features">特点</h3>
<p>集群器有各种伟大的内置行为:</p>
<ul>
<li>一切都有出色的动画效果。当你放大和缩小时,你可以合乎逻辑地看到哪些集群变成了哪些标记。</li>
<li>它的速度非常快,所以例如 <a href="https://leaflet.github.com/Leaflet.markercluster/example/marker-clustering-realworld.50000.html">聚类 50000 点</a> 并不是问题。另外,所有繁重的计算都发生在最初的页面加载上,在这之后,地图就能顺利工作了。</li>
<li>不需要聚类的标记是不需要的,而且在相关的缩放级别上也会看到。</li>
<li>当你把鼠标放在一个群组上时,该群组内的标记的边界就会显示出来。</li>
<li>点击一个群集将把你放大到它的子集的范围内。</li>
<li>在底部的缩放级别,如果仍然有集群,你可以点击它们来 “spiderfy”,这使得与集群中的单个标记的互动成为可能(基于 <a href="https://github.com/jawj/OverlappingMarkerSpiderfier-Leaflet">jawj 的 Overlapping MarkerSpidifer</a> )。</li>
<li>为了提高性能,离视口超过一个屏幕宽度的集群和标记将从地图上删除。</li>
<li>与核心 Leaflet 一样,所有东西都能在移动和桌面浏览器上运行,并一直测试到 IE6 。</li>
<li>支持在被添加到地图后添加和删除标记(见下面的最佳做法!)。</li>
<li>它是高度可定制的,允许你轻松改变集群的外观,禁用某些功能,并在集群互动上添加自定义行为。</li>
</ul>
<h3 id="使用方法">使用方法</h3>
<p>使用 Marker Clusterer 很简单,只要用 <code class="language-plaintext highlighter-rouge">L.MarkerClusterGroup</code> 替换你现有的 <a href="./././examples/layers-control.html">LayerGroup</a> 用法即可:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>var markers = new L.MarkerClusterGroup();
markers.addLayer(L.marker([175.3107, -37.7784]));
// add more markers here...
map.addLayer(markers);
</code></pre></div></div>
<p>你也可以对单个标记和集群使用所有的 <a href=".../.../reference.html#featuregroup">FeatureGroup 事件</a> (另外还有 <code class="language-plaintext highlighter-rouge">clusterclick</code> )。</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>markers.on('clusterclick', function (a) { alert('Cluster Clicked'); });
markers.on('click', function (a) { alert('Marker Clicked'); });
</code></pre></div></div>
<h3 id="最佳实践">最佳实践</h3>
<ul>
<li>为了从聚类器中获得最佳性能,你应该在将其添加到地图之前将所有的标记添加到聚类器中(就像我们在例子中做的那样)。</li>
<li>如果你要移动一个在 L.MarkerClusterGroup 中的标记,你必须先移除它,然后移动它,再重新添加它。如果你在 MarkerClusterGroup 中移动它,我们就无法跟踪它,这个标记就会丢失。</li>
<li>尽管聚类器支持在地图上添加和删除标记,但它的性能不如在不在地图上添加标记时好。如果你需要对一个 <code class="language-plaintext highlighter-rouge">MarkerClusterGroup</code> 中的标记进行大规模的更新,你可能想把它从地图上删除,改变标记,然后再重新添加它。</li>
</ul>
<h3 id="获取它">获取它</h3>
<p>你可以在 <a href="https://github.com/leaflet/Leaflet.markercluster/downloads">github 下载页面</a> 上下载最新版本。</p>
<h3 id="技术要点">技术要点</h3>
<p>底层聚类算法( <code class="language-plaintext highlighter-rouge">MarkerClusterGroup._cluster</code> )是普通的贪婪聚类。</p>
<div class="language-plaintext no-highlight highlighter-rouge"><div class="highlight"><pre class="highlight"><code>foreach marker
如果在聚类距离内有一个聚类,就加入它。
否则,如果在聚类距离内有一个未聚类的标记,就与它形成一个聚类。
</code></pre></div></div>
<p>第一个聚类步骤是针对最大(最底层)的缩放级别,然后我们对所有产生的标记和聚类进行聚类,生成下一个向上的缩放级别,以此类推,直到我们达到顶部。
这些集群被存储在一棵树上(一个集群包含它的子集群),具有良好的地理空间质量。我们使用这棵树来优化识别在任何特定缩放级别下屏幕上有哪些标记和集群。</p>
<h4 id="ldistancegrid">L.DistanceGrid</h4>
<p><code class="language-plaintext highlighter-rouge">L.DistanceGrid</code> 在聚类时提供了一些不错的优化(由 <a href="http://agafonkin.com/en/">Vladimir</a> 贡献,Leaflet 维护者)。</p>
<p>为了对标记进行聚类,我们需要将每个标记与其他每个标记进行比较,以尝试形成一个聚类。
为了使其更快,我们需要减少我们需要比较的标记的集合。<code class="language-plaintext highlighter-rouge">DistanceGrid</code> 通过将所有标记放在一个大小与我们需要搜索的距离相同的网格上来实现。然后,当我们寻找一个要聚类的标记时,我们只需要看我们所在的网格方块和它的近邻的标记。这可能是一个相当大的性能优势,因为我们只看我们有可能形成集群的标记。( <a href="https://github.com/leaflet/Leaflet.markercluster/pull/29">查看数字的初始 PR</a> )</p>
<h3 id="结语">结语</h3>
<p>我希望你喜欢使用聚类器,并从中获得你想要的一切。如果你在公共网站上使用它,请 <a href="mailto:danzel@localhost.geek.nz">给我发一封邮件</a> ,这样我可以检查一下,并有可能将其链接到 github 网站上。</p>
<p>如果你有任何问题,也请在 <a href="https://github.com/leaflet/Leaflet.markercluster">github 页面</a> 上记录一个错误。</p>
<p>Enjoy!<br />
Dave Leaver.</p>
<link rel="stylesheet" href="https://leaflet.github.io/Leaflet.markercluster/dist/MarkerCluster.css" />
<link rel="stylesheet" href="https://leaflet.github.io/Leaflet.markercluster/dist/MarkerCluster.Default.css" />
<!--[if lte IE 8]><link rel="stylesheet" href="https://leaflet.github.io/Leaflet.markercluster/dist/MarkerCluster.Default.ie.css" /><![endif]-->
<script src="https://leaflet.github.io/Leaflet.markercluster/dist/leaflet.markercluster-src.js"></script>
<script src="https://leaflet.github.io/Leaflet.markercluster/example/realworld.388.js"></script>
<script>
var mapbox = new L.TileLayer(MB_URL, {maxZoom: 18, attribution: MB_ATTR, id: 'examples.map-i875mjb7'}),
latlng = new L.LatLng(-37.820, 175.217);
var map = new L.Map('map', {center: latlng, zoom: 15, layers: [mapbox]});
map.attributionControl.addAttribution("Points © 2012 LINZ");
var markers = new L.MarkerClusterGroup();
for (var i = 0; i < addressPoints.length; i++) {
var a = addressPoints[i];
var title = a[2];
var marker = new L.Marker(new L.LatLng(a[0], a[1]), { title: title });
marker.bindPopup(title);
markers.addLayer(marker);
}
map.addLayer(markers);
</script>
Leaflet 0.4.3 和 新的教程
2012-08-07T00:00:00+08:00
https://leafletjs.com/2012/08/07/leaflet-0-4-3-and-a-new-tutorial
<p>继 <a href="leaflet-0-4-released.html">Leaflet 0.4 发布</a> 之后,在过去的一周里有几个小的 bug 修复版本,Leaflet 0.4.3 今天发布。它们包含了对一些被发现的 bug 的修复,同时也为新的 GeoJSON API 带来了一些改进,使其更加灵活——————见下面的更新日志。</p>
<p>我还写了 <a href="./././examples/choropleth.html">一个新的教程</a> ,灵感来自 <a href="http://www.texastribune.org/about/staff/ryan-murphy/">Ryan Murphy</a> 的<a href="http://www.texastribune.org/library/data/us-senate-runoff-results-map/">Texas Tribune US Senate Runoff Results map</a>(也是由Leaflet驱动的)。它将逐步向你展示如何在 GeoJSON 和自定义控件的帮助下创建一个漂亮的美国各州人口密度互动 <a href="http://en.wikipedia.org/wiki/Choropleth_map">choropleth 地图</a> ,并希望能说服更多的主要新闻和政府网站转向使用 Leaflet 。:)</p>
<p>在 <a href="../../../download.html">下载页面</a> 获取新的 Leaflet 0.4.3 。享受吧!</p>
<p><strong>更新</strong>。在 0.4.3 中发现了 IE9 的退步,所以我不得不发布 0.4.4 ,并进行了修复。对不起!</p>
<h3 id="043-2012年8月7日">0.4.3 (2012年8月7日)</h3>
<h4 id="改进措施">改进措施</h4>
<ul>
<li>改进了 <code class="language-plaintext highlighter-rouge">GeoJSON</code> <code class="language-plaintext highlighter-rouge">setStyle</code> ,使其也能接受函数(如相应的选项)。</li>
<li>增加了 <code class="language-plaintext highlighter-rouge">GeoJSON</code> <code class="language-plaintext highlighter-rouge">resetStyle(layer)</code> ,对重设悬停状态很有用。</li>
<li>为用 <code class="language-plaintext highlighter-rouge">GeoJSON</code> 创建的图层(包含 GeoJSON 特征数据)增加了 <code class="language-plaintext highlighter-rouge">feature</code> 属性。</li>
<li>增加了 <code class="language-plaintext highlighter-rouge">FeatureGroup</code> <code class="language-plaintext highlighter-rouge">bringToFront</code> 和 <code class="language-plaintext highlighter-rouge">bringToBack</code> 方法(以便它们能适用于多聚体)。</li>
<li>为 <code class="language-plaintext highlighter-rouge">Map</code> <code class="language-plaintext highlighter-rouge">invalidateSize</code> 增加了可选的 <code class="language-plaintext highlighter-rouge">animate</code> 参数(由 <a href="https://github.com/ajbeaven">@ajbeaven</a> )。 <a href="https://github.com/Leaflet/Leaflet/pull/857">#857</a></li>
</ul>
<h4 id="错误修复">错误修复</h4>
<ul>
<li>修正了在安卓 2、3 系统上初始加载地图时瓷砖有时会消失的问题(由 <a href="https://github.com/danzel">@danzel</a> 提供)。 <a href="https://github.com/Leaflet/Leaflet/pull/868">#868</a></li>
<li>修正了一个错误,即在 Chrome 浏览器上放大或平移时,地图在边界附近偶尔会闪烁。</li>
<li>修正了一个错误,即 <code class="language-plaintext highlighter-rouge">Path</code> <code class="language-plaintext highlighter-rouge">bringToFront</code> 和 <code class="language-plaintext highlighter-rouge">bringToBack</code> 没有返回 <code class="language-plaintext highlighter-rouge">this</code> 。</li>
<li>删除了 Win、Meta 键绑定的放大功能(因为它干扰了全局键盘快捷键)。 <a href="https://github.com/Leaflet/Leaflet/issues/869">#869</a></li>
</ul>
<h3 id="042-2012年8月1日">0.4.2 (2012年8月1日)</h3>
<ul>
<li>修正了层控制单选按钮在IE7中不能正常工作的问题(由 <a href="https://github.com/danzel">@danzel</a> )。 <a href="https://github.com/Leaflet/Leaflet/pull/862">#862</a></li>
<li>修正了一个错误,即 <code class="language-plaintext highlighter-rouge">FeatureGroup</code> <code class="language-plaintext highlighter-rouge">removeLayer</code> 会解除对已删除图层的弹出窗口的绑定,即使这些弹出窗口不是由该组放置的(影响到 <a href="https://github.com/danzel/Leaflet.markercluster">Leaflet.markercluster</a> 插件)(由 <a href="https://github.com/danzel">@danzel</a> )。 <a href="https://github.com/Leaflet/Leaflet/pull/861">#861</a></li>
</ul>
<h3 id="041-2012年7月31日">0.4.1 (2012年7月31日)</h3>
<ul>
<li>修正了一个在 IE6-8 中导致标记阴影显示为不透明黑色的错误。 <a href="https://github.com/Leaflet/Leaflet/issues/850">#850</a></li>
<li>修正了一个错误,即比例控制对比例的计算不正确。 <a href="https://github.com/Leaflet/Leaflet/issues/852">#852</a></li>
<li>修正了破损的 L.tileLayer.wms 类工厂(由 <a href="https://github.com/mattcurrie">@mattcurrie</a> )。 <a href="https://github.com/Leaflet/Leaflet/issues/856">#856</a></li>
<li>改进了 <code class="language-plaintext highlighter-rouge">TileLayer</code> <code class="language-plaintext highlighter-rouge">detectRetina</code> 选项的视网膜检测(由 <a href="https://github.com/sxua">@sxua</a> )。 <a href="https://github.com/Leaflet/Leaflet/issues/854">#854</a></li>
</ul>
<p>Sincerely, <br />
Vladimir Agafonkin, Leaflet maintainer.</p>
Leaflet 0.4 发布
2012-07-30T00:00:00+08:00
https://leafletjs.com/2012/07/30/leaflet-0-4-released
<p>经过 5 个半月的开发,从上一个稳定版开始,有 <a href="https://github.com/Leaflet/Leaflet/graphs/contributors?from=2012-02-15&to=2012-07-30&type=c">33 个贡献者</a> 参与,我很自豪地宣布 Leaflet 0.4 的发布!它有更简单的 API 和<em>大量</em>的改进和重要的 bug 修复,还有一个重要的文档更新,一个官方插件页面和这个开发者博客的发布。让我们逐一看一下这些改进。</p>
<h3 id="更简单的-api">更简单的 API</h3>
<p>Leaflet 0.4 包含了一些 API 改进,使你可以写出更简单、更简洁的代码( <a href="http://jquery.com">jQuery</a>——like),同时向后兼容以前的方法(这样你就可以使用两种风格)。</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>L.marker([51.5, -0.09])
.addTo(map)
.bindPopup('Hello world!')
.openPopup();
</code></pre></div></div>
<p>首先,Leaflet 方法现在接受 <a href="../../../reference.html#latlng">LatLng</a>、<a href="../../../reference.html#latlngbounds">LatLngBounds</a>、<a href="../../../reference.html#point">Point</a> 和 <a href="../../../reference.html#bounds">Bounds</a> 对象的简单数组形式,所以你不需要总是明确地创建它们:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>map.panTo([50, 30]); // the same as:
map.panTo(new L.LatLng(50, 30));
</code></pre></div></div>
<p>第二,像 <a href="../../../reference.html#map-addlayer">addLayer</a>、<a href="../../../reference.html#map-addcontrol">addControl</a>、<a href="../../../reference.html#map-openpopup">openPopup</a> 这样的 Map 方法从另一边得到了对应的方法:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>marker.addTo(map); // same as map.addLayer(marker)
control.addTo(map); // map.addControl(control)
popup.openOn(map); // map.openPopup(popup)
</code></pre></div></div>
<p>再加上所有没有明确返回值的 Leaflet 方法都会返回对象本身,这就使得方法链的使用更加方便。</p>
<p>第三,Leaflet 类现在带有小写的快捷方式(类工厂),允许你在没有 <code>new</code> 关键字的情况下创建对象,这使得链式代码看起来更漂亮:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>L.map('map').fitWorld(); // same as
(new L.Map('map')).fitWorld();
</code></pre></div></div>
<h3 id="值得注意的新功能">值得注意的新功能</h3>
<div id="map" class="map" style="height: 250px"></div>
<h4 id="改进的缩放动画">改进的缩放动画</h4>
<p>标记、弹出窗口、矢量图层和图像叠加在以前的版本中是隐藏的,但现在(感谢 <a href="https://github.com/danzel">Dave Leaver</a> )它们都有漂亮、流畅的缩放动画,与现有的任何其他地图库不同。试着在上面的地图上进行缩放,看看它看起来如何 如果你在地图上有成千上万的标记,你可以用地图的 <code class="language-plaintext highlighter-rouge">markerZoomAnimation</code> 选项关闭标记动画,如果它变得很慢。</p>
<p>此外,现在如果你快速放大或缩小一次以上,瓷砖就不会消失。</p>
<h4 id="键盘导航">键盘导航</h4>
<p>在 0.4 版本中,Leaflet 地图通过新的键盘处理程序(由 <a href="https://github.com/ericmmartinez">Eric Martinez</a> 贡献)得到了一个很好的可访问性提升,默认情况下是启用的。它允许用户通过使用方向键平移和 <code>+</code> <code>-</code> 键缩放来浏览地图(在通过标签或点击地图使其成为焦点后)。在上面的地图上试一下,感觉非常好!</p>
<h4 id="平移惯性">平移惯性</h4>
<p>另一个很好的改进来自于平移体验——————现在它有一个惯性移动效果,在快速平移之后,地图会平稳地继续移动。在触摸设备上感觉特别自然——————而且它也是默认启用的,现在就试试吧! 它也是高度可配置的,允许你设置效果的最大速度、减速度和触发的时间阈值。</p>
<h4 id="安卓-4-上的捏合缩放">安卓 4 上的捏合缩放</h4>
<p>在以前的 Leaflet 版本中,捏合缩放只在 iOS 设备上工作,但现在它终于来到了 Android ! 在安卓 4+ 系统中,不仅可以在原版浏览器中使用,还可以在 Chrome 和 Firefox for Android 中使用。</p>
<h4 id="比例控制">比例控制</h4>
<p>一个简单的、轻量级的控件,它以公制和/或英制显示当前地图视图的比例。像往常一样,你可以用 CSS 自定义其外观。看一下上面地图的左下角吧!</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>L.control.scale().addTo(map);
</code></pre></div></div>
<h4 id="多段线和多边形编辑">多段线和多边形编辑</h4>
<p>允许用户用一个简单、直观的界面来编辑折线和多边形。请注意,这个功能最终会并入 <a href="https://github.com/jacobtoye/Leaflet.draw">Leaflet.draw</a> —————— 一个由 Jacob Toye 开发的用于绘制形状的很棒的插件。</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>polygon.editing.enable();
</code></pre></div></div>
<h4 id="基于-div-的图标">基于 Div 的图标</h4>
<p>除了基于图像的 <a href="../../../reference.html#icon">Icon</a> 类,Leaflet 0.4 还获得了一个 <a href="../../../reference.html#divicon">DivIcon</a> 类,用于创建轻量级的基于 div 的标记(可以包含自定义 HTML 并可以用 CSS 进行样式设计)。例如,你可以在编辑多段线时看到它们的作用(方形手柄),或者在我稍后要讲的 <a href="https://github.com/danzel/Leaflet.markercluster">Leaflet.markercluster</a> 插件中(彩色的集群)。</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>L.marker([50.505, 30.57], {
icon: L.divIcon({className: 'my-div-icon'})
}).addTo(map);
</code></pre></div></div>
<h4 id="矩形层">矩形层</h4>
<p>矩形是创建矩形区域图层的一个方便的快捷方式。你可以在前面用多边形做这个,但这更容易:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>L.rectangle([[51.505, -0.03], [51.5, -0.045]]).addTo(map);
</code></pre></div></div>
<h3 id="api-改进">API 改进</h3>
<h4 id="geojson-api">GeoJSON API</h4>
<p><a href="../../../reference.html#geojson">GeoJSON</a> API 得到了改进,变得更加简单和灵活。<a href="https://github.com/JasonSanford">Jason Sanford</a> 写了一个 <a href=".../.../.../examples/geojson.html">伟大的教程</a> ,展示了新的 API 。不过这些变化并不向后兼容,所以一定要更新你的旧代码。</p>
<h4 id="图标-api">图标 API</h4>
<p><a href="../../../reference.html#icon">Icon</a> API 被改进得更简单、更灵活,而且这些变化也不是向后兼容的(尽管旧代码可以很快被更新)。看看更新后的 <a href=".../.../.../examples/custom-icons.html">自定义图标教程</a> ,或者直接前往 <a href=".../.../reference.html#icon">API文档</a> 。</p>
<h4 id="控件-api">控件 API</h4>
<p>自定义控件现在更容易创建了——————请查看 <a href="./././reference.html#icontrol">API docs</a> ,其中也有一个简单的例子。</p>
<h4 id="更好的事件-api">更好的事件 API</h4>
<p><a href="https://github.com/Guiswa">Aaron King</a> 给 <a href="./././reference.html#events">事件方法</a> 带来一些改进。 <code class="language-plaintext highlighter-rouge">on</code> 和 <code class="language-plaintext highlighter-rouge">off</code> 方法现在可以同时接受多个事件类型,作为一个空格分隔的字符串类型:</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>map.on('click dblclick moveend', doStuff);
</code></pre></div></div>
<p>另外,它们可以接受一个带有类型和监听器功能的对象作为键 / 值对,像这样。</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>marker.on({
click: onMarkerClick,
dragend: onMarkerDragEnd
});
</code></pre></div></div>
<p>此外,现在如果你只指定一个事件类型给 <code class="language-plaintext highlighter-rouge">off</code> 方法,它将删除所有与此事件绑定的监听器。</p>
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>map.off('click');
</code></pre></div></div>
<h4 id="其他-api-的改进">其他 API 的改进</h4>
<p>Leaflet 0.4 在不同的 Leaflet 类中有 30 多个新方法、选项和事件,使 API 更加完整和强大。请查看 <a href="https://github.com/Leaflet/Leaflet/blob/master/CHANGELOG.md#other-api-improvements">完整的更新日志</a> 以了解完整的列表。</p>
<h3 id="性能和易用性的改进">性能和易用性的改进</h3>
<p>你可能认为 Leaflet 已经快得令人难以置信了,但这个版本带来了一些性能上的改进,使它变得更快。</p>
<ul>
<li>平移、调整地图大小和捏合缩放的性能得到了改善(这背后的一些技巧将在未来的博文中解释)。</li>
<li>在画布后端更新和删除矢量图层(例如在安卓 2 上)的工作速度要快很多倍。</li>
<li>在移动设备上,控件上的盒状阴影被替换为简单的边框,以提高性能。</li>
<li>矢量图层现在在 iOS 上每次平移后都不会闪烁了。</li>
</ul>
<p>此外,还有一些尚未提及的可用性改进:</p>
<ul>
<li>即使光标下有标记,平移现在也能工作(对拥挤的地图有帮助)。</li>
<li>弹出窗口外观略有改进。</li>
<li>瓦片层现在有 <code>detectRetina</code> 选项,启用后会将瓦片的分辨率提高一倍,以适应视网膜显示器(由 <a href="https://github.com/Mithgol">Mithgol</a> 贡献)。</li>
</ul>
<h3 id="错误修复">错误修复</h3>
<p>Leaflet 0.4 带来了大约 45 个 bug 修复,使其在所有的浏览器和平台上更加稳定和可靠。值得注意的 bug 修复包括可怕的 iOS bug ,该 bug 在某些罕见的情况下会导致地图在捏合缩放后完全消失,在 IE10 测试版上缩放失败,在 XHTML 内容类型的页面上 Leaflet 地图失败,以及在固定位置元素内的地图缩放不正确。</p>
<p>下面是更新日志中的 <a href="https://github.com/Leaflet/Leaflet/blob/master/CHANGELOG.md#bug-fixes">错误修复的完整列表</a> 。</p>
<h3 id="从旧版本升级">从旧版本升级</h3>
<p>除了上面提到的 GeoJSON 和 Icon 的变化,这里还有一个 <a href="https://github.com/Leaflet/Leaflet/blob/master/CHANGELOG.md#other-breaking-api-changes">潜在的破坏性变化列表</a> —————— 在更新你的代码时,请仔细阅读它(虽然不应该花太多时间)。</p>
<p>Leaflet 0.4 的下载选项(包括实际下载,CDN 托管的版本,以及手动构建的说明)在 <a href=".../.../.../download.html">下载页面</a> 列出。</p>
<h3 id="代码统计">代码统计</h3>
<p>我仍然致力于使 Leaflet 尽可能的小而轻。下面是目前库的大小分类:</p>
<ul>
<li>JavaScript: <strong>27 KB</strong> ,已压缩和 gzipped (102 KB minified, 176 KB in source, 7578 lines of code)</li>
<li>CSS: <strong>1.8 KB</strong> gzipped (8 KB, 377 lines of code)</li>
<li>Images: <strong>10 KB</strong> (5 PNG images)</li>
</ul>
<h3 id="文档更新">文档更新</h3>
<p>到目前为止,Leaflet 的 API 参考是不完整的。但在这个版本中,我们付出了巨大的努力,使其成为 100% 完整的、最新的、通常是你所见过的最好的 API 参考页面。所有剩余的类、方法、选项、事件和属性都被仔细记录下来,并添加了更多的代码实例,从现在开始,文档将一直保持更新。</p>
<p>此外,页面的设计也得到了显著的改善 —————— 有更好的颜色、字体、间距、连字符、手动调整的列宽等等。</p>
<h3 id="插件页面">插件页面</h3>
<p>Leaflet 网站现在有一个官方的 <a href=".../.../.../plugins.html">插件页面</a> ,列出了许多 Leaflet 插件,这些插件是由令人敬畏的 Leaflet 社区创建的,增加了许多伟大的功能,有助于服务的整合。</p>
<p>我想提到的一个插件是 <a href="https://github.com/danzel">Dave Leaver</a> 的 <a href="https://github.com/danzel/Leaflet.markercluster">Leaflet.markercluster</a> ,目前是我见过的所有地图库中最好的标记聚类插件 —————— 它快速、漂亮,为聚类提供流畅的动画,包括一个智能的谷歌地球式的解决方案,用于在最后一个缩放级别上拥挤的标记(由 <a href="https://github.com/jawj/">George MacKerron</a> ),可以在悬停时突出一个集群所覆盖的区域,在移动设备上工作良好,并且可以轻松地进行定制。我想我们会在下一篇文章中更详细地介绍这个插件。</p>
<p>另一个值得注意的插件是 <a href="https://github.com/jacobtoye">Jacob Toye</a> 的 <a href="https://github.com/jacobtoye/Leaflet.draw">Leaflet.draw</a> ,灵感来自 <a href="https://github.com/brunob">Bruno B</a> 的一个类似插件。它通过一个非常好的带有图标和提示的用户友好界面,实现了多段线、多边形、矩形、圆和标记等绘画功能。其他与编辑有关的代码可能会在将来移入这个插件。</p>
<p>另外,由于 <a href="http://www.kartena.se/">Kartena</a> 的 <a href="https://github.com/kartena/Proj4Leaflet">Proj4Leaflet</a> 插件,GIS 爱好者现在可以享受 Leaflet 的一些古怪和罕见的投影的地图。</p>
<p>还有一个基于 Leaflet 的创作,每个人都需要看看 <a href="http://flyjs.com/buildings/">OSM Buildings</a> by <a href="http://flyjs.com/buildings/about.php">Jan Marsch</a> ,一个惊人的 JS 库,用于在 Leaflet 地图上可视化 3D OSM 建筑数据。令人难以置信的酷东西。</p>
<h3 id="开发者博客">开发者博客</h3>
<p>这是官方 Leaflet 开发者博客的第一篇文章,它将成为所有与 Leaflet 相关的重要新闻、教程、技巧和开发说明的主要场所。</p>
<h3 id="使用-leaflet-的大公司">使用 Leaflet 的大公司</h3>
<p>自从上次发布后,Leaflet 被许多伟大的公司采用,包括 <a href="http://flickr.com/map">Flickr</a> ,<a href="http://foursquare.com">foursquare</a> 和 <a href="http://blog.wikimedia.org/2012/04/05/new-wikipedia-app-for-ios-and-an-update-for-our-android-app/">Wikimedia Foundation</a>(现在在 <a href="./././index.html">frontpage</a> 中出现)。对于 Leaflet 和开源地图来说,这是一个非常激动人心的时刻,我期待着看到许多其他公司在未来跟随这一令人敬畏的趋势。</p>
<h3 id="谢谢你">谢谢你</h3>
<p>我想感谢所有帮助 Leaflet 成为现在这样的人 —————— 贡献代码、报告错误、在他们的网站上使用 Leaflet、向同事介绍它、在会议上谈论它,等等。继续努力吧!</p>
<p>特别感谢 <a href="https://github.com/danzel">Dave Leaver</a> 的鼓舞人心的贡献,包括改进的缩放动画和最先进的集群插件,以及 <a href="https://github.com/JasonSanford">Jason Sanford</a> 的友好支持(以及建立 Leaflet CDN 和其他事情)。</p>
<p>当然,还要感谢我那家了不起的公司,<a href="http://cloudmade.com">CloudMade</a> ,感谢他们拥抱开源并支持这一发展。</p>
<p>Sincerely, <br />
Vladimir Agafonkin, Leaflet maintainer.</p>
<script>
var map = L.map('map').setView([51.503, -0.09], 13);
L.tileLayer(MB_URL, {attribution: MB_ATTR, id: 'examples.map-i875mjb7'}).addTo(map);
var polygon = L.polygon([
[51.509, -0.08],
[51.503, -0.06],
[51.51, -0.047]
], {color: 'red'}).addTo(map).bindPopup('I am an editable polygon.');
polygon.editing.enable();
L.control.scale().addTo(map);
L.marker([51.5, -0.095]).addTo(map)
.bindPopup("<b>Hello world!</b><br />I am a popup.").openPopup();
L.marker([51.505, -0.115]).addTo(map).bindPopup("I am a second popup.");
L.marker([51.496, -0.13]).addTo(map).bindPopup("I am a third popup.");
L.rectangle([
[51.505, -0.03],
[51.5, -0.045]
], {weight: 1, opacity: 0.8}).addTo(map).bindPopup('I am a rectangle.');
</script>