Interaktywne plany pięter w HTML5

Question

Witam tam StackOverflow.

W najbliższych tygodniach będę miał przyjemność zaprojektować interaktywny nawigator i przeglądarkę dla budynków mieszkalnych, która zastąpi swojego poprzednika opartego na technologii Flash.

Jestem teraz w trakcie oceny technik i technologii najlepiej przystosowanych do wdrożenia tego w HTML5. Będę musiał obsługiwać wszystkie popularne przeglądarki (IE, począwszy od 7).

Co potrzebne jest raczej prosta:

Użytkownik jest przedstawiane z kilku statycznych zewnętrznych widokiem na budynek, między którymi można się przełączać za pomocą prostego widget.

Będzie mógł wybrać podłogę w tym widoku zewnętrznym. Po najechaniu kursorem myszy (kliknij w przypadku urządzeń dotykowych) podświetlona zostanie podłoga.

Po kliknięciu na podłogę przełączasz się na plan piętra, który - ponownie na mouseover/onclick - dostarcza szczegółowych informacji o mieszkaniu.

Niektóre animacje powinny być zaangażowane, ale nic nadzwyczajnego.

Można zobaczyć wersję wersji flash oparte tutaj: http://salitergasse.at/sg9/eigentumswohnungen/moedling/perchtoldsdorf

myślałem o możliwości wdrożenia tego. Potrzebuję też szybkiego sposobu wyboru wielokątów dla pięter (przegląd) mieszkań (plan piętra), aby pozwolić osobom niebędącym deweloperami na tworzenie nowych budynków.

Opcje wymyśliłem:

-) użyć wizerunki ślizgowe i odwzorowuje obraz dla layovers.

-) Użyj płótna (korzystając z rozwiązania Google Javascript dla przeglądarek bez wsparcia). Załaduj obraz w tagu canvas i dynamicznie twórz layovers.

-) Użyj SVG

Co wy myślicie? Jaka jest najlepsza opcja dla zgodności z różnymi przeglądarkami?

Jakieś doświadczenie z czymś takim?

Byłbym wdzięczny za wszelkie sugestie.

Answer 1

SVG lub Canvas będą pasować do twoich potrzeb. Prawdopodobnie będziesz miał łatwiejsze opracowywanie tego w SVG po prostu z powodu tego, ile już zrobiono dla ciebie.

Oto niektóre inne względy:

• Canvas działa we wszystkich "nowoczesnych" przeglądarek, ale nie IE7/8
• SVG działa we wszystkich nowoczesnej przeglądarki, a VML (bardzo blisko) jest w IE7/8
• renderowania tekstu w płótnie może wyglądać całkiem inna za przeglądarce Right Now
• Canvas działa w Androidzie i iOS w stopniu (drobne rzeczy jak gradienty tekstowych nadal bałagan)
• SVG nie działa w android (w przynajmniej nie rok temu. Czy coś się zmieni?) Działa to w iOS
• Lepsza dostępność SVG to FAR. Tekst można przeszukiwać, dzięki czemu jest on przyjazny dla SEO, przyjazny dla osób niewidomych, przyjazny dla kopiowania i wklejania itp. Interakcja z resztą DOM jest bardziej naturalna.
• Wydajność na płótnie jest lepsza, ale nie jest to konieczne.

W tym momencie są one jednakowo kompatybilne, z wyjątkiem starszych wersji IE. Możesz poprowadzić ich do pracy z Canvas przy użyciu biblioteki excanvas, ale to trochę jest do bani, zwłaszcza jeśli coś się poruszy.

Polecam SVG wyłącznie dlatego, że będziesz mógł zejść z ziemi, rozwijając go znacznie szybciej w przypadku aplikacji typu floor-plan. Wszystko już jest obiektem DOM. Zdarzenia, obsługa myszy itp. Są już gotowe.

Ale jeśli naprawdę chcesz, aby działał na (starszych?) Telefonach z Androidem, Canvas może być teraz lepszym rozwiązaniem.

Answer 2

Planuję coś podobnego do nawigacji wewnątrz :)

I skończył przy użyciu OpenLayers (http://openlayers.org/)

Właściwie OpenLayers został wymyślony dla GIS Stuff (mapy etc.), ale można łatwo zdefiniować XYZ metryczny układ współrzędnych i po prostu karm go danymi wektorowymi.

Dużą zaletą jest to, że jest wyposażony w wiele funkcji, takich jak rysunek, różne nakładki wektorowej, wykrywanie kolizji, pomiaru odległości, etykiet, znaków itp:

Dla OpenLayers 2.x (pierwotnie), patrz:

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

Dla OpenLayers 3.x patrz:

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

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

Można komunikować się GeoJSON, GML itp z zaplecza. Wykorzystaliśmy PostGIS jako backend do przechowywania danych wektorowych. Istnieje również przestrzenne rozszerzenie dla mysql (http://dev.mysql.com/doc/refman/5.0/en/spatial-extensions.html).

Wystarczy zdefiniować prosty X-Y-Z układu współrzędnych z dobrze wybranego punktu odniesienia :)