Google は AI 技術を使用して、コンテンツをご希望の言語に翻訳しています。AI 翻訳には誤りが含まれる場合があります。

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

3D エリアエクスプローラは、魅力的な 3D でコミュニティを探索できるソリューションです。このソリューションでは、Google の高画質 3D タイル、Places Search、Place Details、Autocomplete 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.density: 選択した POI の最大数。
poi.searchRadius: 近くの POI を検索する半径。
camera.speed: カメラの軌道速度。
camera.orbitType: カメラの軌道タイプ（fixed-orbit または dynamic-orbit）。

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 メートル）
説明: ビューをリセットするためのカメラの方向、ピッチ、範囲を定義します。
値の例:
- 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 オブジェクトで指定して、その緯度と経度の座標を取得できます。

ジオコーディングツールにアクセスします。
ジオコーディングリクエストを作成する: [Try It Yourself] セクションをクリックし、[Address] フィールドに選択した場所を入力します。住所、場所の名前、ランドマークなどを指定できます。
座標を生成する: [実行] ボタンをクリックしてリクエストを送信します。このツールは、geometry.location セクションに表示される緯度と経度の座標など、場所に関するさまざまな情報を含むレスポンスを返します。
ジオコードを使用する: レスポンスから取得した緯度と経度の値をコピーし、構成内の 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 行を変更して特定の 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 セクション

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

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