我正在使用d3在传单地图上添加svg圆圈.
我的小提琴在这里 http://jsfiddle.net/nextstopsun/C3U8g/
我的小提琴在这里 http://jsfiddle.net/nextstopsun/C3U8g/
我添加了一个reset()函数来映射viewreset事件,以计算包含所有圆的svg g元素的转换.在map viewreset事件上调用此函数.
svg.attr("width",topRight[0] - bottomLeft[0])
.attr("height",bottomLeft[1] - topRight[1])
.style("margin-left",bottomLeft[0] + "px")
.style("margin-top",topRight[1] + "px");
g.attr("transform","translate(" + -bottomLeft[0] + "," + -topRight[1] + ")");
(代码最初来自此示例http://bost.ocks.org/mike/leaflet/)
我可以看到g元素的变换参数正在重新计算,但圆圈没有重新定位(或者它们重新定位错误)并且不与地图tilelayer对齐.
尽管如此,一切都很好.
为缩放进行适当的重新定位需要改变什么？
解决方法
除了转换包含圆圈的g元素之外,您还需要重置圆圈本身的坐标：
circles.attr("cx",function (d) { return project([d.m4312,d.m4311])[0]; })
.attr("cy",d.m4311])[1]; });
更新了jsfiddle here.
