[英]SVG control not visible on top of Leaflet.js
I'm using Leaflet 0.7.1 and want to draw a radial menu (like openstreetmap's iD editor) on top using d3. 我正在使用Leaflet 0.7.1,并希望使用d3在顶部绘制一个径向菜单(如openstreetmap的iD编辑器)。 Some examples I found use Leaflet's overlayPane to append the svg element to:
我发现一些示例使用Leaflet的overlayPane将svg元素附加到:
var svgContainer= d3.select(map.getPanes().overlayPane).append("svg");
On mouseclick, I add the menu and reposition it to the screen xy coords: 在mouseclick上,我添加菜单并将其重新放置在屏幕的xy坐标上:
map.on('contextmenu', function(e) {
console.log('contextmenu()');
var tooltip;
var center = [e.layerPoint.x, e.layerPoint.y];
var menu = svgContainer.append('g')
.attr("class", 'leaflet-zoom-hide')
.attr('class', 'radial-menu')
.attr('transform', 'translate(' + center + ')')
.attr('opacity', 0);
menu.transition()
.attr('opacity', 1);
menu.append('path')
.attr('class', 'radial-menu-background')
.attr('d', 'M' + r * Math.sin(a0) + ',' +
r * Math.cos(a0) +
' A' + r + ',' + r + ' 0 ' + 0 + ',0 ' +
(r * Math.sin(a1) + 1e-3) + ',' +
(r * Math.cos(a1) + 1e-3)) // Force positive-length path (#1305)
.attr('stroke-width', 50)
.attr('stroke-linecap', 'round');
});
Somehow, the SVG paths get drawn (this is visible in the Chrome Inspector) but are behind the map object. 不知何故,绘制了SVG路径(这在Chrome Inspector中可见),但位于地图对象的后面。 When I 'drag' the SVG element just below the body tag in Inspector, I can see the circle paths.
当我在Inspector中的body标签下方拖动SVG元素时, 可以看到圆的路径。
Any ideas on how I can draw SVG 'menu' elements on top of Leaflet? 关于如何在Leaflet上绘制SVG“菜单”元素的任何想法?
Thanks!! 谢谢!!
See this fiddle for a demo. 看到这个小提琴演示。 Right click or hold to add an invisible element.
右键单击或按住可添加不可见的元素。
ps. PS。 I asked this question on gis.stackexchange.com , too.
我也在gis.stackexchange.com上问了这个问题 。
Solved. 解决了。 A colleague pointed out that the SVG container had no dimensions.
一位同事指出,SVG容器没有尺寸。 Giving it the appropriate width and height proved to be the answer:
给出适当的宽度和高度证明是答案:
svgContainer.attr("width", width).attr("height", height)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.