D3:使用d3-tiles缩放到边界框

Question

我已经成功地在d3-tile(栅格)地图的顶部分层了一个D3(矢量)地图,该地图从Mapbox中提取了切片.手动缩放功能完美,矢量和光栅同步.

我现在正在尝试实现Mike Bostock的" 缩放到边界框 "功能,应用程序可以在用户点击时缩放所需的国家/地区.我想我差不多了,但是现在似乎有一个不匹配,地图缩小到外太空,可以这么说.

我在这个jsfiddle中重现了这个问题.

在"缩放"功能中需要修改什么才能使地图正确缩放并按预期进行？我认为这就是问题所在:

  vector.selectAll("path")
    .attr("transform", "translate(" + [transform.x, transform.y] + ")scale(" + transform.k + ")")
    .style("stroke-width", 1 / transform.k);

Answer 1

编辑：看起来主要问题只是投影的更新

使用恒定投影

这里的主要问题是您要根据缩放来更改投影并从中计算边界框。

放大后，你会看到这一行：

projection.scale...

看起来您正在尝试根据缩放来更新投影，但平移和缩放已经由transformsvg 元素的属性处理。

相反，投影用于将球面地理坐标转换为二维空间。它用于计算一个国家/地区的边界，如果它发生变化，边界就会移动，这可能是无意的。删除此投影更新可以让您顺利完成大部分工作。

另一个大问题是，您将点击处理程序中的比例限制为远低于您需要的值（例如，您将比例限制为最大值 8，但初始比例为 4096）。

移除夹子和投影更新应该可以让您点击缩放国家/地区。但我们还没有完成！

另一个问题是您的reset函数不会重置为原始视图，这使得它缩小到远处。使用初始缩放设置并不能解决d3.zoomIdentity问题。

这些编辑的结果在这里：https://jsfiddle.net/m7cn​​0p47/99/

可选：合并转换

更改许多 DOM 节点通常效率很低。在这种情况下，您将更改 中的每个路径向量zoomed。相反，将变换应用于一个g元素（在本例中g为具有 id 的元素vector）通常会更有效。

代替：

vector.selectAll("path")
  .attr("transform", "translate(" + [transform.x, transform.y] + ")scale(" + transform.k + ")")
  .style("stroke-width", 1 / transform.k);

您可以将其更改为简单的：

vector
  .attr("transform", "translate(" + [transform.x, transform.y] + ")scale(" + transform.k + ")")
  .style("stroke-width", 1 / transform.k);

您还必须stroke-width从 CSS 中的路径中删除，因为它会覆盖它。

以下是这些更改和更正的更新小提琴：https://jsfiddle.net/m7cn​​0p47/96/