javascript - Google Maps Tile Overlays - 在调用图 block 时避免 404 错误？

Question

当使用图 block 覆盖时，到目前为止我看到的唯一方法是在抓取图 block 时听取 Google 的声音，从调用中获取 X、Y、Z 坐标，并将其与图 block 集进行比较。

var tileOptions = {
    getTileUrl: function(coord, zoom) {
        return "/tiles/" + zoom + "_" + coord.x + "_" + coord.y + ".png";
    }
}

如果 X、Y、Z 处的图 block 存在，则可以正常找到并调用它。如果没有，则会出现 404 错误。在我的例子中，我有六组可能同时处于事件状态的图 block ，创建图 block 的脚本会忽略并且不会创建空白图 block ，这意味着每次 map 更改缩放或位置时，都有在尝试加载所有图 block 时，可能会出现一百多个 404 错误。

为了尝试在某些方面帮助解决这个问题，我将图 block 搜索限制在图 block 覆盖的区域:

var tileOptions = {
    if (zoom>=16 && zoom<=20) {
        if (zoom=16) { if (coord.x>=16000 && coord.x<=16004) { if (coord.y>=24200 && coord.y<=24203) { 
            getTileUrl: function(coord, zoom) {
                //return the tiles
            }}}
        }
        if (zoom=17) //...
        }
        if (zoom=18) //...
        }
        //...
    }
}

然而，该区域跨越 8x10 block 的区域，并没有完全被覆盖覆盖。这种方法除了仅在用户试图偏离 map 时防止错误外，还过于复杂并且可能会减慢图 block 调用过程。

因此，我正在寻找一种“放置”图 block 而不是“调用”它们的方法:不是 map 询问“你有这个图 block ”并冒着 404 错误的风险，脚本或函数会说“我有这些图 block ，放置它们”忽略丢失的图 block (空白)，理想情况下只加载页面上可见的图 block 。

或者，我也在寻找一种让函数知道存在哪些图 block 的方法，以便它只尝试调用这些标题，从而避免 404 错误。

简而言之，如何避免调用 tiles 时出现 404 错误？

---

写完问题后的想法:我假设第一个理想的解决方案是获取 if 语句的堆栈并将它们转换为对图 block 的更动态检查，如果存在图 block ，使用“返回”实际调用它；然而，这似乎仍然会导致相同的 404 错误，但来自不同的函数。

---

使用索引:正如下面 meetamit (如果我理解正确的话) 所建议的那样，首先创建一个索引来检查图 block 的存在/不存在，而不是调用磁贴并使用 404 作为检查。但是，对于一组“Z_X_Y.png”格式的图 block ，我如何轻松创建这些索引？

Answer 1

听起来您正在扩展 ImageMapType，这需要您实现 getTileUrl()方法。如您所说，要“放置”而不是“调用”瓷砖，您需要创建一个 Overlay Map Type ，这本质上涉及更多，并且当您尝试使用 404 执行您所描述的操作时，将涉及更多。

实际上，无论您如何实现这一点，如果您依赖 404 作为图像是否存在的“测试”，您可能会通过占用不需要的服务器连接来严重降低 map 的性能。理想情况下(正如您所暗示的那样)，客户端会有一些索引表示哪些图 block 可用。如果索引指示磁贴不可用，则您的 getTileUrl()会返回 null .也就是说，假设 Google Maps API 知道不要尝试加载 null网址；如果不是这种情况，该方法可以返回透明图像的 URL，该图像被缓存一次并重新用于每个丢失的图 block 。

如何表示这个索引是一个选择问题。它可以是一个简单的 JSON，它可能会变得非常大(但即使是这样，每个客户端都会缓存它以便它加载一次)。或者，您可以发挥创意，想出一种更简洁的格式来表示索引。您甚至可以预先生成一张图像，例如，用黑白像素表示是否存在图 block 。然后将此图像绘制到 <canvas> 中并从 Canvas 中读取适当的像素以确定图 block 是否存在。

在细化问题后添加到答案

JSON 索引可能如下所示:

var index = {
  "4": {
    xMin: 10,
    xMax: 31,
    yMin: 4,
    yMax: 11,
    tiles: [1,1,1,0,1,0,1,1,1,0,1,0,1,0,1,1,1 ...]
  },
  "5": {
    xMin: 5,
    xMax: 16,
    yMin: 2,
    yMax: 6,
    tiles: [1,1,1,1,0,0,1,1,1,0,0,1,1 ...]
  }
}

每个顶级对象对应于缩放级别。这样，index["5"].tiles为您提供缩放级别 5 的所有图 block 。1意味着你有瓷砖，0意味着没有瓷砖。最小/最大值 xMin, xMax, yMin, yMax用于定义您关注的区域——因为您已经指出您的图 block 没有覆盖整个世界。

判断一个tile是否存在:

function tileExists(z, x, y) {
  var obj = index[String(z)],
      tilesPerRow = obj.xMax - obj.xMin,
      // Calculate the index of tile within the sequential array
      iTile = (x - obj.xMin) + ((y - obj.yMin) * tilesPerRow);

  return Boolean(obj.tiles[iTile]);
}

同样，使用 JSON，这个索引会变得非常大。这取决于您覆盖的世界范围以及缩放级别。在缩放级别 10 时，如果您覆盖整个世界，您将拥有大约 100 万个图 block ，这意味着一个非常大的阵列。那么您可能需要采用压缩程度更高的格式。这取决于你如何定义它。您可以将其定义为数组 [14,2,120,1,201,3]被解释为“14 个 1，接着是 2 个 0，接着是 120 个 1，接着是 1 个零，等等......”这实际上取决于你的数据是什么样子的，以及你愿意/能够做多少工作。希望这对您有所帮助。