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

Question

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

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

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

---

Я декомпилировал их javascript http://pastebin.com/PVjahhnH

Answer 1

• Клиент карты
  • OpenLayers
  • Примеры OpenLayers
• Картографические данные
  • OpenStreetMap

Answer 2

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

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

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

Answer 3

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