将Leaflet图层控件添加到侧边栏 [英] Adding Leaflet layer control to sidebar

问题描述

我正在使用 Leaflet侧栏V2 插件，我想知道是否可以将传单层控制菜单放入侧边栏？任何帮助是极大的赞赏！谢谢！

I'm using the Leaflet sidebar V2 plugin and am wondering if it is possible to put a leaflet layer control menu into the sidebar? Any help is greatly appreciated! Thanks!

推荐答案

只需使用这个提示。它从地图容器中删除L.control元素并将其添加到新父级。您可以直接向侧边栏执行此操作。

Just use this hint. It removes the L.control element from the map container and adds it to a new parent. You can do this for the sidebar straight forward.

HTML：

 <div id="sidebar" class="sidebar collapsed">
   <div class="sidebar-tabs">
    <ul role="tablist">
     <li>....</li>
     <li>....</li>
    </ul>
 </div>
 <div class="sidebar-content">
   <div class="sidebar-pane" id="">  
    <h1 class="sidebar-header">...</h1>
    <div id="example"> <!--Here the layer control menu will be added--></div>    
 </div>
</div>

JS：

var layer = L.control.layers(baseMaps, overlayMaps).addTo(map);

  var htmlObject = layer.getContainer();
  var a = document.getElementById('example')
  function setParent(el, newParent){
    newParent.appendChild(el);
  }
  setParent(htmlObject, a);

对我来说，这个解决方案效果很好。

For me, this solution worked well.

这篇关于将Leaflet图层控件添加到侧边栏的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！