我想转换:将 SVG 组转换为 latLng 像素位置,并在缩放后保持该位置。
我试过:
map.on('zoomend', function(e) {...});
http://jsfiddle.net/L8dnsrnk/15/
但显然它只会在缩放后触发,因此 SVG 不会像标记那样流畅地移动。
我已经尝试查看源代码以了解如何重新定位 Leaflet 标记,因为这本质上是我试图模仿的行为,但无济于事。如果有人对实现这种效果有其他建议,我会很感兴趣! :)
最佳答案
您需要监听“zoomanim”事件并通过执行以下操作获取新的圆心:
var coord = map._latLngToNewLayerPoint(new L.LatLng(51.5, -0.087), e.zoom, e.center);
标记的动画由 CSS 执行,特别是选择的类“.leaflet-zoom-anim .leaflet-zoom-animated”(查看 leaflet.css)。您需要为 SVG 做类似的事情。不要在 SVG 上设置“transform”属性,而是设置“transform”样式,然后在 CSS 中为该样式定义过渡动画。
请参阅以下 fiddle :http://jsfiddle.net/inpursuit/mcatbrhk/1/
关于javascript - 传单:如何在缩放开始之前获取 lat lng 的像素位置,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28112007/