web-dev-qa-db-ja.com

html5とJavaScriptを使用したインタラクティブな2Dフロアプランをブラウザーに表示する

AutoCADのインタラクティブ2Dフロアプランを表示するには、数年前に作成したFlashビューアを置き換える必要があります。

現在、AutoCADファイルは読み取られ、[〜＃〜] x [〜＃〜]および[〜＃〜]を含むXMLファイルに変換されますy [〜＃〜]フロアプランのオブジェクトを表すポリゴンの座標：部屋、壁、アセットなど図面内のオブジェクトはクリック可能で、表示するように設定できますテーマ別ビューに依存するかどうか。

時々これらのフロアプランは比較的大きく、たくさんのポイントを持っているかもしれません。

LeafletJSのようなWebマップコントロールを使用しようとしましたが、これはすでにPANおよびZOOM機能があり、クリック可能なマーカーを挿入できるためです。レイヤーを管理して、テーマ別ビューでオブジェクトを表示または非表示にできるようにします。マップのCRSをメトリックとして設定し、データをGeoJSONとしてロードします。フロアプランのサイズが多すぎる遅い場合があり、無反応になることがあります。

以下の例は18630の線オブジェクトで構成されており、パンにはあまり反応しません。

enter image description here

[〜＃〜] svg [〜＃〜]または[〜＃〜を使用して、ブラウザーで直接フロアプランを描画したいと思います]キャンバス[〜＃〜]。 [〜＃〜] canvas [〜＃〜]を使用することをお勧めします。これは、SVGよりもはるかに高速で、サポートされている場合はWebGLも使用するためです。 イベントハンドラーとDOMのような簡単なオブジェクト管理を行うためのライブラリ。

したがって、threeJSのようなライブラリが2Dオブジェクトをマップする必要があり、それが選択する適切なテクノロジーである場合でも、このようなタスクを簡単に処理できるかどうかを尋ねています。特に、threeJSでそれは可能ですか？

  1. イベントリスナーをオブジェクトに割り当ててIDを取得するには？
  2. 部屋やテーブルを強調表示するなど、CSS3ルールをスタイルオブジェクトに適用するには
  3. ThreeJSはSVGまたはCanvas要素の両方に簡単に描画できますか？
  4. ThreeJSを使用すると、パンとズームも簡単に管理できますか？
  5. モバイルデバイスでも表示できますか？ （AndroidおよびiOS）

このタスクを達成するためのより良いライブラリやテクノロジーを知っている人がいたら、私はどんな提案も完全に自由です。

（3DはRevitの他のテクノロジーですでに構築されているため、2D図面のみが必要であることに注意してください）

javascripthtmlsvgcanvasthree.js
7
Giox

（たとえばthree.jsを介して）webglを使用すると、GPU対応のデスクトップブラウザーで60fpsで数百万の単純なラインプリミティブを描画できます。

これは、three.jsを使用して一緒にスローされた100万を超えるラインプリミティブの不自然な例です。

https://codesandbox.io/s/0pp3x92n4p

そしてここ：

http://vectorslave.com/wireblueprint/index.html

enter image description here

Here is a version using your sample data, duplicated 100x to create approx 1.8 million lines

2
manthrax

フィーレラの提案に従って、視覚化をSVGに実装し、18630行で構成される同じモデルを描画しました。

これは、GeoJSON Leafletメトリックマップよりも確実に速くロードされます。

SVGは、建物とフロアをクエリするAPIによって提供され、アーキテクチャを要素（text/plain）として返します。この要素は、私のWebページの要素に追加します。

文字列パス要素をSVG DOM要素に追加するために、私は parseSVGライブラリ を使用しました。

panとzoomの「ネイティブ」サポートが見つからないため、jQueryライブラリを使用しました：- Ariutta SVGのパンとズーム

Ariutta SVGパン＆ズームを使用すると、pinchやtouchなどのモバイルイベントも聞くことができるはずです。

JavaScriptコードは次のとおりです。

<div id="mapArea">
     <svg id="map" xmlns="http://www.w3.org/2000/svg" x="0" y="0" style="stroke: #00ff00; stroke-width: 0.2px;background:#000">
     </svg>
</div>

<script type="text/javascript">
    var container = document.getElementById('mapArea'),
        width = container.offsetWidth,
        svgMap = document.getElementById('map');

    svgMap.setAttribute('width', width);
    svgMap.setAttribute('height', width * 0.5);

    $(document).ready(function () {

        $.ajax({
            type: "GET",
            url: "/Public/GetSVGPlan.aspx?building=1423&floor=3",
            dataType: "text",
            success: function (result) {
                svg = parseSVG(result);
                svgMap.appendChild(svg);
                svgPanZoom('#map', {
                    zoomEnabled: true,
                    controlIconsEnabled: true,
                    fit: true,
                    center: true
                });
            },
            error: function (error) {
                console.log(error);
            }
        });
    });
</script>

APIによって返されるパス要素は次のようになります。

<path d="M173.7043 66.758, L173.7054 66.7701" />
<path d="M191.947 64.2563, L191.9198 63.9453" />
<path d="M129.3072 12.2843, L129.3301 12.3702" />
<path d="M129.3301 12.3702, L131.701 11.735" />
<path d="M191.6087 63.9725, L191.636 64.2836" />
<path d="M173.7054 66.77, L172.5553 66.9803" />
<path d="M131.3573 11.735, L129.3072 12.2843" />
<path d="M195.8466 63.9148, L195.8194 63.6037" />
<path d="M172.5553 66.9803, L172.6882 66.9687" />
<path d="M129.3074 12.2841, L129.2449 11.7366" />
<path d="M195.7694 63.6081, L195.8194 63.6037" />
<path d="M172.6882 66.9687, L173.7064 66.7821" />
<path d="M129.2451 11.7368, L129.2451 9.5381" />
<path d="M195.5083 63.631, L201.43 63.1124" />
<path d="M226.9927 14.458, L228.0006 14.4593" />
<path d="M173.7064 66.7821, L173.7075 66.7942" />
<path d="M129.2451 9.5381, L131.6964 9.5381" />
<path d="M201.4572 63.4235, L195.5356 63.9421" />

そして結果：

enter image description here

オンInternet Explorer 11は非常に遅く、レンダリングプロセスで大量のCPUを約15秒間使用します。これは、SVGレンダリングよりも、パス要素を追加するためのjsループによるものだと思います。

モバイルでは（ChromeonAndroid）は応答が良く、ロード/レンダリングが高速（〜3-5秒）

期待どおりに動作しても、パフォーマンスを向上させる提案は大歓迎です!!

1
Giox