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

Question

我有一个 geojson 特征集合。每个功能都有一个子类别属性和一个主类别属性（例如 "Subcategory"："Brown regional airport"，"Category"："Aviation"）

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

这是一个实例：[demo link]

问题是，在我的真实案例场景中，我有很多类别和子类别，图层控件中一次显示的图层太多了。因此，我需要某种 accordion/drop 向下菜单来一次只显示一个类别的子类别，如下图所示：

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

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

Answer 1

我建议将这些标签包装在默认情况下使用 display: none 的 ul 中。然后你可以写一些 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);
});

添加图层后将为每个组添加一个 label/radio 组合，这将控制（通过以下 CSS）子类别的 display/hide。

.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/

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

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

Leaflet: Grouped layers and accordion menu - How to implement?

javascript

user-interface

leaflet

mapbox