避免d3.geo.tile中的闪烁问题

Question

我正在实现一个基本的互动地图，上面放置了一些数据。代码非常类似于经典的d3.geo.tile示例：http://bl.ocks.org/mbostock/5342063。除了一个问题，一切都运行得很完美：在缩放和平移期间，瓦片会闪烁。这个问题也存在于原始示例和我遇到的所有其他d3.geo.tile用例中。这种UX错误发生是因为浏览器并不总能立即下载瓦片。令人惊讶的是，即使某个瓦片已经加载完成，它的重新出现也不能保证是即时的——从时间到时间会再次出现闪烁。像Leaflet这样的滑动地图库试图通过显示来自先前缩放级别的缓存瓦片来补偿闪烁。在我看来，如果d3.geo.tile也能做类似的事情，那就太好了。我尝试使用image.exit（）来解决这个问题，想法是在新瓦片被加载时，之前显示过的瓦片可能会在屏幕上保留一段时间。但不幸的是，没有任何作用。请问是否有人可以提供解决这个问题的方案？2016年，平滑的D3地图不应该闪烁！ :–）更新：事实证明，使瓦片URL稍微少一些随机性可以部分解决这个问题（当重新访问某个视图时，闪烁会减少）。

// before
image.enter().append("image")
  .attr("xlink:href", function(d) { return "http://" + ["a", "b", "c"][Math.random() * 3 | 0] + ".tile.openstreetmap.org/" + d[2] + "/" + d[0] + "/" + d[1] + ".png"; })

// after
image.enter().append("image")
  .attr("xlink:href", function(d) { return "http://" + ["a", "b", "c"][ (d[0] + d[1] + d[2]) % 3 ] + ".tile.openstreetmap.org/" + d[2] + "/" + d[0] + "/" + d[1] + ".png"; })

演示

然而，这并不能完全解决问题。

- Alexander Kachkaev

Answer 1

我会简单地将 的背景颜色更改为与瓷砖的基础颜色相匹配（在这种情况下是一些淡灰/紫色）。当然，这是一种技巧，但它保证能消除那令人讨厌的“闪烁”效果。

我认为它之所以如此糟糕，是因为闪烁是白色的。

- Noobster