将 Leaflet 图层控件添加到侧边栏

2022-01-12 00:00:00 sidebar leaflet javascript

我正在使用 Leaflet sidebar 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!

推荐答案

只需使用 this 提示.它从地图容器中删除 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.

相关文章