默认代码无法实现此功能。
但是,您可以扩展图层控件并创建一个子类,增加一些额外的功能,例如:
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;
}
希望这对您有所帮助并解决了您的问题。