Question

我正在尝试修改Mike Bostock的D3地理图块应用程序，以便显示可以找不到图块的替代图像/图块集（例如缩放级别太高）。这将为脚本提供额外的灵活性。

我的解决方案几乎可行，但我无法将平铺比例/转换（d）传递给我的解决方法功能。这是我的jsfiddle，下面是一些代码，我尝试显示其中瓷砖无法加载的替代图像：

 image.enter().append("image")
      .attr("x", function(d) { return d[0] * 256; })
      .attr("y", function(d) { return d[1] * 256; })
      .attr("width", 256)
      .attr("height", 256);

    // create a test image
    var imgTest = new Image();

    // if it loads successfully add it to the svg image
    imgTest.onload = function(d) {
      image.data(tiles, function(d) { return d})
             .attr("xlink:href", function(d){return imgTest.src});
    }
    // if it fails test another image
    imgTest.onerror = function() {
      imgTest.src = "https://dummyimage.com/50x50/000/fff.png&text=An+Image!"
    }
    // this will (potentially) fail
    imgTest.src = "https://" + "abc"[d[1] % 3] + ".tiles.mapbox.com/v3/mapbox.natural-earth-2/" + d[2] + "/" + d[0] + "/" + d[1] + ".png";

Answer 1

没有人介入回答我的问题。尽管如此，我还是找到了另一种方法来实现我所需要的（即摆脱那些可怕的破碎链接图标）。它非常简单......但无法在任何地方找到它，而且它适用于D3。

.attr("onerror", "this.style.display='none'")

这里是上下文中的代码行：

image.enter().append("image")
      .attr("xlink:href", function(d) { return "https://" + "abc"[d[1] % 3] + ".tiles.mapbox.com/v3/mapbox.natural-earth-2/" + d[2] + "/" + d[0] + "/" + d[1] + ".png"; })
      .attr("x", function(d) { return d[0] * 256; })
      .attr("y", function(d) { return d[1] * 256; })
      .attr("onerror", "this.style.display='none'")
      .attr("width", 256)
      .attr("height", 256);

显示瓷砖显示失败的替代图像/图块（D3 Geo Tiles）

1 个答案: