WRLDを使用してリアルタイムデータを使用してモールマップを作成する方法

このチュートリアルでは、WRLDを使用してインタラクティブでリアルタイムの3Dモールマップを構築し、ダイナミックストア情報とナビゲーションを使用したユーザーエクスペリエンスを強化します。 2つのデモを作成します。1つは屋内モールマップにインタラクティブマーカーを追加し、もう1つは色付きのポリゴンを備えた駐車容量を示しています。 完全なプロジェクトはGithubで入手できます

単純なGoogleマップを超えて、WRLDはインタラクティブマーカーを備えた屋内3Dマップを許可し、ユニークなユーザーエクスペリエンスを提供し、マップUIインタラクションを提供します。

このチュートリアルカバー：

セットアップ：

WRLD APIキーの取得と開発環境の準備（node.js、npm、yarn）。

2つのアプローチ：屋内マップコントロール：モール内の簡単なフロアナビゲーションのためのコントロールの実装。
• 自動屋内ビュー：マップを設定して、屋内ビューに自動的にロードするように設定します。
カスタムストアカード：
• リアルタイムデータ（プロモーション、可用性）を表示するダイナミックストアカードの作成。 駐車の利用可能性視覚化：
色付きポリゴンを使用して駐車スペースの占有を表す。
• 前提条件：
• JavaScript Dom、ES6構文、およびES6モジュールの基本的な理解。 WRLDプラットフォームに精通していることは役立ちますが、必須ではありません。
• 始めましょう：

無料のWRLDアカウントを作成してAPIキーを取得します（指示については「動的な3Dマップの構築」を参照）。

マップの構築（カスタムアプリのアプローチ）：

プロジェクトのセットアップ：を初期化し、必要なディレクトリとファイルを作成します。 .js）。 package.json依存関係：インストール
1. 、、、babel（ES6コンピレーション用）、小包（バンドラー）、およびJSONサーバー（ダミーAPI用）。 wrld.jsaxiosapiキー：
wrld apiキーを追加して
2. 基本的なマップ：env.js
in
3. を使用して基本マップを作成し、APIキー、センター座標、ズームレベル、および屋内マップの有効化を指定します。 屋内コントロール：Wrld.map()必要なスクリプト（jQuery、jquery ui、app.js）およびコンテナdiv（
）を追加します。
4. 。で屋内コントロールを初期化します indoor_control.js自動屋内エントリ：widget-containerイベントから屋内マップIDを決定し、index.htmlを使用して、マップロードで屋内ビューを自動的に入力します。 app.js
ストアカードデータ：
5. フォルダーを作成し、ストア情報（座標、連絡先の詳細、営業時間）を含むを入力します。 ローカルAPIサーバーを作成するには、indoormapenterを実行します map.indoors.enter()
ストアカードのデザインと実装：
6. JSONサーバーからデータを取得するためのストアカード（JSRENDERを使用）およびサービス（）のHTMLテンプレートを作成します。ポップアップサービス（）を実装して、マーカークリックでポップアップにストアカードを表示します。マップにマーカーを追加し、クリックリスナーを添付してポップアップサービスをトリガーします。 datadb.json駐車場の可用性：json-server --watch data/db.json個別のHTMLファイル（
）およびjavaScriptファイル（
7. ）を作成します。 駐車場の座標を収集し、を使用してポリゴンを作成します。 カラーコーディングを使用して、駐車場の占有を表します。 socket.io（インストール、api-service.js）を使用してリアルタイムアップデートを実装します。 socket.io接続を処理し、駐車場の更新をブロードキャストするカスタムサーバー（popup-service.js）を作成します。クライアント側のコードを更新して、これらの更新を聞いて処理します。 app.js
8. この詳細な内訳は、これらのインタラクティブな3Dマップを構築するための包括的なガイドを提供します。完全なコードスニペットと詳細については、提供されたリンクをご覧ください。 これらのデモを拡張する可能性は膨大であり、実際のデータソースや幅広いアプリケーションとの統合が可能です。

以上がWRLDを使用してリアルタイムデータを使用してモールマップを作成する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。