图层控制中的输入元素位于
.leaflet-control-layers-overlays
$(".leaflet-control-layers-overlays").prepend("<label>可用图层</label>");
您还可以为其指定一个类并添加一些样式。这不是一个好的解决方案,但希望对您有所帮助。
#Leaflet1.7
这是一个使用原生JS的最简解决方案。
// 0. Your's WMS layers:
var fooLayers = {
"Aaa" : ign_ari,
"Bbb" : ign_cri,
"Ccc" : ign_grvi
};
// 1. start with Control
var fooLegend = L.control({position: 'topleft'});
fooLegend.onAdd = function () {
var div = L.DomUtil.create('div');
// here is Your part:
div.innerHTML = '<span class='your-class'>Your Title Text</span>';
return div;
};
fooLegend.addTo(map);
var fooCtrl = L.control.layers(fooLayers, null,
{collapsed : false, position: 'topleft'})
.addTo(map);
//
// Nothing unusual, until now:
var fooCtrlDiv = fooCtrl.getContainer();
fooCtrlDiv.insertBefore(fooLegend.getContainer(), fooCtrlDiv.firstChild);
您可以为控件分配一个标题属性。以下是当前项目中明显不完整的代码片段:
// Add settings button
var atlasMapSettings = L.Control.extend({
options: {
position: 'topleft'
},
onAdd: function (map) {
var control = L.DomUtil.create('div', 'leaflet-bar leaflet-control leaflet-control-custom atlas-settings-control closed');
var icon = L.DomUtil.create('div', 'fa fa-gear closed', control);
var content = L.DomUtil.create('div', 'control-content empty', control);
$(icon).attr('title', 'Map settings');
collapsed: true
,那么您需要深入DOM树中进行一些挖掘:const fooCtrlDiv = fooCtrl.getContainer();
fooCtrlDiv
.querySelector('.leaflet-control-layers-list')
.insertBefore(
fooLegend.getContainer(),
layerControlDiv.querySelector('.leaflet-control-layers-list').firstChild
);
collapsed: true
一起使用的解决方案 :) - Robin Wieruch