传单：如何在缩放开始之前获取 lat lng 的像素位置

Question

我想 transform:translate 一个 SVG 组到一个 latLng 像素位置，并在缩放后保持该位置。

我试过：

map.on('zoomend', function(e) {...});

http://jsfiddle.net/L8dnsrnk/15/

但很明显，它只会在缩放后触发，因此 SVG 不会像标记那样流畅地移动。

我尝试查看源代码以了解如何重新定位 Leaflet 标记，因为这本质上是我试图模仿的行为，但无济于事。如果有人对实现这种效果有其他建议，我会很感兴趣！ :)

Answer 1

您需要监听 "zoomanim" 事件并通过执行以下操作获取新的圆心：

var coord = map._latLngToNewLayerPoint(new L.LatLng(51.5, -0.087), e.zoom, e.center);

标记的动画由 CSS 执行，特别是 class 选择的“.leaflet-zoom-anim .leaflet-zoom-animated”（查看 leaflet.css） .您需要为 SVG 做类似的事情。不要在 SVG 上设置 "transform" 属性，而是设置 "transform" 样式，然后在 CSS.

中为该样式定义过渡动画

见下文fiddle：http://jsfiddle.net/inpursuit/mcatbrhk/1/

传单：如何在缩放开始之前获取 lat lng 的像素位置

Leaflet: How to get pixel position of a lat lng after zoom, before zoom begins

javascript

svg

d3.js

leaflet

mapbox