Question

我正在尝试在我的Leaflet地图上添加一个SVG元素，但它被geoJSON标记隐藏起来：SVG under markers

这是我的代码，因此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元素将覆盖我想要的标记，但它也奇怪地移动了我的按钮。我做的是将另一个<div>元素添加到我的html（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;
}

Here is what it looks like now 希望能帮助那些也可能为此而斗争的人！

Answer 2

您可以使用L.DomUtil.toFront和L.DomUtil.toBack

还必须使用L.SVG层将pane设置为'markerPane'

将SVG带到传单前面

2 个答案: