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

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

ご利用方法:

有効にする

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

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

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

場所

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

カメラ制御

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

  • 固定軌道:

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

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

  • 動的軌道:

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

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

スポット(POI):

  • 撮影したい場所の種類を指定することで、探索をカスタマイズできます できます。config.jsontypes 配列を使用して、美術館、公園、学校などから選択します。
  • 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_PITCHAUTO_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_RELATIVEZOOM_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.jsonlocation オブジェクトでエリアの中心を設定します。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.jscalculateAutoOrbitFrame 関数内)

設定パネルでこの新しいパス計算を使用するには、 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): locationpoicamera。各セクションでは、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 探索エクスペリエンスをカスタマイズできます。変更する カメラの動作、視覚的な傾斜の調整、ズームレベルの変更など、 選択した設定やポイントを紹介するユニークで魅力的なエクスペリエンス できます。

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