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

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

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

Требования:

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

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

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

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

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

Ответы

Ответ 1

Любой 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 может быть лучшей ставкой на данный момент.

Ответ 2

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

В итоге я использовал 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 в качестве backend для хранения векторных данных. Также существует пространственное расширение для mysql (http://dev.mysql.com/doc/refman/5.0/en/spatial-extensions.html).

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