javascript - 传单:分组图层和 Accordion 菜单 - 如何实现？

Question

我有一个 geojson 特征集合。每个功能都有一个子类别属性和一个主类别属性(例如“子类别”:“棕色支线机场”、“类别”:“航空”)

我能够使用Leaflet.groupedlayercontrol将子类别分组到主类别中。传单插件。

这是一个实例:[ demo link ]

问题是，在我的实际案例场景中，我有很多类别和子类别，并且层数太多，无法在图层控件中同时显示。因此，我需要某种 Accordion /下拉菜单来一次仅显示一个类别的子类别，如下图所示:

有人对解决我的问题有什么建议吗？像这样的东西是理想的:

我会使用 Javascript 将 Accordion 模板注入(inject)到 DOM 中吗？这里是新手，所以寻找提示和建议。谢谢!

Answer 1

问题是该插件没有提供更改创建的 html 模板的方法。

所以我通过 jQuery 动态改变 DOM，并使用 CSS 来实现技巧。

所以添加

$('.leaflet-control-layers-group-label').each(function(index){
    var self = $(this),
        trigger = $('<label>', {
        html: '▼',
        class:'trigger',
        for: 'dropdown-trigger-' + index
      }).insertBefore(self),
      radio = $('<input>', {
        type : 'radio',
        class: 'trigger-radio',
        name : 'dropdown-control',
        id: 'dropdown-trigger-' + index
      }).insertBefore(trigger);
});

添加图层后将为每个组添加一个标签/单选组合，它将控制(通过以下 CSS)子类别的显示/隐藏。

.leaflet-control-layers .leaflet-control-layers-group-label{
  padding-left:20px;
  display:block
}
.leaflet-control-layers label{
  padding-left:40px;
  padding-right:10px;
  display:none;
}
.leaflet-control-layers label.trigger{
  position:absolute;
  left:0;
  padding:0;
  margin:0;
  display:block;
  cursor:pointer;
}
.leaflet-control-layers .trigger-radio{display:none;}
.leaflet-control-layers .trigger-radio:checked ~ label{display:block;}

演示地址:https://jsfiddle.net/gaby/La77L8L9/2/

<小时/>

注意。它目前使用隐藏的单选按钮来打开/关闭子类别(因此一次只能打开一个子类别，并且在选择另一个子类别之前无法关闭)。将 type : 'radio', 行更改为 type : 'checkbox', 将允许每个类别自行打开/关闭。