web-dev-qa-db-ja.com

HTML5のインタラクティブなフロアプラン

Flashベースの前任者の後継となる、アパートのインタラクティブなフロアプランナビゲーターとビューアーを開発する必要があります。

私は現在、これをHTML5に実装するのに最適な手法と技術を評価しているところです。すべての一般的なブラウザーをサポートする必要があります（IE 7以降）。

要件：

  • ユーザーには建物のいくつかの静的な屋外ビューが表示され、その間で簡単なウィジェットで切り替えることができます。
  • 彼らはこの外の景色の床を選択することができます。マウスオーバー（タッチデバイスの場合はクリック）すると、床が強調表示されます。
  • フロアをクリックすると、フロアプランに切り替わります。これも、マウスオーバー/オンクリックで、アパートに関する詳細情報を提供します。
  • 一部のアニメーションが関与する必要がありますが、あまり凝ったものはありません。

私はこれを実装するためのオプションを考えています。また、開発者以外が新しい建物を作成できるように、フロア（概要）とアパートメント（フロアプラン）のポリゴンをすばやく選択する方法も必要です。

私が思いついたオプション：

  1. レイオーバーにはプレーンイメージとイメージマップを使用します。
  2. Canvasを使用します（サポートされていないブラウザー用のGoogleのJavaScriptソリューションを利用します）。 canvasタグに画像を読み込み、動的にレイオーバーを作成します。
  3. SVGを使用する

ブラウザ間の互換性のための最良のオプションは何ですか？

htmlcanvasinteractive
20
theduke

SVGまたはCanvasのどちらでもニーズに適合します。 SVGでこれを開発する時間は、すでにいくらか行われているというだけの理由でおそらく楽になります。

その他の考慮事項は次のとおりです。

  • Canvasはすべての「モダン」ブラウザで動作しますが、IE7/8では動作しません
  • SVGはすべての最新ブラウザーで動作し、VML（非常に近い）はIE7/8にあります
  • Canvasでのテキストレンダリングは、ブラウザーごとにかなり異なるように見える場合があります
  • CanvasはAndroidおよびiOSである程度機能します（テキストのグラデーションなどのマイナーなものはまだ混乱しています）
  • SVGはAndroid=で動作しません（少なくとも1年前には動作しませんでした。何か変更はありますか？）iOSでは動作します
  • SVGのアクセシビリティは[〜＃〜] far [〜＃〜]優れています。テキストは検索可能であるため、SEOフレンドリー、ブラインドフレンドリー、コピーアンドペーストフレンドリーなどです。DOMの残りの部分を操作する方がはるかに自然です。
  • キャンバスのパフォーマンスは優れていますが、それは必要ありません。

この時点では、互換性に関してはかなり同等であり、古いバージョンのIEを除きます。 excanvasライブラリを使用してCanvasでそれらを動作させることができますが、特に何かが移動する場合は、ややひどいです。

フロアプランタイプのアプリの場合、SVGをはるかに速く開発できるため、SVGをお勧めします。すべてがすでにDOMオブジェクトです。イベント、マウス処理などはすでに行われています。

しかし、あなたが本当にそれを（古い？）で動作させたい場合は、Android電話の場合、今のところCanvasの方が良いかもしれません。

11
Simon Sarris

私は屋内ナビゲーションについても同様のものを計画しています:)

最終的にはOpenLayersを使用しました（ http://openlayers.org/ ）

実際、OpenLayersはGISスタッフ（マップなど）のために考案されましたが、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座標系を定義するだけです:)

10
sled