Интерактивные планы этажей в HTML5 - PullRequest
Новая
       22

Интерактивные планы этажей в HTML5

19 голосов
/ 26 июля 2011

Мне нужно разработать интерактивный навигатор и планировщик поэтажного плана для многоквартирных домов, который сменит своего предшественника на основе Flash.

Сейчас я нахожусь в процессе оценки методов и технологий, наиболее подходящих для реализации этого в HTML5,Мне придется поддерживать все распространенные браузеры (IE, начиная с 7).

Требования:

  • Пользователю предоставляется несколько статичных видов на улицу здания, между которыми он может переключатьсяс простым виджетом.
  • Они смогут выбрать этаж на этом внешнем виде.При наведении курсора (щелчок для сенсорных устройств) этаж будет выделен.
  • При нажатии на этаж вы переключаетесь на план этажа, который - снова при наведении курсора мыши / мыши - предоставляет подробную информацию о квартире.
  • Некоторые анимации должны быть задействованы, но ничего особенного.

Я думал о вариантах реализации этого.Мне также понадобится быстрый способ выбора полигонов для этажей (обзор) и квартир (план этажа), чтобы не застройщики могли создавать новые здания.

Варианты, которые я придумал:

  1. Используйте простые изображения и карты изображений для слоев.
  2. Используйте canvas (используя решение Google Javascript для браузеров без поддержки).Загрузите изображение в тег canvas и динамически создайте слои.
  3. Использовать SVG

Каков наилучший вариант для кросс-браузерной совместимости?

Ответы [ 2 ]

11 голосов
/ 26 июля 2011

Либо SVG, либо Canvas подойдут вам.Вам, вероятно, будет легче разрабатывать это в SVG просто из-за того, сколько уже сделано для вас.

Вот некоторые другие соображения:

  • Canvas работает во всех «современных»"браузеры, но не IE7 / 8
  • SVG работает во всех современных браузерах, а VML (очень близко) в IE7 / 8
  • Рендеринг текста в Canvas может выглядеть совсем по-разному для каждого браузератеперь
  • Canvas работает в Android и iOS в некоторой степени (незначительные вещи, такие как текстовые градиенты все еще портятся)
  • SVG не работает в Android (по крайней мере, год назад. Ничегоизменить?) Он работает в iOS
  • Доступность SVG FAR лучше.Текст доступен для поиска, поэтому оптимизирован для SEO, слепых, позволяет копировать и вставлять и т. Д. Взаимодействие с остальной частью DOM намного естественнее.
  • Производительность холста лучше, но вы этого не делаетеЭто не нужно.

На данный момент они в равной степени совместимы, за исключением старых версий IE.Вы можете заставить их работать с Canvas, используя библиотеку excanvas, но это отстой, особенно если что-то движется.

Я бы порекомендовал SVG исключительно потому, что вы сможете начать разработку с нуля.это намного быстрее для типа приложения поэтажного плана.Все уже является объектом DOM.События, обработка мышью и т. Д. Уже сделаны для вас.

Но если вы действительно хотите, чтобы он работал на (старых?) Телефонах с Android, Canvas может быть лучшим выбором на данный момент.

10 голосов
/ 26 июля 2011

Я планирую нечто подобное для навигации внутри помещений:)

В итоге я использовал OpenLayers (http://openlayers.org/)

На самом деле OpenLayers был изобретен для GIS Stuff (Карты и т. Д.), Но вы можете легко определить метрическую систему координат X-Y-Z и просто заполнить ее векторными данными.

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

Для OpenLayers 2.x (изначально) см .:

http://dev.openlayers.org/releases/OpenLayers-2.13.1/examples/

http://dev.openlayers.org/releases/OpenLayers-2.13.1/examples/draw-feature.html

http://dev.openlayers.org/releases/OpenLayers-2.13.1/examples/transform-feature.html

Для OpenLayers 3.x см .:

http://openlayers.org/en/v3.4.0/examples/

http://openlayers.org/en/v3.4.0/examples/draw-features.html

Вы можете общаться через GeoJSON, GML и т. Д. С бэкэндом. Мы использовали PostGIS в качестве бэкэнда для хранения векторных данных. Также есть пространственное расширение для mysql (http://dev.mysql.com/doc/refman/5.0/en/spatial-extensions.html).

Просто определите простую систему координат X-Y-Z с правильно выбранной контрольной точкой:)

...