谷歌地图平铺叠加 - 避免调用瓷砖404错误？

Question

当使用图块叠加时,我到目前为止看到的唯一方法是在抓取图块时收听Google,从调用中获取X,Y,Z坐标,并将其与图块集进行比较.

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

如果该X,Y,Z处的图块存在,则找到并正常调用.如果没有,则会出现404错误.在我的情况下,我有六组瓷砖可能同时处于活动状态,并且创建瓷砖的脚本会忽略并且不会创建空白瓷砖,这意味着每次地图改变缩放或位置时,都有所有磁贴都试图加载时有超过一百四十四个404错误的可能性.

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

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块的区域,并且未被覆盖层完全覆盖.除了仅在用户试图偏离地图时防止错误之外,该方法也过于复杂并且可能减慢了调用进程的速度.

因此,我正在寻找一种"放置"瓷砖的方法,以"调用"它们:而不是地图询问"你有这个瓷砖"并冒着404错误的风险,脚本或功能会说"我有这些瓷砖,放置它们"忽略缺少的瓷砖(空白),理想情况下只加载在页面上可见的瓷砖.

或者,我也在寻找一种方法,让函数知道哪些磁贴存在,因此它只会尝试调用这些标题,从而避免404错误.

简而言之,我如何在调用tile时避免404错误？

---

写完这个问题之后的想法:我假设第一个理想的解决方案是获取if语句的堆栈并将它们转换为更加动态的tile检查,如果存在tile,则使用"return"实际调用它; 然而,这似乎仍然导致相同的404错误,但来自不同的功能.

---

使用索引:如下所述,通过meetamit (如果我理解正确),创建索引以首先检查tile的存在/不存在,而不是调用tile并使用404作为检查.但是,使用"Z_X_Y.png"格式的一组切片,我怎样才能轻松创建这些索引？

Answer 1

听起来像是在扩展ImageMapType,这需要您实现该getTileUrl()方法.要么"放置"而不是"调用"瓷砖,正如你所说,你需要创建一个覆盖地图类型,这本身就更具参与性,并且当你试图做你所做的事情时会更加参与描述使用404s.

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

如何表示这个指数是一个选择问题.它可能是一个简单的JSON,可能会变得非常大(但即使如此,每个客户端都会缓存它以便它一次加载).或者,您可以获得创意并提出更简洁的格式来表示索引.您甚至可以预先生成一个图像,例如,表示存在或缺少图块的黑白像素.然后,您可以将此图像绘制成a <canvas>并从画布中读取相应的像素,以确定该图块是否存在.

在完善问题后添加回答

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的所有图块.1意味着您拥有图块,0表示没有图块.最小值/最大值xMin, xMax, yMin, yMax用于定义您关注的区域 - 因为您已指出您的图块不会覆盖整个世界.

要确定是否存在图块:

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万个瓦片,这意味着一个非常大的阵列.那么你可能需要采用更加压缩的格式.由您决定如何定义它.您可以定义它,使得数组[14,2,120,1,201,3]被解释为"14 1,然后是2 0,然后是120 1,然后是1 0,等等......"这实际上取决于您的数据是什么样的,以及您需要做多少工作'愿意/能够做到.希望这足够了.