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

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

ご利用方法:

ホスト型の 3D エリア エクスプローラ管理アプリを使用します。

または

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

有効にする

• Photorealistic 3D Tiles API
• Places API

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

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

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

場所

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

カメラ制御

カメラの軌道タイプ（従来の円形の軌道または興味深い正弦波）を選択して、撮影をコントロールできます。

• 固定軌道:

  これは、特定の対象物を中心に、一定の高さで円形に飛行する軌道です。

  Google シドニーオフィスを探索して、固定軌道の動作をご覧ください。

• 動的軌道:

  カメラは、指定された撮影スポットの周りを正弦波の軌道でスムーズに移動します。この独自の動きは、視聴者がさまざまな高さや角度から被写体を観察できるようにし、ダイナミックで没入感のある映像体験を提供します。

  エッフェル塔を探索して、動的軌道の動作を確認しましょう。

スポット（POI）:

• 探索する場所の種類を指定することで、データ探索をカスタマイズできます。config.json の types 配列を使用して、美術館、公園、学校などから選択します。
• density パラメータを調整して、表示されるスポットの最大数を設定します。
• searchRadius (in meters) を変更して、近くの隠れた名所を含めたり、特定のエリアに焦点を当てたりできます。
• speed (in revolutions per minute) パラメータを使用して、カメラの移動速度を設定します。

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

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

適切な URL を作成する:

エリア エクスプローラの 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 のカスタマイズを利用すると、カスタマイズしたエクスペリエンスを作成し、他のユーザーを招待してキュレートされたアドベンチャーに誘うことができます。

注: 完全に読み込まれたカスタマイズされた 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: 15000000（地表から 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 プレイス ナビゲーター アプリを、選択した特定の場所を拡大して開始できます。Google のジオコーディング ツールを使用すると、住所または地名の緯度と経度の座標を取得できます。その場合は、location オブジェクトで指定します。

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

注: この方法で使用するジオコードは、Google Maps Platform の利用規約の第 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 アプリケーションの構成ファイルには、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 探索をカスタマイズできます。カメラの動作を変更したり、視覚的な傾斜を調整したり、ズームレベルを変更したりすることで、選択した設定やスポットをアピールする、ユニークで魅力的なエクスペリエンスを作成できます。

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