← 教程

本教程假设您已经阅读了 Leaflet 类继承理论。

在 Leaflet 中，“图层”是任何与地图一起移动的东西。与之相反，“控件”是相对于地图容器保持静止的 HTML 元素，“处理器”是一段改变地图行为的不可见代码。

处理器

地图处理器是 Leaflet 1.0 中的一个新概念，它们的功能是处理来自浏览器的 DOM 事件（如 click、dblclick 或 mousewheel）并改变地图的状态。

处理器相对简单：它们只需要一个 addHooks() 方法（在处理器在 map 中启用时运行）和一个 removeHooks() 方法，该方法在处理器被禁用时运行。处理器的骨架是

L.CustomHandler = L.Handler.extend({
	addHooks: function() {
		L.DomEvent.on(document, 'eventname', this._doSomething, this);
	},

	removeHooks: function() {
		L.DomEvent.off(document, 'eventname', this._doSomething, this);
	},

	_doSomething: function(event) { … }
});

这可以通过一个简单的处理器来演示，该处理器通过 deviceorientation 事件 在移动设备倾斜时平移地图

L.TiltHandler = L.Handler.extend({
	addHooks: function() {
		L.DomEvent.on(window, 'deviceorientation', this._tilt, this);
	},

	removeHooks: function() {
		L.DomEvent.off(window, 'deviceorientation', this._tilt, this);
	},

	_tilt: function(ev) {
		// Treat Gamma angle as horizontal pan (1 degree = 1 pixel) and Beta angle as vertical pan
		this._map.panBy( L.point( ev.gamma, ev.beta ) );
	}
});

可以使用 map.addHandler('tilt', L.TiltHandler) 将处理器附加到地图 - 这将存储 L.TiltHandler 的一个实例作为 map.tilt。但是，更常见的是使用 addInitHook 语法将处理器附加到所有地图

L.Map.addInitHook('addHandler', 'tilt', L.TiltHandler);

现在可以通过运行 map.tilt.enable() 来启用我们的处理器，并通过 map.tilt.disable() 来禁用它

此外，如果地图具有与处理器同名的属性，那么如果该选项为 true，则该处理器将默认启用，因此这将默认启用我们的处理器

var map = L.map('mapDiv', { tilt: true });

要查看此示例，您需要一个 支持 deviceorientation 事件 的移动浏览器 - 即使这样，此事件也特别不可靠且定义不清，因此请注意。

根据事件的类型，地图处理器可以将事件监听器附加到 document、window 或它所附加到的 L.Map 的容器。

控件

您已经了解控件 - 左上角的缩放控件、左下角的比例尺、右上角的图层切换器。在核心上，L.Control 是一个在 map 容器中处于静态位置的 HTML 元素。

要创建控件，只需从 L.Control 继承并实现 onAdd() 和 onRemove()。这些方法的工作方式类似于它们的 L.Layer 对应方法（它们在控件被添加到或从地图中移除时运行），但 onAdd() 必须返回一个表示控件的 HTMLElement 实例。将元素添加到地图中是自动完成的，移除也是如此。

自定义控件的最简单示例将是水印，它只是一张图片

L.Control.Watermark = L.Control.extend({
	onAdd: function(map) {
		var img = L.DomUtil.create('img');

		img.src = '../../docs/images/logo.png';
		img.style.width = '200px';

		return img;
	},

	onRemove: function(map) {
		// Nothing to do here
	}
});

L.control.watermark = function(opts) {
	return new L.Control.Watermark(opts);
}

L.control.watermark({ position: 'bottomleft' }).addTo(map);

如果您的自定义控件具有可交互的元素，例如可点击的按钮，请记住在 onAdd() 中使用 L.DomEvent.on()，并在 onRemove() 中使用 L.DomEvent.off()。

如果您的自定义控件包含多个 HTML 元素（如 L.Control.Zoom，它有两个按钮），您将不得不创建整个元素层次结构并返回最顶层的容器。

发布您的插件

如果您已经理解了到目前为止的所有内容，那么您就可以创建一些 Leaflet 插件了！但请务必阅读 PLUGIN-GUIDE.md 文件，因为它包含一些关于插件命名和发布的提示和最佳实践。