在传单中创建事件控件的正确方法是什么？

Question

我也需要创建L.Control子类L.Evented。 include: [ L.Mixin.Events ]工作，但显示警告，它已被弃用，我需要从L.Evented. 但我不能因为我需要继承L.Control. 我想怎么办？

Answer 1

您可以将自己的 L.Evented 混合到您的自定义控件中，如下所示：

var CustomControl = L.Control.extend({
});
L.extend(CustomControl.prototype, L.Evented.prototype);

然后，您可以触发事件并收听它们：

var cc = new CustomControl();
cc.on('myevent', function(s) {
    console.log("event fired");
    console.log(s);
});
cc.fire('myevent', {})

以及基于http://leafletjs.com/examples/extending/extending-3-controls.html#controls的演示（单击 Leaflet 徽标会触发事件）

var CustomControl = L.Control.extend({
});
L.extend(CustomControl.prototype, L.Evented.prototype);

var cc = new CustomControl();
cc.on('myevent', function(s) {
    console.log("event fired");
    console.log(s);
});
cc.fire('myevent', {})

var map = L.map('map', {
    center: [40, 0],
    zoom: 1
});

var positron = L.tileLayer('http://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png', {
    attribution: "CartoDB"
}).addTo(map);

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

        img.src = 'http://leafletjs.com/docs/images/logo.png';
        img.style.width = '200px';

        img.addEventListener('click', ()=> {
            this.fire('myevent');
        });
        this.img

        return img;
    }
});
L.extend(L.Control.Watermark.prototype, L.Evented.prototype);

var mark = new L.Control.Watermark({ position: 'bottomleft' }).addTo(map);
mark.on('myevent', function() {
    console.log('clicked');
})