4

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

除了一件事之外，一切似乎都工作得很好：在缩放和平移过程中瓷砖会闪烁。在原始示例和迄今为止我遇到的 d3.geo.tile 的所有其他用例中也观察到了这种效果。发生此 UX 错误是因为浏览器并不总是能够立即下载图块。令人惊讶的是，即使在加载某个图块之后，也不能保证它的重新出现是即时的——闪烁确实会不时地重新出现。

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

我尝试image.exit()使用这样的想法，即在加载新图块时，之前显示的图块可能会在屏幕上保留一段时间。但不幸的是，没有任何效果。

有人可以建议解决这个问题吗？不闪烁的平滑 D3 地图是 2016 年世界应得的！:–)

UPD

事实证明，使 tile 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"; })

演示

但是，这并不能从整体上解决问题。

4

1 回答 1

0

我会简单地更改背景颜色以匹配瓷砖的基本颜色（在这种情况下为浅灰色/紫色）。这当然是一个 hack，但可以保证消除烦人的“闪烁”效果。

在我看来，让它如此糟糕的是闪烁是白色的。

于 2018-05-31T06:11:48.160 回答