リーフレットサークルZ-インデックス

Question

私はLeafletを使って経路を描いています。

ルートはフレームで分割され、各フレームは円でマークされ、ホバーイベントではフレームがルート上で不透明オーバーレイとして表示されます。

問題は、円がフレームオーバーレイの後ろに描かれているということですが、私は（z軸上）のすべての上にそれをしたいです。

私は見つけたものすべてを検索して試しましたが、それを上に置くことはできません。何ができますか？

これは私がやっているものです：

L.geoJson(route, { 
    style: function(feat) { 
    return { 
     weight: 10, 
     opacity: 1, 
     cursor: 'pointer', 
     color: 'transparent', 
     className: 'journey-frame'  
    } 
    }, 
    onEachFeature(feat, layer) { 
    var c = layer.getBounds().getCenter() 
    var color = getColor() 
    var circle = L.circle(c, { 
     color: 'black', 
     weight: 2, 
     radius: 3, 
     fill: true, 
     fillColor: color, 
     fillOpacity: 1, 
     className: 'frame-circle', 
     zIndexOffset: 1000 // first attempt to place circle on top. Not working 
    }) 

    // second attempt. Not working 
    circle.bringToFront() 

    // Change layer color to show frame 
    layer.on('mouseover', function() { 
     layer.setStyle({color: '#ddd', opacity: 0.8}); 
    }) 

    // Change layer color to hide frame 
    layer.on('mouseout', function() { 
     layer.setStyle({color: 'transparent'}); 
    }) 
    } 
}).addTo(mymap) 

私のCSSファイルで

.frame-circle { 
    z-index: 1000; /* tried also this but still nothing */ 
} 

Answer 1

あなたがそれを使う層がマップ上にすでに存在したらあなたはすなわち外（のみbringToFront()を使用することができますonEachFeature機能）。

あなたのケースでは、L.geoJson().addTo(map)を待ってから、レイヤー（円）を取得する必要があります。今度はbringToFront()を使用できます。

理由は非常に簡単です。このメソッドは、レイヤの親ノードで末尾に（またはbringToBack()の場合は最初の子として）レイヤを追加するために機能します。レイヤーがマップに追加されない場合は、DOMに挿入されず、並べ替えられる（追加/挿入される）親コンテナはありません。