Question

我正在使用一个名为Leaflet.groupedlayercontrol的Leaflet插件，并尝试弄清楚如何将这个groupslayercontrol插件放在HTML div中，以便我可以更好地管理它。以下代码和PLNKR here。

我的假设叠加对象如下所示：

var map = new L.Map('mapbox', {
'center': [39.76185, -104.881105],
'zoom': 9,
'layers': [
    L.tileLayer('//{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png', {
        attribution: 'text here'
    })
]});

var pizza = L.marker([39.8443948439646, -104.97711181640625]).addTo(map);
var hamburger = L.marker([39.97291055131899, -105.08697509765625]).addTo(map);
var pie = L.marker([40.111688665595956, -104.776611328125]).addTo(map);

var overlaysOptions = {
      groupCheckboxes: true,
      collapsed: false,
      position: 'topright'
};

var overlays = {
  "Category One":{
    "Pizza": pizza,
    "Hamburger": hamburger
  },
  "Category Two": {
    "Pie": pie
  }
};


L.Control.Overlays = L.Control.extend({

onAdd: function (map) {
    var container = L.DomUtil.create('div', 'control-overlays');
        container.innerHTML = L.DomUtil.create('<div class="panel panel-default"><div class="panel-heading" id="headingOne"><h4 class="panel-title"><a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne">Heading Title</a></h4></div><div id="collapseOne" class="panel-collapse collapse in"><div class="panel-body">Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.</div></div></div>', container);

    return container;
},

});

//L.control.groupedLayers(null, overlays, overlaysOptions).addTo(map);
var controlOverlays = new L.Control.Overlays(overlays, overlaysOptions).addTo(map);

任何人都知道如何在HTML div中获取groupledlayers插件，以便我可以使用它？谢谢！

Answer 1

在开始之前需要解决几个错误。首先，您的填充文本包含一个撇号（单词“have not”），需要进行转义，否则会使其后的所有内容无效。其次，第二次在自定义控件功能中调用它时，错误地使用L.DomUtil.create。如果您要将该HTML添加到container div，则可以使用container.innerHTML = '<div class="panel panel-default"> [etc. etc...]'

修复这些内容后，您会看到分组图层控件和自定义控件都显示在地图上。为了让一个人进入另一个，我遵循Jeff Mitzelfelt在this Google Group discussion中发布的技巧。基本上：创建图层控件（分配给名为var）并将其添加到地图中;创建另一个div（带有id），您可以在其中放置图层控件;从原始控件中删除容器;然后使用其id将图层控件附加到新div。

以下内容将分组控件放在引导程序面板中：

L.Control.Overlays = L.Control.extend({
    onAdd: function (map) {
        var container = L.DomUtil.create('div', 'control-overlays');
            container.innerHTML = '<div class="panel panel-default"><div class="panel-heading" id="headingOne"><h4 class="panel-title"><a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne">Heading Title</a></h4></div><div id="collapseOne" class="panel-collapse collapse"><div class="panel-body" id ="controlGoesHere">Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven\'t heard of them accusamus labore sustainable VHS.</div></div></div>';
        return container;
    }
});

var groupControl = L.control.groupedLayers(null, overlays, overlaysOptions).addTo(map);
var controlOverlays = new L.Control.Overlays(overlays, overlaysOptions).addTo(map);

groupControl._container.remove();
document.getElementById('controlGoesHere').appendChild(groupControl.onAdd(map));

分组控件在奇怪的状态下开始（当所有项目都打开时关闭组），但我认为这只是调整控件的一些选项的问题。

编辑：以下是这些更改的更新内容：

http://plnkr.co/edit/6gtZIsUPVg0WCJ3WObNw?p=preview

Leaflet：使用Grouped Layers Control插件扩展自定义控件

1 个答案: