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

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

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

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

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

Answer 2

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

Answer 3

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