在leaflet的图层控制中添加标题

Question

有没有一种方法可以向leaflet图层控制添加标题？例如一行文本，比如“可用图层”。最好还能在文本中添加链接。

我以为这很简单，但是我找不到解决方案。我尝试了类似于这个问题（添加“虚拟”图层后，单选按钮/复选框仍然存在）和这个问题（在图层结尾处添加div，似乎比我的需求更复杂）。不幸的是，由于我的经验水平，我无法将它们联系起来。有什么建议吗？

- Evan

Answer 1

图层控制中的输入元素位于

.leaflet-control-layers-overlays

$(".leaflet-control-layers-overlays").prepend("<label>可用图层</label>");您还可以为其指定一个类并添加一些样式。这不是一个好的解决方案，但希望对您有所帮助。

- Saurabh Yadav

Answer 2

#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);

- Mruk

---

这个可行，谢谢。现在正在寻找一个能够与 collapsed: true 一起使用的解决方案 :) - Robin Wieruch

Answer 3

您可以为控件分配一个标题属性。以下是当前项目中明显不完整的代码片段：

// 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');

- SteveM

---

好像括号不匹配？我不确定第一个应该在哪里关闭。 - Evan

这是一个部分示例，取决于扩展控件对象，而不仅仅是添加基本控件。（我意识到这更加复杂，可能在这里并不是非常有帮助，在二次考虑后。）更多关于自定义控件的内容：http://odoe.net/blog/custom-leaflet-control/ - SteveM

Answer 4

Leaflet 1.7：对@Mruk的回答进行补充：如果您想使用collapsed: true，那么您需要深入DOM树中进行一些挖掘：

const fooCtrlDiv = fooCtrl.getContainer();

fooCtrlDiv
  .querySelector('.leaflet-control-layers-list')
  .insertBefore(
    fooLegend.getContainer(),
    layerControlDiv.querySelector('.leaflet-control-layers-list').firstChild
  );

- Robin Wieruch