本教程假设您已经阅读了Leaflet Class Theory
在leaflet中，
一个layer是跟随map移动的任何东西。
与之相反，一个control是对于map容器相对静态的HTML元素（例如，缩放、全屏的按钮都是control）；
一个handler是一段用来改变map操作的不可见代码。

Handlers

Map Handler 是Leaflet 1.0中的一个新概念，其功能是处理来自浏览器的DOM事件(如click、dblclick或mousewheel)并改变map的状态（map状态改变一般使用setView、setZoom此类方法）。
Handler相对简单:它们只需要addHooks()方法(在map中handler是enable时addHooks就会加载)和removeHooks()方法(handler被disabled时removeHooks会触发)。handler框架:

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) { … }
});

//用一个简单的handler来说明，当平移地图操作时，通过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 ) );
    }
});

一个Handler将使用map.addHandler(‘tilt’, L.TiltHandler)附加到map上-它将存储一个 L.TiltHandler实例命名为map.tilt，然而，更常见的将handler附加在map上的方法是使用addInitHook：

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

Handler可以被map.tilt.enable()启用，也可以被map.tilt.disable()禁掉。

根据event的类型，map handler程序可以将事件侦听器附加到文档、窗口或L.map的容器上。

你已经知道control了，在左上角的缩放控制，左下角的比例尺显示，右上角的图层切换。他们的核心是，一个L.Control是一个HTML元素在map容器里面是在静态位置上。
创建一个Control，简单继承L.Control，实现onAdd()和onRemove()即可。这些方法与L.Layer子类类似（无论何时control在map上加载移除时，这些方法将运行），除了onAdd()方法必须返回代表control的HTMLElement实例，向map中添加元素是自动完成的，删除它也是自动完成的。
用户自定义加水印的例子，只是一张图片：

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，它有两个按钮)，您必须创建整个元素的层次结构，并返回最顶层的容器。

来源：oschina

链接：https://my.oschina.net/u/560237/blog/3217842

标签

handler

Handlers与Controls

Handlers