javascript - 扩展 L.Control.Layers 悬停失败

Question

Fiddle

我想延长L.Control.Layers因为我希望能够通过选项更改图标。这是到目前为止的元素:

var layers = L.Control.Layers.extend({

    options: {
        position: 'topright',
        icon: 'podcast',
    },

    initialize: function (options) {
        L.setOptions(this, options);
        L.Control.Layers.prototype.initialize.call(this, options);
    },

    onAdd: function (map) {
        var container = L.Control.Layers.prototype.onAdd.call(this, map);
        container.classList.add('st-control-layers');
        container.childNodes[0].innerHTML = '<center><span style="margin-top:4px;" class="fa fa-2x fa-' +
                                            this.options.icon + '"></span></center>';
        return container;
    },
});

不修改<a>的事件childNode，当鼠标悬停在控件上时，它会折叠，但不显示图层列表:

var stLayerControl = layers(null, {'one': L.layerGroup()}).addTo(this);  // 'this' is a map 

检查元素时，我可以看到 <form>存在并且有 3 个 div 为正常 Control.Layers然而，最后一个 div(类为 leaflet-control-layers-overlays )应该具有复选框数组，但没有子节点。

也许我需要在我的 onAdd() 中调用父级上的其他内容方法，但我不确定它会是什么。

Answer 1

我没有将收到的图层传递给父级，这就是列表为空的原因。这是扩展控件的工作版本:

var layers = L.Control.Layers.extend({

    options: {
        position: 'topright',
        icon: 'podcast',
    },

    initialize: function (baseLayers, overlays, options) {
        L.setOptions(this, options);
        L.Control.Layers.prototype.initialize.call(this, baseLayers, overlays, options);
    },

    onAdd: function (map) {
        var container = L.Control.Layers.prototype.onAdd.call(this, map);
        container.classList.add('st-control-layers');
        container.childNodes[0].innerHTML = '<center>' +
                                            '<span style="margin-top:4px;" class="fa fa-2x fa-' +
                                            this.options.icon + '"></span>' +
                                            '</center>';
        return container;
    },
});

module.exports = {
    Layers: layers,
    layers: function(baseLayers, overlays, options) {
        return new layers(baseLayers, overlays, options);
    },
};