使用d3和Leaflet实现动画缩放 [英] Achieving animated zoom with d3 and Leaflet

问题描述

使用d3在小叶图的顶部绘制SVG伪像是一种简单的方法来获得与d3的强度结合的实地图控制器。有很多例子和指南如何实现这一点，两种主要方法似乎是：

Using d3 to plot SVG artefacts on top of a Leaflet map is a simple way to get a solid map controller combined with the strength of d3. There are numerous examples and guides as how to achieve this and the two main approaches seem to be:

1. 追加一个新的SVG元素在Bostock这里展示的Leaflet的overlay pane： http://bost.ocks.org/mike/leaflet/

实现一个自定义向量图块层，该图层嵌入到Leaflets本地图块层生态系统中，如Nelson Minar所示：http://bl.ocks.org/NelsonMinar/5624141

Implementing a custom vector tile layer that hooks in to Leaflets native tile layer ecosystem as demonstrated by Nelson Minar here: http://bl.ocks.org/NelsonMinar/5624141

第一种方法通过附加一个小叶类别来避免Leaflet基于缩放的缩放，以便在缩放时隐藏任何d3元素。当缩放动画结束时，将重新计算和重绘元素坐标，之后删除hide-class以再次显示元素。这个工作原理，但是与Leaflet的原生GeoJSON图层相比，放大/缩小的体验更少，因为后者支持动画缩放。

The first approach avoids Leaflets scale-based zooming by attaching a leaflet-class so that any d3-elements are hidden while the scaling takes place. When the zoom animation is over, the element coordinates are re-calculated and redrawn whereafter the hide-class is removed to expose the elements again. This works, but gives a less clean zoom in/out experience than with Leaflet's native GeoJSON layer, as the latter supports animated zoom.

第二种方法不包含任何实现特定的代码，以适应缩放行为，但仍然以某种方式工作！ d3元素在动画缩放期间缩放，然后用下一个缩放级别向量替换。

The second approach does not contain any implementation specific code that adress the zooming behaviour but does somehow work anyway! The d3 elements are scaled during animated zoom and then replaced neatly with the next zoom levels vectors.

我想实现的是两者的组合。我想绘制基于Geo / TopoJSON的非瓦片向量，它们在放大/缩小时动画。我已经使用不同的传单css类，不同的事件挂钩，以及以多种方式附加和/或重用SVG元素，但还没有实现类似于使用Leaflet的原生GeoJSON向量时的行为的行为层。我不想使用原生层的原因是我想利用大量的其他d3功能，而不是Leaflet实现的一部分。

What I would like to achieve is a combination of the two. I would like to plot non-tile-based vectors based on Geo/TopoJSON that are animated during zoom in/out. I've fiddled around with using different leaflet css-classes, different event-hooks, and attaching and/or reusing the SVG elements in numerous ways but have not yet achieved a behaviour that is similar to the behaviour experienced when using Leaflet's native GeoJSON vector layer. The reason I don't want to use the native layer is that I want to make use of plenty of other d3 functionality simply not part of the Leaflet implementation.

问题：有没有人实现动画缩放时组合Leaflet和d3使用非瓷砖的向量？

Question: Has anyone achieved animated zooming when combining Leaflet and d3 using non-tile-based vectors? If so - how?

推荐答案

示例

我认为这是我发现用于结合Leaflet和d3的最佳解决方案之一， ZJONSSON 。

d3 +单张整合

在此示例中，Leaflet贴图作为SVG在此启动 map._initPathRoot（），然后使用d3 var svg = d3.select（＃map）。select（svg），
g = svg.append（g）;

In this example the Leaflet map is initiated as SVG here map._initPathRoot(), with the SVG then selected using d3 var svg = d3.select("#map").select("svg"), g = svg.append("g");, after which all the d3 fun can be had.

在此示例中，Leaflet贴图事件 map.on（viewreset，update）; 用于调用 update 并转换地图上的d3图层 viewreset 。之后，d3转换选项将确定d3图层如何对Leaflet贴图平移/缩放事件做出反应。

In this example, the Leaflet map event map.on("viewreset", update); is used to call update and transition the d3 layer on map viewreset. After this, d3 transition options will determine how the d3 layer reacts to the Leaflet map pan/zoom event.

以这种方式，您拥有d3 + Leaflet的全部范围

In this way you have the full scope of the d3 + Leaflet libraries without the hassle of calculating map bounds etc, as this is handled nicely by Leaflet.

动画矢量缩放

对于动画，最新的Leaflet版本包括平移和缩放动画选项。虽然这不像d3那样可定制，但您可以随时编辑Leaflet src代码以更改过渡持续时间！ Leaflet GeoJSON矢量图层（ L.geoJson ）不需要在Leaflet贴图事件上更新（在 update 中）

For animation, the latest Leaflet release includes a Pan and Zoom animation option. Whilst this is not as customisable as d3, you could always edit the Leaflet src code to alter the transition duration! Leaflet GeoJSON vector layers (L.geoJson) will not need to be updated on a Leaflet map event (in update), as they are already added to the map as SVG and handled by Leaflet.

请注意，如果实现 L.geoJson ，这也意味着你不需要 map._initPathRoot（），因为Leaflet将图层作为SVG添加到地图，所以你可以只是 d3.select 它。

Note that if implementing L.geoJson, this also means you wont need to map._initPathRoot(), as Leaflet will add the layer to the map as SVG, so you can just d3.select it.

还可以在 L.geoJson 中添加 className code>图层选项，以便您可以通过CSS或 d3.select 通过在小册子中分配的唯一类ID onEachFeature 。

It is also possible to add a className variable in the L.geoJson layer options so you can style via CSS or d3.select a feature via a unique class id assigned during Leaflet onEachFeature.

这篇关于使用d3和Leaflet实现动画缩放的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！