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

标签 javascript svg d3.js leaflet mapbox

我想转换:将 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/

相关文章:

javascript - 数据表列可搜索 :false also disables Date-Range Search

javascript - 捕获 onPaste 并将事件传递给函数 javascript/jQuery

javascript - Android webView 支持 svg 渲染

javascript - 使用象形图示例

javascript - D3 fiddle 谱

javascript - d3-如何根据值更改文本颜色(如果有)

javascript - 悬停时平滑按钮增长和按钮收缩动画

javascript - Svg transform 属性放置有间隙的元素

javascript - 如何将德国 map 放在 HTML 中的 svg 上? D3js

javascript - jQuery - 检测操作系统和操作系统版本