缩放传单地图时，SVG圆不会重新定位 [英] SVG circles don't get repositioned when zooming leaflet map

问题描述

我正在使用d3在传单地图上添加svg圆. 我的小提琴在这里 http://jsfiddle.net/nextstopsun/C3U8g/

I'm using d3 to add svg circles on leaflet map. My fiddle is here http://jsfiddle.net/nextstopsun/C3U8g/

我已经添加了reset()函数来映射viewreset事件，以计算包含所有圆的svg元素的转换.在地图viewreset事件上调用此函数.

I've added a reset() function to map viewreset event to calculate transformation for svg g element containing all circles. This function is called on map viewreset event.

    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/ )

(The code is originally from this example http://bost.ocks.org/mike/leaflet/)

我可以看到正在重新计算g元素的转换参数，但是没有重新定位圆(或者错误地重新定位了圆)并且它们与地图图块图层没有对齐. 不过，平移地图时一切正常. 要正确调整缩放比例，必须更改什么?

I can see that the transformation parameters for g element are being recalculated, but circles aren't repositioned (or they are repositioned wrong) and don't align with the map tilelayer. Everything is ok when paning map, though. What has to be changed for proper repositioning on zooming?

推荐答案

除了转换包含圆圈的g元素之外，还需要重置圆圈本身的坐标:

In addition to transforming the g element that contains the circles, you also need to reset the coordinates of the circles themselves:

circles.attr("cx", function (d) { return project([d.m4312, d.m4311])[0]; })
       .attr("cy", function (d) { return project([d.m4312, d.m4311])[1]; });

更新了jsfiddle 此处.

Updated jsfiddle here.

这篇关于缩放传单地图时，SVG圆不会重新定位的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！