擴展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個正常的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); 
    }, 
};