理想情况下，我们想在这个组和图层控制中创建一个自定义滑块（显然，我们的“基础图层”控件组仅限于单组图层选项）：
感谢任何帮助！默认代码无法实现此功能。
但是，您可以扩展图层控件并创建一个子类，增加一些额外的功能，例如：
L.Control.Layers.WithSomethingExtra = L.Control.Layers.extend({
_initLayout: function() {
L.Control.Layers.prototype._initLayout.call(this);
L.DomUtil.create('div', 'leaflet-control-layers-separator', this._form);
var myThing = L.DomUtil.create('div', 'some-extra-thing', this._form);
myThing.innerHTML = 'My custom thing inside the layers control!!';
}
});
在这里可以看到一个可工作的演示。
如果您感到困惑，请阅读src/control/Control.Layers.js的源代码，以及有关创建插件的Leaflet教程。
虽然可能不是非常优雅，但为您的空div创建唯一的className，并使用document.createElement('input')附加HTML对象将起作用，就像这个例子所示：
https://playground-leaflet.rhcloud.com/mogo/1/edit?html,console,output
如果您不想破坏扩展leaflet类（我尝试了IvanSanches的建议，但对我没有用），还有另一种可能的解决方案，虽然我不知道它是否正是您所希望的，但当我想要为leaflet图层创建“自定义容器”时，它对我很有效。这将需要少量CSS来删除/替换图层控件的leaflet样式
// FIRST DEFINE YOUR "layerControl" AND ADD IT TO THE MAP
// of course this assumes you already created the "baseMaps" object
// and in your case are not adding overlayLayers to this control
// so you can set that argument to "undefined"
let layerControl = L.control.layers(baseMaps, undefined, {
collapsed: false // you won't want this layer to be collapsed
}).addTo(map);
// ******** !! MOST IMPORTANT PART 1.1 !! ********
// GRAB A REFERENCE TO THE DIV THAT CONTAINS THE "layerControl"
let layerControlDiv = layerControl.getContainer();
// you can set an id for it if you want to use it to override the CSS later
layerControlDiv.setAttribute("id", "layer-control-id");
// CREATE A BASIC CONTROL LAYER THAT YOU WILL USE AS A PARENT/CONTAINER FOR THE "layerControl"
// Set its position to where you want it to appear on the map
let layerControlParentLayer = L.control({
position: "topright"
});
// DEFINE THE PARENT LAYER'S ".onAdd" FUNCTION AND APPEND THE "layerControl" SOMEWHERE WITHIN IT
// This is where the magic happens. Provides similar functionality to IvanSanches's solution
layerControlParentLayer.onAdd = function(map){
// Create the main div that will hold all your elements
let parentDiv = L.DomUtil.create("div");
// let parentDiv = L.DomUtil.create("div", "layer-control-parent-class"); //use this create method if you want to give it a class
// you can set an id for it if you want to use it for CSS
parentDiv.setAttribute("id", "layer-control-parent-id");
// TEMPORARILY: set the background color to be white so the boundaries of the parentDiv are visible
// you'll actually want to style the whole thing in your CSS code and remove this line
parentDiv.setAttribute("style", "background-color: white;");
// create another div to hold your slider and append it to your parentDiv
let sliderDiv = L.DomUtil.create('div', 'slider-div-class', parentDiv);
// set the innerHTML to be the HTML for your slider
sliderDiv.innerHTML = '<input type="range" min="0" max="100" value="0" id="slider-id" class="slider-class" >';
// OPTIONAL: create a separator if you want and append it to the your parentDiv
L.DomUtil.create('div', 'leaflet-control-layers-separator', parentDiv);
// ******** !! MOST IMPORTANT PART 1.2 !! ********
// now you can append the overlayControlDiv that holds your overlay layer controls
parentDiv.appendChild(layerControlDiv);
// ...
// add more stuff after the layerControlDiv if you want
// ...
// ******** !! MOST IMPORTANT PART 2 !! ********
// we don't want clicks on this layer/div to propagate to the layers below,
// otherwise our custom slider will be hard to interact with
L.DomEvent.disableClickPropagation(parentDiv);
// return the parentDiv to be used as the div for your layerControlParent Layer
return parentDiv;
};
// add the Layer to the map
layerControlParentLayer.addTo(map);
#layer-control-id{
margin: 0px;
padding: 0px;
border: 0px;
background: none;
box-shadow: none;
}
希望这对您有所帮助并解决了您的问题。