是否可以将自定义HTML添加到传单图层组和图层控件 [英] Is it possible to add custom HTML to leaflet Layer Groups and Layers Control

问题描述

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

Is there any way to inject custom HTML into the layer group and layers control?

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

In our application we've implemented sliders (input:range) to adjust opacity settings and it's becoming obvious that a dedicated slider for the base layer inside of its control container makes sense. There is no option or parameter to modify this control:

现有图层组控件

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

Ideally we want to create a custom slider inside this group and layer control (obviously our 'base layer' control group is limited to a single set of layer options):

我们想要实现的例子

感谢您的帮助！

推荐答案

不使用默认代码。

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

You can, however, extend the layers control and create a subclass, adding a bit of extra functionality, e.g.:

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

看到这个aa 工作演示。

如果这令人困惑，请阅读 src / control / Control.Layers.js的源代码 ，以及有关创建插件的宣传单教程。

If this is confusing, read the source code for src/control/Control.Layers.js, and the Leaflet tutorials on creating plugins.

这篇关于是否可以将自定义HTML添加到传单图层组和图层控件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！