Question

有没有办法将自定义HTML注入图层组和图层控件？

在我们的应用程序中，我们已经实现了滑块（输入：范围）来调整不透明度设置，并且显而易见的是，其控制容器内部的基础层的专用滑块是有意义的。没有选项或参数来修改此控件：

existing layer group control

理想情况下，我们希望在此组和图层控件中创建自定义滑块（显然，我们的基础层＆＃39;控制组仅限于一组图层选项）：

example of what we'd like to achieve

感谢您的帮助！

Answer 1

不使用默认代码。

但是，您可以扩展图层控件并创建子类，添加一些额外的功能，例如：

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!!';
  }
});

请参阅此{a working demo here。

如果这令人困惑，请阅读source code for src/control/Control.Layers.js和创建插件的Leaflet tutorials。

Answer 2

虽然可能不是很优雅，但只是为空div创建一个唯一的className，并使用document.createElement（'input'）附加HTML对象将起作用，如下例所示：

https://playground-leaflet.rhcloud.com/mogo/1/edit?html,console,output

Answer 3

如果您不想弄乱扩展的传单类（我尝试了IvanSanches的建议，但对我没有用），尽管我不知道这是否正是您所希望的，但还有另一种可能的解决方案对于，但是当我想为传单层创建“自定义容器”时，它对我来说效果很好。只需使用少量CSS即可删除/替换图层控件的传单样式

创建已有的L.Control.Layers
创建基本的L.Control图层“父级”以充当滑块和图层控件的容器
将滑块（和其他任何自定义元素）添加为父容器中的子元素
将图层控件添加为该容器中的另一个子对象
在父图层上禁用点击传播（否则，当您单击滑块时，它将进入下面的地图）
使用CSS从图层控件中删除传单样式

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

需要围绕CSS进行处理以使其正确查找
当然，这看起来很奇怪，因为“ layerControl”具有其自身的样式，这些样式是根据传单的CSS设置的。您需要在自己的CSS中调整样式以解决此问题。

通常只需删除传单容器样式

#layer-control-id{
  margin: 0px;
  padding: 0px;
  border: 0px;
  background: none;
  box-shadow: none;
}

希望这会有所帮助并解决您的问题。

是否可以将自定义HTML添加到传单图层组和图层控件

3 个答案: