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

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

スタートガイド

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

または

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

有効にする

• 高画質 3D タイル 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 の作成:

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 タイプのカンマ区切りのリスト。
• poi.density: 選択した POI の最大数。
• poi.searchRadius: 近くのスポットを検索する半径。
• camera.speed: カメラの軌道速度。
• camera.orbitType: カメラの軌道タイプ（「fixed-orbit」または「dynamic-orbit」）。

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 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]（場所）セクション

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

const locationConfig = { ...config.location, ...customConfig.location };

• POI セクション

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

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