Как я могу реализовать масштабируемый интерфейс перетаскивания так же, как и seatgeek?

Question

Seatgeek имеет масштабируемый перетасованный черепичный интерфейс.

Пример здесь: http://seatgeek.com/sf-bulls-yankees-tickets/3-2-2012-tampa-george-steinbrenner-field/mlb/785875/#

Я хочу реализовать прокручивать перемещаемой интерфейс, как это, но я не могу использовать код Google для карт Google. Также мне нужна система плитки, например google maps, где она вытаскивает плитки с сервера для рендеринга карты. Необходимо реализовать в javascript. Какую библиотеку я могу использовать? Как мне это сделать? Как это делает seatgeek?

---

I де скомпилированные их Javascript http://pastebin.com/PVjahhnH

Answer 1

• Карта клиента
  • OpenLayers
  • OpenLayers Examples
• Карта данных
  • OpenStreetMap

Answer 2

CloudMade карта плитка является одним из службы карты плитки сервера на основе. Пожалуйста, прочитайте эту страницу сервера http://cloudmade.com/documentation/map-tiles или свяжитесь с alex@cloudmade.com для получения дополнительной информации.

Answer 3

Этот вид интерфейса кажется сложным для реализации, но это всего лишь некоторые математические трюки. Если вы решите реализовать свой собственный алгоритм, попробуйте это:

1. Сделайте полное изображение и создайте плитки в разных масштабах и, следовательно, с разной глубиной.
2. Пользователь начинает смотреть на сцену в реальном масштабе, составленную из 16 плиток, созданных из исходной сцены. Если пользователь перетаскивает, все плитки перемещаются равным. Если пользователь увеличит масштаб, все плитки будут увеличены.
3. Если пользователь увеличил масштаб больше, чем X, вы измените 16 плиток на свои 16 дочерних плит! Понял? Увеличьте масштаб, увеличьте детали. Чтобы избежать одновременного использования 36000 плиток, сгенерируйте их с разной глубиной и переключите их на лету.

Вам просто нужно загрузить и переместить плитки. Умножьте плитки x, y, ширину, высоту с помощью масштабирования. Держите фокус сцены в позиции мыши. Взгляните на это example. Он выполняет именно эти шаги выше, но с большим количеством изображений микроскопа. Это та же идея карт Google.