将 SVG 带到传单的前面

Question

我正在尝试在我的传单地图顶部添加一个 SVG 元素，但它被地理 JSON 标记隐藏了，如下所示： 标记下的 SVG

这是我的代码，所以 SVG 元素在地图的前面

var svg = d3.select(this.map.getPanes().overlayPane).append('svg')
    .attr({
        "width": width,
        "height": height 
        })
    .on('click',function(){
        svg.remove();
});

我尝试过这种方法，但无济于事：

d3.selection.prototype.moveToFront = function(){
    return this.each(function(){
        this.parentNode.appendChild(this);
    });
};
svg.moveToFront();

我想我可能需要 .hide（） SVG 下方的标记，但不确定这是否是正确的方向。谢谢！

Answer 1

如果有人偶然发现这一点，我找到了解决我问题的另一种方法。

如果我使用 .popupPane（），SVG 元素会像我想要的那样覆盖标记，但它也会奇怪地移动我的按钮。相反，我所做的是在我的html中添加另一个<div>元素（id ="map-nav"）。然后我编辑了我的 CSS，所以我的"map"div 是相对的，"map-nav"是绝对的，当我将我的 SVG 添加到我的地图时，将其附加到"map-nav"而不是"map"。下面是代码示例：

.HTML

<div id="map" style="height:100%; width:100%;margin: 0"> </div>
        <div id="map-nav"></div>
        <script type="text/javascript">

JavaScript

//Define d3 margin
var margin = {top: 20, right: 10, bottom: 100, left: 40},
    width = 700 - margin.right - margin.left,
    height = 100 - margin.top - margin.bottom;
svg = d3.select("#map-nav").append('svg')
        .attr({
            "width": 500,
            "height": 500, 
        })
        .on('click',function(){
            svg.remove();
        });

.CSS

svg {
    position: absolute;
    background-color:white;
    margin-top:auto;
    margin-bottom:auto;
    margin-left:auto;
    margin-right: auto;
    display: block;
}
map {
    width: 100%;
    height: 300px;
    position: relative;
}
map-nav {
    position: absolute;
    left: 60px;
    top: 10px;
    width: 100px;
    height: 100px;
    z-index: 2;
}

这是它现在的样子希望能帮助那些可能也为此苦苦挣扎的人！

Answer 2

您可以使用

L.DomUtil.toFront和L.DomUtil.toBack

此外，您必须使用L.SVG层将窗格设置为"标记窗格"