宣传单：分组图层和手风琴菜单 - 如何实施？

Question

我有一个geojson featurecollection。每个功能都有一个Subcategory属性和一个主要的Category属性（例如“Subcategory”：“Brown Regional airport”，“Category”：“Aviation”）

我可以使用Leaflet.groupedlayercontrol Leaflet插件将子类别分组为主类别。

以下是一个实例：[ demo link ]

问题在于，在我的实际情况中，我有很多类别和子类别，这是在图层控件中一次显示太多层。因此，我需要某种手风琴/下拉菜单，一次只显示一个类别的子类别，如下图所示：

有没有人对如何处理我的问题有任何建议？这样的事情是理想的：

我是否会使用Javascript将手风琴模板注入DOM？新手在这里，所以寻找提示和建议。谢谢！

Answer 1

我建议将这些标签包装在ul内，默认情况下为display: none。然后，您可以编写一些javascript并使ul基于可见的用户选择。

如果你为我提供一个codepen / jsfiddle，我会非常乐意提供帮助。

同时你可以用我的形象看看我的意思。

JS将与之相似（这是非常基础的）：

if ($('.leaflet-control-layers-group-selector').is(":checked")) {
  // Match the closest ul and call #show
} else {
  // Match the closest ul and call #hide
}

用箭头改变CSS，一切都相当容易。

Answer 2

问题是插件没有提供改变创建的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',将允许每个类别自行打开/关闭。