谷歌地圖拼貼覆蓋 - 在調用拼貼時避免404錯誤？

Question

當使用拼貼疊加時，我迄今爲止唯一看到的方法是在Google抓取拼貼時收聽，從座標中獲取X，Y，Z座標，並將其與拼貼集進行比較。

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

如果在該X，Y，Z處的瓦片存在，則發現並正常調用該瓦片。如果沒有，則會出現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) //... 
     } 
     //... 
    } 
} 

然而，區域跨越的8×10塊區域，並且不完全覆蓋覆蓋。除了僅在用戶試圖偏離地圖時防止錯誤之外，此方法也過於複雜，並且可能會減慢拼貼調用過程的速度。因此，我正在尋找一種「放置」瓷磚的方法來「調用」它們：而不是要求「你有這個瓷磚」的地圖和冒着404錯誤的風險，腳本或函數會說「我有這些瓷磚，放置它們」忽略缺少的瓷磚（空白），理想情況下只加載在頁面上可見的瓷磚。

或者，我也在尋找一種方法，讓函數知道存在哪些圖塊，因此它只會嘗試調用這些圖標，從而避免404錯誤。

總之，我怎樣才能避免404錯誤調用瓷磚？寫問題後

---

思考：我認爲第一個理想的解決辦法是採取的堆if語句，並將它們轉換成瓦片更加動態的檢查，如果瓷磚存在，使用「返回」來實際調用它;然而，這似乎仍然導致相同的404錯誤，但來自不同的功能。

---

使用索引：由於meetamit （如果我的理解對不對）下面提出，創建一個索引來檢查瓷磚的存在/不存在第一，而不是調用的瓷磚和使用404作爲支票。但是，使用「Z_X_Y.png」格式的一組圖塊時，我怎樣才能輕鬆創建這些索引？

Answer 1

聽起來像你正在擴展一個ImageMapType，它需要你實現getTileUrl()方法。如您所說，要「放置」而不是「叫」瓷磚，您需要創建一個Overlay Map Type，這本質上涉及更多，並且在嘗試使用您所描述的內容時會更加涉及404。實際上，無論你如何實現這一點，如果你依賴404作爲圖像存在的「測試」，那麼通過將不需要的連接捆綁到服務器上，可能會嚴重降低地圖的性能。理想情況下（如你所暗示的），客戶端會有一些索引來表示哪些瓦片可用。如果索引指示某個貼片不可用，則您的getTileUrl()將返回null。也就是說，假設Google Maps API知道不嘗試加載null網址;如果情況並非如此，那麼該方法可以返回透明圖像的URL，該透明圖像會緩存一次並重新用於每個缺失的圖塊。

如何表示該索引是一個選擇問題。它可能是一個簡單的JSON，可能會變得相當大（但即使這樣，每個客戶端都會緩存它，以便一次加載它）。或者，您可以變得富有創意，並提出更簡潔的格式來表示索引。您甚至可以預先生成一個圖像，例如黑白像素代表存在或不存在圖塊。然後，您可以將此圖像繪製到<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等等......」這實際上取決於你的數據是什麼樣的，以及有多少工作你願意/能夠做到。希望這有助於。