如何創建高效的地圖系統？

我有一個地圖系統（網格）爲我的網站。我在網格上定義了40000個「字段」。每個字段都有一個XY值（對於x（1-200）和y（1-200））和一個唯一標識符：fieldid（1-40000）。如何創建高效的地圖系統？

我有一個可視區域爲16x9的字段。當用戶訪問website.com/fieldid/422時，它會在左上角顯示以fieldid 422開頭的16x9字段。這顯然遵循XY系統，這意味着＃422的第二行字段是＃622。

用戶應該能夠導航向上，向下，向左和向右（意思是相應地增加/減少X或Y值）。我有一個將XY值轉換爲fieldid的功能，反之亦然。

一切到目前爲止好，我可以：

刷新當用戶點擊一個導航按鈕，整個頁面（得到這個）
發送一個Ajax請求，並獲得與新16x9的字段jsonstring （得到這個）

但我想以某種緩存系統的建立，使從服務器發回的數據可以先裝後最小化。這可能意味着只發送字段的新「行」或「列」，並將它們存儲在大於用於顯示的16x9大小的javascript多維數組中。但我無法弄清楚。有人可以協助嗎？

來源

2009-08-11 Ropstah

我看到兩種可能的解決方案。

1如果你使用AJAX來獲取新磚和不經常重新加載整個頁面，你可能只需要使用保存每個分片的內容，用獨特的並列ID作爲鍵，類似於對象：

var mapCache = { 
    '1' : "tile 1 data", 
    '2' : "tile 2 data" 
    //etc. 
}

當用戶請求新的貼圖時，首先檢查您的對象是否有它們（您知道給定區域需要哪些貼圖），然後僅下載所需內容並將新的鍵/值對添加到緩存。很明顯，只要用戶重新加載頁面，所有緩存的數據就會消失。

2如果您爲每個請求重新加載頁面，可能會將您的圖塊分割爲單獨的javascript「文件」。在服務器上如何實現它並不重要 - 像tile1.js，tile2.js等的靜態文件或者像tile.php？id = 1的動態腳本（可能帶有一些服務器端緩存）。 php？id = 2等。重要的是服務器發送適當的HTTP頭並使瀏覽器緩存這些請求成爲可能。因此，當請求包含大約144個圖塊的頁面時，您將擁有144 <腳本/ >元素，每個元素包含一個圖塊的數據，並且每個元素都將存儲在瀏覽器的緩存中。這種解決方案只有在每個磁貼的數據量很大時纔有意義，並且數據在服務器上不會經常發生變化，或者/和生成/傳輸磁貼的成本很高。

來源

2009-08-11 00:48:30 pawel

您可以只有一個40,000個引用的數組。基本上，空數組元素不會佔用大量空間，除非實際上放入了某些東西（它是動態類型語言的優點之一）。 Javascript不知道你是要將一個int還是一個對象放入一個數組元素中，所以它不會分配這些元素，直到你把東西放入其中。所以總結一下，把它們放在一個數組中 - 這很簡單！

或者，如果您不希望解釋器在啓動時分配40,000個空值，則可以使用字典方法，其中鍵是40,000個數組索引中的1。現在未使用的元素甚至不會被分配。儘管如果你最終要填充地圖的大部分，字典方法的效率要低得多。

來源

2009-08-11 00:36:18

有一個單個關聯數組，最初以零值開始。

如果用戶訪問，比方說，格32x41y，您可以設置這樣的陣列值：

if (!(visitedGrids.inArray('32')) 
{ 
    visitedGrids['32'] = {} 
} 
visitedGrids['32']['41'] = data;

（這是僞代碼，我沒有檢查語法）

然後，您可以通過查看關聯數組中是否存在值來檢查用戶是否訪問了適當的網格座標。

來源

2009-08-11 00:49:28

如何創建高效的地圖系統？

回答

相關問題