3D エリア エクスプローラ: カスタマイズ ガイド

3D エリア エクスプローラは、魅力的な 3D でコミュニティを探索できるソリューションです。このソリューションでは、以下が使用されます。 Google の Photorealistic 3D Tiles Places Search Place Details、 Autocomplete API があります。

ご利用方法:

有効にする

エクスペリエンスをカスタマイズする

3D エリア エクスプローラ ソリューションは高度にカスタマイズ可能で、 カスタマージャーニーに 役立つ情報を提供しますカスタマイズは UI のコントロール パネルまたは config.json ファイルを使用します。

カスタマイズする準備はできましたか？手順は次のとおりです。

場所

緯度と経度を調整して、エクスペリエンスの開始点を定義します config.json ファイルに記述します。

カメラ制御

カメラの軌道のタイプ（クラシック）を選択して、旅をコントロールできます 正弦波でもかまいません

  • 固定軌道:

    一定の高さで、特定の地点を中心とした円の軌道です できます。

    固定軌道の動作を確認するには、Google シドニーオフィスを探索してください。

  • 動的軌道:

    カメラは、指定された領域の周りを正弦波の軌跡として滑らかに移動する 選択しますこの独自の動きは、視聴者がさまざまな高さや角度から被写体を観察できるようにし、ダイナミックで没入感のある映像体験を提供します。

    エッフェル塔を探索して、ダイナミックな軌道を実際に見る Tower です。

スポット（POI）:

  • 撮影したい場所の種類を指定することで、探索をカスタマイズできます できます。config.json の types 配列を使用して、美術館、公園、学校などから選択します。
  • density パラメータ。
  • searchRadius (in meters) を変更して、近くにある隠れたジェムやフォーカスを含める 特定分野に絞って実施できます
  • speed (in revolutions per minute) パラメータを使用して、カメラの移動速度を選択します。

データ探索のプリロード: URL のカスタマイズで詳細を確認する

3D エリア エクスプローラでは、URL でデータ探索を事前に定義可能 カスタマイズが可能です。これにより、手動構成が不要になり、ユーザー エクスペリエンスが合理化されます。

完璧な URL の作成:

特定のパラメータを Area Explorer の URL に追加するだけで、 位置情報などの設定を行えます例:

https://{base-url}/#location.coordinates.lat=40.7424396&location.coordinates.lng=-74.0061439

この URL は、指定された緯度と経度に出発地を設定します。 指定した場所にすぐに移動できます。使用可能なパラメータ:

  • location.coordinates.lat: 選択した場所の緯度。
  • location.coordinates.lng: 選択した場所の経度。
  • poi.types: 表示するスポットタイプのカンマ区切りリスト。
  • poi.density: 選択した POI の最大数。
  • poi.searchRadius: 近くのスポットを検索する半径。
  • camera.speed: カメラの軌道速度。
  • camera.orbitType: カメラの軌道タイプ（「固定軌道」または「ダイナミック軌道」）。

URL のカスタマイズのメリット:

  • 選択した設定をあらかじめ定義して、ユーザー エクスペリエンスを効率化します。
  • 特定のプリロードされた場所やスポットを含む、ターゲット設定されたルートを共有します。
  • 事前構成済みのエリア エクスプローラのエクスペリエンスをウェブサイトにシームレスに埋め込むことができます。

URL のカスタマイズを利用すると、オーダーメイドの体験を作成して、キュレートされたアドベンチャーに他のユーザーを招待できます。

その他のカスタマイズ

前のセクションでは、UI または構成からアクセスできる調整について説明しました。 表示されます。ただし、この他にも設定可能な組み込みパラメータ アプリケーションをさらにカスタマイズできます。

これらの高度なカスタマイズを行うには、 src ディレクトリにある src/utils/cesium.js ファイル。次の アプリケーションの外観や操作性を変更するために、

カメラの高さ

特定の地点に向かって飛ぶときのカメラの高さをコントロール CAMERA_HEIGHT 値の調整。値が大きいほど、ズームアウトしたパノラマビューが表示され、値が小さいほど、そのエリアの詳細が表示されます。

// Camera height (in meters) above the target when flying to a point.
const CAMERA_HEIGHT = 100;
  • 設定: CAMERA_HEIGHT
  • デフォルト値: 100
  • 説明: デフォルトの場所からのカメラの高さ、 どこまでも進んでいます
  • 値の例:
    • 50: 細部まで確認できるクローズアップ写真。
    • 200: よりパノラマ的な視点。

カメラピッチ

最初の 傾斜 BASE_PITCH で定義されます。下向きの傾斜には負の値を使用します 上向きのビューの場合は正の値になりますデータ探索に微妙な動的動きを追加するには、AUTO_ORBIT_PITCH_AMPLITUDE を変更します。

// Pitch 30 degrees downwards
const BASE_PITCH = -30;
// change the pitch by 10 degrees over time
const AUTO_ORBIT_PITCH_AMPLITUDE = 10;
  • 設定: BASE_PITCH、AUTO_ORBIT_PITCH_AMPLITUDE
  • デフォルト値：
    • BASE_PITCH: -30（下方向に 30 度ピッチ）
    • AUTO_ORBIT_PITCH_AMPLITUDE: 10（ピッチを 10 度変更） 時間）

説明: カメラのピッチとは、地図の視覚的な傾斜のことで、単位は 度。これは傾斜とも呼ばれます。これらの設定では、カメラの初期状態を 自動回転中のピッチと動的なピッチ調整。

値の例:

  • BASE_PITCH: 0（レベルのカメラ）
  • AUTO_ORBIT_PITCH_AMPLITUDE: 0（ピッチの変化なし）

カメラの範囲とズーム

これらのパラメータは、特定のフォーカスにフォーカスするときに適用されるズームの程度を設定します あります。値が小さいほどズームが近くなります。

// Distance variation relative to initial range.
const RANGE_AMPLITUDE_RELATIVE = 0.55;

// Determines how much the camera should zoom in or out
const ZOOM_FACTOR = 20;

設定: RANGE_AMPLITUDE_RELATIVE と ZOOM_FACTOR

デフォルト値:

  • RANGE_AMPLITUDE_RELATIVE: 0.55（相対的な距離の変動）
  • ZOOM_FACTOR: 20（カメラのズーム倍率）

説明: この設定では、カメラ使用時の範囲変動を定義します 拡大して詳しく見ることもできます。

値の例:

  • RANGE_AMPLITUDE_RELATIVE: 1（変動なし）
  • ZOOM_FACTOR: 10（ズームが小さい）
// Camera heading (rotation), pitch (tilt), and range (distance) for resetting view.
const CAMERA_OFFSET = {
  heading: 0, // No rotation offset.
  pitch: Cesium.Math.toRadians(BASE_PITCH),
  range: 800, // 800 meters from the center.
};

カメラをリセット

カメラを元の位置にリセットする場合は、 CAMERA_OFFSET 値が使用されます。この設定には、方位（回転）、ピッチ（傾斜）、範囲（カメラの中心からの距離）が含まれます。

  • 設定: CAMERA_OFFSET
  • デフォルト値：
    • heading: 0（回転オフセットなし）
    • pitch: Cesium.Math.toRadians(-30)（下向きに 30 度ピッチ）
    • range: 800（中心から 800 m）
  • 説明: カメラ方角、ピッチ、範囲を定義し、 表示されます。
  • 値の例:
    • heading: 45（度、北西のビュー）
    • range: 1,500 メートル（中心から遠い）

開始座標:

START_COORDINATES は、指定した地点の初期の経度、緯度、高さを定義します。 カメラ。ここからデータ探索を開始するため、目的のエリアに設定します。 ユーザーに最初に見てもらいます

// Default camera start position in longitude, latitude, and altitude.
const START_COORDINATES = {
  longitude: 0,
  latitude: 60,
  height: 15000000, // 15,000 km above the surface
};
  • 設定: START_COORDINATES

  • デフォルト値:

    • longitude: 0
    • latitude: 60
    • height: 15000000（地表から 15,000 km 上）

  • 値の例:

    • longitude: -122.4934、latitude: 37.7951（ゴールデン ゲート ブリッジ）
    • height: 2,000（近くの開始位置）

事前定義の場所を読み込む

config.json の location オブジェクトでエリアの中心を設定します。Cesium ビューアーのカメラの初期視点です。coordinates: 定義 カメラを配置する場所の緯度（lat）と経度（lng） 移動することもできますこれらの値を調整すると、カメラを画面上の任意の場所に設定できます。 できます。

  {
  "location": {
    "coordinates": { "lat": null, "lng": null }
  },

この設定により、3D Place Navigator アプリを起動できます 指定した場所にズームインします。 Google のジオコーディング ツールを使用すると、緯度と経度を取得できます。 住所または場所の座標を location 引数で指定 オブジェクト:

  1. Geocoding ツール。
  2. ジオコーディング リクエストを作成する - [Try It Yourself] をクリックします。セクションと 選択した場所を [住所] に入力します表示されます。アドレスを指定できます。 さらには地名やランドマークなどです。
  3. 座標を生成 [実行] をクリックします。] ボタンをクリックしてリクエストを送信してください。「 場所に関するさまざまな情報を含むレスポンスが返されます。 緯度と経度の座標が geometry.locationセクション。
  4. ジオコードの使用: 取得した緯度と経度の値を 構成内の coordinates オブジェクトに貼り付けます。

注: この方法で使用するジオコードは、Google マップに記載されている規約に準拠している必要があります。 プラットフォーム利用規約 サービス セクション 3.4 では、キャッシュに保存するのは 30 日間を超えてはならず、 更新する必要があります

画像

この構成では、ジオコーディング ツールを使用して、カリフォルニア州マウンテンビューにある Google 本社の座標を自動的に特定し、その場所をカメラの中心にして 3D 地図ナビゲーター アプリを起動します。

高度なカスタマイズ

コードを深く掘り下げることで、さらにカスタマイズすることもできます。 次のセクションでは、いくつかのオプションについて説明します。

新しいカメラパスを追加する

このソリューションは、次の 2 つの異なるカメラパスを実装しています。

fixed-orbit" | "dynamic-orbit"

ただし、必要に応じて新しいカメラパスを作成することもできます。その場合は、

/src/utils/cesium.js（calculateAutoOrbitFrame 関数内）

設定パネルでこの新しいパス計算を使用するには、 demo/src/camera-settings.js. での実装

場所のタイプを追加

構成のスポットタイプのリストは、ファイル demo/src/place-settings.js で調整できます。4 行目は デモでお見せします

デモソースを変更せずに特定の場所タイプを使用する場合は、 poi.types の下の config.json ファイルに追加できます。

スタイルをカスタマイズする（css）

スタイルについては、CSS 変数を使用しました。すべての主要ブラウザでサポートされており、1 行を 1 か所で変更して、特定の CSS プロパティを更新できます。CSS 変数は src/main.css. で定義されています。 全体の色、フォント設定、パディングや余白を調整できます。 説明します。

追加データをオーバーレイする

追加のデータをオーバーレイするには、src/utils/cesium.js ファイルを更新し、 GeoJSON またはその他の位置情報を参照する方法については、Cesium のドキュメントを参照してください。 エクスポートできます。

構成セクションを削除する

この JavaScript アプリケーションには、メインとなる 3 つのセクションが 構成ファイル: demo/src/[config-panel.js](config-panel.js): location、 poi、camera。各セクションでは、Terraform の構成オプションを さまざまな側面に関与します。デベロッパーはこれらのセクションをカスタマイズできます 選択することもできます

1.設定から特定のセクションを削除する

  • ロケーション セクション

location セクションを削除するには、コード内で次の行を探し、 コメントまたは削除します。

const locationConfig = { ...config.location, ...customConfig.location };
  • スポット セクション

poi セクションを削除するには、コードで次の行を見つけてコメント化するか削除します。

const poiConfig = { ...config.poi, ...customConfig.poi };
  • カメラ セクション

camera セクションを削除するには、コード内の次の行を探し、コメントにします。 削除します。

const cameraConfig = { ...config.camera, ...customConfig.camera };

2. 組み合わせた構成の更新

セクションを削除したら、結合された構成オブジェクトを更新することが重要です。このオブジェクトは、デフォルトの構成と任意のカスタマイズを統合します。 combinedConfig オブジェクトから対応するプロパティを削除します。

const combinedConfig = {
 location: { ...config.location, ...customConfig.location }, // Remove if location section is removed

 poi: { ...config.poi, ...customConfig.poi }, // Remove if poi section is removed
 camera: { ...config.camera, ...customConfig.camera }, // Remove if camera section is removed
};

3. UI 要素を調整する

セクションの削除も関連する UI 要素の削除も意味する場合は、コードを更新する 適宜 HTML コード内に記述します。たとえば、特定の会話を セクションから [カメラ速度] から切り替える場合は、[カメラ速度] と js と html コードを使用します

4. カメラ設定セクションを削除

UI からカメラ設定セクションを削除するには、次の行を見つけて コメントまたは削除します。

const cameraSettingsSecgetCameraSettingsSection(cameraConfig);

地域セクションの概要の削除

const locationSection = await getLocationSettingsSection(locationConfig);

まとめ

このドキュメントでは、利用可能なさまざまなカスタマイズ オプションを見てきました。 を使用して 3D 探索エクスペリエンスをカスタマイズできます。変更する カメラの動作、視覚的な傾斜の調整、ズームレベルの変更など、 選択した設定やポイントを紹介するユニークで魅力的なエクスペリエンス できます。

さまざまな構成でテストし、構成を微調整することを忘れないでください。 パラメータを使用できます。カスタマイズの力を活用することで、視聴者を魅了し、ビジョンを実現する没入感のあるパーソナライズされたジャーニーを作成できます。