Question

我已成功将D3（矢量）地图分层在d3-tile（栅格）地图之上，该地图从Mapbox中拉取切片。手动缩放功能完美，矢量和光栅同步。

我现在正在尝试实施Mike Bostock＆＃39; zoom-to-bounding-box＆＃39;功能，即应用程序在用户单击时缩放所需的国家/地区。我想我差不多了，但是现在似乎有一个不匹配，地图缩小到外太空，可以这么说。

我已在此jsfiddle中重现了该问题。

我需要在“缩放”中修改什么？功能，以便地图正确缩放和预期？我认为这就是问题所在：

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

Answer 1

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

使用常量投影

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

在缩放中，你有这一行：

projection.scale...

您似乎正在尝试根据缩放更新投影，但转换和缩放已经由svg元素的transform属性处理。

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

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

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

另一个问题是您的reset功能未重置为原始视图，这会使其缩小到距离。使用初始缩放设置而不是d3.zoomIdentity解决了问题。

这些修改的结果如下：https://jsfiddle.net/m7cn0p47/99/

可选：合并转换

改变许多DOM节点通常效率低下。在这种情况下，您需要更改zoomed中的每个路径向量。将转换应用于一个g元素（在本例中为g元素，标识为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);

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

以下是对这些更改和更正的更新提示：https://jsfiddle.net/m7cn0p47/96/

Answer 2

在您的示例中，您将转换直接应用于父SVG。在bl.ocks示例中，他们在svg中创建了一个组g以应用转换。

在缩放功能中，您可以像使用bl.ocks点击缩放示例一样使用css转换。更新为clickHandler中的css转换函数以及与示例中相同的比例计算，单击缩放可正常工作。

https://jsfiddle.net/bamboo/m7cn0p47/3/

缩放在状态或更多原子部分上效果更好。像美国，法国西班牙这样的地方都有偏远的岛屿或阿拉斯加。当它实际上只包括周围区域时，可以产生缩放 out 的效果。

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

2 个答案:

使用常量投影

可选：合并转换