サイドバーにリーフレットレイヤーコントロールを追加する

Question

私はLeaflet sidebar V2プラグインを使用していますが、リーフレットレイヤーコントロールメニューをサイドバーに入れることが可能かどうか疑問に思っていますか？どんな助けでも大歓迎です！ありがとう！

Answer 1

ちょうどthisヒントを使用してください。マップコンテナからL.control要素を削除し、それを新しい親に追加します。これをサイドバーのためにまっすぐに行うことができます。

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

、この解決策はうまくいきました。