Question

我的网站有一个地图系统（网格）。我在网格上定义了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值转换为fieldids的函数，反之亦然。

到目前为止一切都很好，我可以：

当用户点击导航按钮（得到此内容）时重新加载整个页面
发送ajax-request并获取带有新16x9字段的jsonstring（得到此内容）

但我希望构建某种缓存系统，以便在第一次加载后可以最小化从服务器发回的数据。这可能意味着只发送新的“行”或“列”字段并将它们存储在比用于显示的16x9更大的javascript多维数组中。但我无法弄明白。有人可以帮忙吗？

Answer 1

你可以拥有一个包含40,000个引用的数组。基本上，空数组元素在你实际放入一些内容之前不会占用大量空间（这是动态类型语言的优点之一）。 Javascript不知道你是否要将一个int或一个对象放入一个数组元素中，所以它不会分配元素，直到你把它们放入其中。总而言之，只需将它们放在一个数组中 - 就这么简单！

或者，如果您不希望解释器在启动时分配40,000个NULL，则可以使用字典方法，其中键是40,000个数组索引中的1。现在，未使用的元素甚至没有被分配。虽然如果你最终要填充地图的大部分内容，但字典方法的效率要低得多。

Answer 2

我看到两种可能的解决方案。

1如果你使用ajax来获取新的磁贴并且不经常重新加载整个页面，你可以使用一个包含每个磁贴内容的对象，使用唯一的tile id作为键，如：

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

当用户请求新的图块时，首先检查对象中是否有它们（您知道给定区域需要哪些图块），然后仅下载所需内容并将新的键/值对添加到缓存中。显然，一旦用户重新加载页面，所有缓存的数据都将消失。

2如果您为每个请求重新加载页面，您可能会将您的磁贴拆分为单独的javascript“文件”。如何在服务器上实现它并不重要 - 静态文件如tile1.js，tile2.js等，或动态脚本（可能带有一些服务器端缓存），如tile.php？id = 1，tile。 php？id = 2等。重要的是服务器发送正确的HTTP头并使浏览器可以缓存这些请求。因此，当请求包含大约144个图块的页面时，您有144个＆lt; script /＆gt;元素，每个元素包含一个瓦片的数据，每个元素将存储在浏览器的缓存中。这个解决方案只有在每个磁贴的数据很多且数据在服务器上不经常更改时才有意义，或者/并且/并且存在大量的磁贴生成/转移成本。

Answer 3

有一个关联数组，最初以零值开始。

如果用户访问网格32x41y，您可以像这样设置数组的值：

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

（这是伪代码;我没有检查语法。）

然后，您可以通过查看关联数组中是否有值来检查用户是否访问了相应的网格坐标。

如何创建高效的地图系统？

3 个答案: