Как создать эффективную картографическую систему?

Question

У меня есть система карт (сетка) для моего сайта. Я определил 40000 полей в сетке. Каждое поле имеет значение XY (для x (1-200) и y (1-200)) и уникальный идентификатор: fieldid (1-40000).

У меня есть видимая область полей 16x9. Когда пользователь посещает website.com/fieldid/422, он отображает поля 16x9, начиная с fieldid 422 в верхнем углу. Это, очевидно, следует за системой XY, что означает, что поле во второй строке, справа внизу # 422, равно # 622.

Пользователь должен иметь возможность перемещаться вверх, вниз, влево и вправо (это означает приращение/уменьшение значения X или Y соответственно). У меня есть функция, которая преобразует значения XY в fieldids и наоборот.

Все хорошо до сих пор, я могу:

1. Перезагрузить всю страницу, когда пользователь нажимает на кнопку Navigate (получил это)
2. Отправить АЯКС-запрос и получить jsonstring с новыми полями 16x9 (получил это)

Но я хочу, чтобы построить в какой-то системы кэширования, так что данные, передаваемые от сервера может быть сведено к минимуму после первой загрузки. Это, вероятно, означало бы только отправку новых «строк» ​​или «столбцов» полей и сохранение их в somesort многомерного массива javascript, большего, чем 16x9 для отображения. Но я не могу понять. Может ли кто-нибудь помочь?

Answer 1

Я вижу два возможных решения.

1 При использовании Ajax, чтобы получить новые плитки и не перезагружать всю страницу очень часто, вы можете просто использовать объект, который содержит содержимое каждой плитки, используя уникальные плитки иды как ключи, как:

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 файла </>, каждый из которых содержит данные для одной плитки, и каждый из них будет храниться в кеше браузера. Это решение имеет смысл только в том случае, если имеется много данных для каждой плитки, и данные не очень часто меняются на сервере, и/и существует значительная стоимость создания/трассировки плитки.

Answer 2

У вас может быть массив из 40 000 ссылок. В принципе, пустые элементы массива не занимают много места, пока вы на самом деле ничего не наложите на них (это одно из преимуществ динамически типизированного языка). Javascript не знает, собираетесь ли вы поместить int или объект в элемент массива, поэтому он не выделяет элементы, пока вы не ставите что-то в них. Итак, чтобы обобщить, просто поместите их в массив - это просто!

В качестве альтернативы, если вы не хотите, чтобы интерпретатор выделил 40 000 NULL при запуске, вы можете использовать метод словаря, при этом ключи являются 1 из 40 000 индексов массива. Теперь неиспользуемые элементы даже не выделяются. Хотя, если вы собираетесь в конце концов заполнить значительную часть карты, метод словаря гораздо менее эффективен.

Answer 3

Имейте один ассоциативный массив, который изначально начинается с нулевых значений.

Если пользователь посещает, скажем, сетка 32x41y, установить значение для массива, как это:

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

(. Это псевдо-код, я не проверял синтаксис)

Затем вы можете проверить, посетил ли пользователь соответствующие координаты сетки, посмотрев, есть ли значение в ассоциативном массиве.