Question

我正在实现一个基本的交互式地图，其中一些数据放在openstreetmap图块的顶部。代码与经典的d3.geo.tile示例非常相似： http://bl.ocks.org/mbostock/5342063

除了一件事之外，所有人似乎都工作得很好：在缩放和平移期间，瓷砖会闪烁。在原始示例和d3.geo.tile的所有其他用例中也观察到这种效果我到目前为止。此UX漏洞发生是因为浏览器并不总是能够立即下载磁贴。令人惊讶的是，即使在某个瓷砖已经加载后，它的重新出现也不能保证是即时的 - 不时会再次发生闪烁。

像Leaflet这样的Slippy地图库尝试通过显示先前缩放级别的缓存切片来补偿闪烁，直到请求的已准备好。在我看来，如果能为d3.geo.tile做类似的事情也会很好。

我尝试与image.exit()一起玩，并认为先前显示的图块可能会在加载新图块时在屏幕上保留一段时间。但不幸的是，没有任何效果。

有人可以建议解决这个问题吗？无闪烁的平滑D3地图是2016年世界应得的！： - ）

UPD

事实证明，使得瓷砖网址随机部分可以解决问题（重新访问某个视图时会发生更少的闪烁）：

// 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"; })

Demo

然而，这并不能解决整个问题。

Answer 1

我只是改变背景颜色以匹配瓷砖的基色（在这种情况下是一些浅灰色/紫色）。这当然是一个黑客，但它保证消除那令人讨厌的'闪烁'效果。

在我看来，使它变得如此糟糕的原因是闪烁是白色的。

避免在d3.geo.tile

1 个答案: