Question

Fiddle

我想扩展+-------+-----+ | issue | bug | +-------+-----+ | 1 | 6 | | 2 | 7 | | 3 | 8 | +-------+-----+，因为我希望能够通过选项更改图标。这是迄今为止的元素：

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; }, }); childNode，当鼠标悬停在控件上时它会折叠，但不会显示图层列表：

<a>

在检查元素时，我可以看到var stLayerControl = layers(null, {'one': L.layerGroup()}).addTo(this); // 'this' is a map存在并且正常<form>具有3个div，但是，最后一个div（具有类Control.Layers）是一个应该有复选框数组没有子节点。

也许我需要在我的leaflet-control-layers-overlays方法中调用其他内容，但我不确定它会是什么。

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);
    },
};

扩展L.Control.Layers悬停失败

1 个答案: