高速インタラクティブマップ用に大きな画像を準備する

インタラクティブなマップでは、通常の Web 写真よりもはるかに高い画像パフォーマンスが要求されます。訪問者はパン、ピンチ、ズームインして、細かい建築ラベル、ユニットの寸法、個々のブースの境界を検査します。

画像が小さすぎると、拡大するとテキストや線がぼやけて読めなくなります。画像が非圧縮の 80MB の未加工エクスポートである場合、ページの読み込み時間が急増し、直帰率が増加し、メモリの制約によりモバイル デバイスがクラッシュします。

Layerpin は、ディープズーム タイル アーキテクチャを使用してこのギャップを埋めます。ソース画像を正しく準備することで、カミソリのような鋭いベクトルのような明瞭さでパンとズームの瞬時の応答性を実現します。

マスター プランまたはフロア プランを設計ソフトウェア (AutoCAD、Revit、Adobe Illustrator、Canva、または Figma) からエクスポートする場合、最適な結果を得るために次のエクスポート ルールに従ってください。

ベクター CAD およびブループリントの場合: 高品質の PNG または WebP として 2 倍または 3 倍のスケールでエクスポートします。広いズームオーバービューで細かい壁の境界が消えないように、線の太さは少なくとも 1 pt ～ 1.5 pt の太さであることを確認してください。

航空写真およびドローン写真の場合: 85 ～ 90% の品質でプログレッシブ JPEG または WebP としてエクスポートします。人間の目では 85% の品質では圧縮アーティファクトを検出できませんが、非圧縮の 100% エクスポートと比較してファイル サイズは最大 70% 削減されます。

画像を Layerpin にアップロードすると、処理パイプラインによって複数解像度の画像ピラミッド (ディープズーム タイル) が生成されます。

Layerpin は、モバイル ブラウザーに 50 MB の画像を一度にダウンロードさせるのではなく、訪問者の現在のビューポートとズーム レベル内に表示される特定のマイクロタイルのみを動的にストリーミングします。低ズームでは、低帯域幅の概要タイルが即座にロードされます。ユーザーが 402 号室にズームインすると、高解像度のタイルの断片がシームレスに流れ込みます。

このアーキテクチャは、非常に大規模なアーキテクチャ マスター プランをサポートしながら、初期イメージ転送を削減します。実際の読み込み時間は、画像の準備、ネットワークの状態、ホスティング、訪問者のデバイスによって異なります。

マップを公開する前に、必ず実際のマルチデバイス監査を実行してください。

公開されたマップをプライベート ブラウザ ウィンドウで開き、デスクトップ 4K/Retina ディスプレイ、セルラー接続のミッドレンジ携帯電話、横向きと縦向きの両方のタブレットの 3 つの条件でテストします。

初期のデフォルト ズームでは、すぐにズームする必要がなく、対象領域全体が表示されることを確認し、キャンバスの最も遠い隅をパンしたときにテキスト ラベルが鮮明なままであることを確認します。