自定义图层控制对话框

Question

默认情况下，图层控制对话框如下所示：

（来自 https://leafletjs.com/examples/layers-control/example.html）

如果我想让它看起来更像怎么办？:

我该怎么做？

Answer 1

通过检查 DOM，您似乎想在 .leaflet-control-layers-list 内添加您的自定义元素，在 .leaflet-control-layers-overlays.

之前

使用 vanilla JS，您可以使用 .insertBefore 方法实现此目的，如下所示：

let layerControlContainer = document.querySelector('.leaflet-control-layers-list');
let layerOverlays = document.querySelector('.leaflet-control-layers-overlays');

let myInsert = document.createElement('span');
myInsert.innerHTML = 'Overlays';

layerControlContainer.insertBefore(myInsert, layerOverlays);

检查fiddle：https://jsfiddle.net/9j7pveq0/

Answer 2

另一种解决方案是使用 insertAdjacentHTML:

document.getElementsByClassName("leaflet-control-layers-overlays")[0].insertAdjacentHTML("beforeBegin","<div>my title</div>")

自定义图层控制对话框

customizing layer control dialog

leaflet