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

3D エリア エクスプローラは、魅力的な 3D でコミュニティを探索するためのソリューションです。このソリューションでは、Google の Photorealistic 3D Tiles、Places Search、Place Details、Autocomplete API を利用します。

ご利用方法:

ホストされている 3D エリア エクスプローラ管理アプリを使用する

または

API キーを取得し、GitHub からコードをダウンロードします。

有効にする

• Photorealistic 3D Tiles API
• Places API

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

3D エリア エクスプローラ ソリューションは高度にカスタマイズできるため、カスタマー ジャーニーに合わせてエクスペリエンスをカスタマイズできます。カスタマイズするには、UI のコントロール パネルを使用するか、config.json ファイルを使用します。

カスタマイズしますか？方法は次のとおりです。

ロケーション

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

カメラ制御

カメラの軌道タイプ（従来の円軌道または魅力的な正弦波）を選択して、移動を制御できます。

• 固定軌道:

  特定のスポットを中心とした一定の高さの円軌道です。

  Google シドニー オフィスで、固定された軌道の動作を確認できます。

• 動的軌道:

  カメラは、指定されたスポットの周囲を正弦波の軌道でスムーズに移動します。この独自の動きにより、視聴者はさまざまな高さや角度からスポットを観察でき、動的で没入感のある視覚体験が実現します。

  エッフェル塔を探索して、躍動感のある軌道を体験しましょう。

スポット:

• 探索したい場所の種類を指定して、データ探索をカスタマイズします。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.searchRadius: 付近のスポットを検索するための半径。
• camera.speed: カメラの軌道速度。
• camera.orbitType: カメラの軌道タイプ（「固定軌道」または「動的軌道」）。

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

• 選択した設定を事前に定義することで、ユーザー エクスペリエンスを効率化できます。
• 事前に読み込まれた特定の場所やスポットを使って、ターゲットを絞った経路を共有します。
• 事前構成済みの Area Explorer エクスペリエンスをウェブサイトにシームレスに組み込みます。

URL のカスタマイズ機能を活用することで、カスタマイズされたエクスペリエンスを作成し、キュレートされたアドベンチャーに他のユーザーを招待できます。

注: 完全に読み込まれたカスタマイズ URL をお試しください。 https://js-3d-area-explorer-demo-dev-t6a6o7lkja-uc.a.run.app/#camera.orbitType=fixed-orbit&camera.speed=2.2&poi.types=restaurant&poi.types=parking&poi.types=movie_theater&poi.types=bus_station&poi.density=40&poi.searchRadius=5100

その他のカスタマイズ

前のセクションでは、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 メートル）
• 説明: ビューをリセットするためのカメラの向き、ピッチ、範囲を定義します。
• 値の例:
  • 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: 15,000,000（地上 15,000 km）

• 値の例:

  • longitude: -122.4934、latitude: 37.7951（ゴールデン ゲート ブリッジ）
  • height: 2000（より近い開始位置）

事前定義された場所を読み込む

config.json の location オブジェクトは領域の中心を設定します。これは、Cesium ビューア内のカメラの最初の視点です。coordinates: 最初にカメラをパンする場所の緯度（lat）と経度（lng）を定義します。これらの値を調整して、地球上の任意の場所にカメラを設定します。

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

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

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

注: この方法で使用するジオコードは、Google Maps Platform の利用規約の第 3.4 項に記載されている用語に従う必要があります。30 日間を超えてキャッシュに保存することはできず、30 日が経過した後に更新する必要があります。

この設定では、ジオコーディング ツールを使用してカリフォルニア州マウンテン ビューにある Google 本社の座標を自動的に決定し、その場所を中心としてカメラが配置された 3D Place Navigator アプリが起動します。

注: この方法では、座標を見つけるプロセスが簡素化され、手動で識別する必要性が軽減されます。これにより、構成内の住所または名前を使用して、任意のロケーションをシームレスに探索できます。

高度なカスタマイズ

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

新しいカメラパスを追加

このソリューションでは、すぐに次の 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 アプリケーションの構成ファイルには、demo/src/[config-panel.js](config-panel.js): location、poi、camera の 3 つのメイン セクションがあります。これらの各セクションでは、アプリケーションのさまざまな側面の構成オプションについて説明します。デベロッパーは、特定のニーズに基づいてこれらのセクションをカスタマイズできます。

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 探索エクスペリエンスをカスタマイズするために Area Explorer で使用できるさまざまなカスタマイズ オプションについて説明しました。カメラの動作の変更、視覚的な傾斜の調整、ズームレベルの変更により、選択した設定やスポットをアピールする、ユニークで魅力的なエクスペリエンスを作成できます。

さまざまな構成を試し、特定のニーズに合わせてパラメータを微調整してください。カスタマイズ機能を活用することで、視聴者を魅了し、ビジョンを具現化する没入感のあるパーソナライズされたジャーニーを作成できます。