SVG圆圈;缩放传单地图时不会重新定位

SVG circles don't get repositioned when zooming leaflet map

本文关键字：定位 新定位 地图 圆圈 缩放 单地图 SVG      更新时间：2023-09-26

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

我添加了一个reset（）函数来映射viewreset事件，以计算包含所有圆的svg-g元素的转换。此函数在地图视图重置事件中调用。

    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元素的变换参数正在重新计算，但圆没有重新定位（或者它们重新定位错误），也没有与贴图平铺层对齐。不过，在浏览地图时一切都还可以。为了在缩放时正确重新定位，需要更改哪些内容？

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

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

在这里更新了jsfiddle。

相关文章：