Leaflet.draw 0.2 发布

Posted on 20 February 2013 by Jacob Toye

这是 Jacob Toye的客座文章，他是 Leaflet 的活跃贡献者，同时也是目前最复杂的矢量绘图和编辑插件的作者，在这篇文章中介绍了这个插件。

Leaflet.draw 诞生于为用户提供在地图上绘制多边形的能力的需要。Leaflet 已经提供了一个非常好的方法来编辑现有的折线和多边形。合乎逻辑的下一步是在这个功能上进行扩展，以允许创建这些图层，并最终创建其他的矢量图层。

一经发布，Leaflet 社区的直接反应是非常积极的。很明显，下一步将是把这个工具发展到用户除了创建形状之外还可以编辑和删除形状的状态。这就是 Leaflet.draw 0.2 最终要做的事情。

经过几个月的断断续续的开发，在我的雇主 Smartrak 的赞助下，我们隆重推出 Leaflet.draw 0.2 ———— 你在 Leaflet 地图上绘制、编辑和删除矢量和标记的一站式插件。:)

来自 Vladimir 的注意：Leaflet 核心的多线、多边形编辑功能已经被移到这个插件中，在那里它更适合。该插件又被移到了 GitHub 上的 Leaflet 组织，现在已被 Leaflet 开发团队正式支持。请注意，0.2 版目前依赖于 Leaflet master（正在开发的版本）来工作。

您可以从 github repo 下载最新版本。请在问题页面上报告您遇到的任何错误。

特点

Leaflet.draw 的设计不仅便于终端用户使用，而且也便于开发者整合。

用易于使用的绘图工具在地图上绘制形状。
编辑和删除矢量和标记。
超级可定制:
- 自定义每个形状的风格，以适应你的地图主题。
- 挑选你想使用的工具。
- 只需使用绘图和编辑处理程序，就可以推出你自己的。
基于事件的系统允许你在形状被创建、编辑或删除时执行任何必要的行动。

如何使用

Leaflet.draw 非常简单，可以放入你的 Leaflet 应用程序中。下面的例子将在一张地图上添加绘图和编辑工具栏:

// 在 "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);

处理新创建的图层

一旦你成功地将 Leaflet.draw 插件添加到你的地图中，你就会想对用户可能触发的不同动作做出反应。

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 () {
	// 更新数据库以保存最新的变化。
});

请参阅 Leaflet.draw README 以了解关于如何配置该插件的更多细节。

谢谢

首先，我想感谢我的雇主 Smartrak 。如果没有他们对开源软件的态度，我就不会有时间来完成这个插件。

Leaflet 开发者社区通过灵感、拉动请求和问题报告对这个插件给予了极大的支持。特别感谢。 @mourner 、 @danzel 、 @brunob 、 @tnightingale 、 @Starefossen 和 @shramov 。

关闭

我在实施这个插件时很开心。我希望你喜欢使用它。如果您有问题或只是想问候一下，请给我发电子邮件： jacob.toye@gmail.com 。

Cheers, Jacob Toye