AutoCADのインタラクティブ2Dフロアプランを表示するには、数年前に作成したFlashビューアを置き換える必要があります。
現在、AutoCADファイルは読み取られ、[〜#〜] x [〜#〜]および[〜#〜]を含むXMLファイルに変換されますy [〜#〜]フロアプランのオブジェクトを表すポリゴンの座標:部屋、壁、アセットなど図面内のオブジェクトはクリック可能で、表示するように設定できますテーマ別ビューに依存するかどうか。
時々これらのフロアプランは比較的大きく、たくさんのポイントを持っているかもしれません。
LeafletJSのようなWebマップコントロールを使用しようとしましたが、これはすでにPANおよびZOOM機能があり、クリック可能なマーカーを挿入できるためです。レイヤーを管理して、テーマ別ビューでオブジェクトを表示または非表示にできるようにします。マップのCRSをメトリックとして設定し、データをGeoJSONとしてロードします。フロアプランのサイズが多すぎる遅い場合があり、無反応になることがあります。
以下の例は18630の線オブジェクトで構成されており、パンにはあまり反応しません。
[〜#〜] svg [〜#〜]または[〜#〜を使用して、ブラウザーで直接フロアプランを描画したいと思います]キャンバス[〜#〜]。 [〜#〜] canvas [〜#〜]を使用することをお勧めします。これは、SVGよりもはるかに高速で、サポートされている場合はWebGLも使用するためです。 イベントハンドラーとDOMのような簡単なオブジェクト管理を行うためのライブラリ。
したがって、threeJSのようなライブラリが2Dオブジェクトをマップする必要があり、それが選択する適切なテクノロジーである場合でも、このようなタスクを簡単に処理できるかどうかを尋ねています。特に、threeJSでそれは可能ですか?
このタスクを達成するためのより良いライブラリやテクノロジーを知っている人がいたら、私はどんな提案も完全に自由です。
(3DはRevitの他のテクノロジーですでに構築されているため、2D図面のみが必要であることに注意してください)
(たとえばthree.jsを介して)webglを使用すると、GPU対応のデスクトップブラウザーで60fpsで数百万の単純なラインプリミティブを描画できます。
これは、three.jsを使用して一緒にスローされた100万を超えるラインプリミティブの不自然な例です。
https://codesandbox.io/s/0pp3x92n4p
そしてここ:
フィーレラの提案に従って、視覚化を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" />
そして結果:
オンInternet Explorer 11は非常に遅く、レンダリングプロセスで大量のCPUを約15秒間使用します。これは、SVGレンダリングよりも、パス要素を追加するためのjsループによるものだと思います。
モバイルでは(ChromeonAndroid)は応答が良く、ロード/レンダリングが高速(〜3-5秒)
期待どおりに動作しても、パフォーマンスを向上させる提案は大歓迎です!!