传单:使用分组图层控件插件扩展自定义控件

Leaflet: Extending custom control with Grouped Layers Control plugin

本文关键字：控件 插件 扩展 自定义控件 图层 传单      更新时间：2023-09-26

我正在使用一个名为Leaflet.groupedlayercontrol的传单插件，并试图弄清楚如何将这个groupedlayercontrol插件放置在HTMLdiv中，以便我可以更好地管理它。下面的代码和 PLNKR 在这里。

我的假设覆盖对象如下所示：

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);

有人知道如何在 HTMLdiv 中获取分组图层插件以便我可以使用它吗？谢谢！

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

修复这些内容后，您将看到分组图层控件和自定义控件都显示在地图上。为了得到另一个内部，我遵循了Jeff Mitzelfelt 在Google群组讨论中发布的技巧。基本上：创建图层控件(分配给命名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));
分组控件以

奇怪的状态开始(组关闭，而其所有项目都打开(，但我认为这只是调整控件的一些选项的问题。

编辑：这是包含这些更改的更新 plunk：

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

相关文章：