Question

我之前没有在这里发帖，但已经广泛阅读，所以我希望我不违反任何规则......

我试图在传单地图上放置一种掩模图像（一个带有透明圆孔的黑色正方形）;使它看起来像旧示波器屏幕上显示的圆形地图;-)。绝对位于顶部：0px;底部：0px;。固定，独立于缩放或平移。

我可以显示图像，在某些情况下我甚至可以让地图平移和放大透明孔，我甚至可以按X关闭标记上的弹出窗口，但无论我尝试什么我单击或触摸时，切勿设置标记弹出窗口。

我尝试过多种组合：使用PNG图像或原始SVG代码，在div中改变z-index。我尝试在同一容器中，在不同的容器中，甚至将其添加到传单控制窗格中：

document.getElementsByClassName("leaflet-control-container")[0].innerHTML += '\
    <svg style="position: absolute; top:  0px; left: 0px; height: 360px; width: 360px;">\
        <g>\
            <path style="fill-rule: evenodd; fill: black; stroke: black; stroke-width: 0"\
                  d="M 0,0 L 360,0 L 360,360 L 0,360 z M 180,10 A 170,170 0 0,1 180,350 A 170,170 0 0,1 180,10 z"></path>\
        </g>\
    </svg>';

图像显示正常，但与Leaflet的交互已损坏，无法进行弹出交互。

如果我将svg的z-index设置为-1，则不再显示掩码，但弹出窗口确实出现了。

Answer 1

最简单的方法可能是使用PNG和以下css行：

指针事件：无;

它可以在元素下面进行鼠标操作。

请参阅此处了解IE兼容性和更多信息：Click through a DIV to underlying elements

Answer 2

如果您将地图放在带有border-radius:50%; overflow:hidden的div中，而不是在地图上贴上遮罩，该怎么办？我从来没有和Leaflet合作过，所以我知道在这种情况下它不会起作用。

在Leaflet地图上修复图像

2 个答案: