3D エリア エクスプローラは、 迫力のある 3D です。このソリューションは、以下を活用します。 Google の Photorealistic 3D Tiles Places Search Place Details、 Autocomplete API があります。
ご利用方法:
有効にする
エクスペリエンスをカスタマイズする
3D エリア エクスプローラ ソリューションは高度にカスタマイズ可能で、
カスタマージャーニーに
役立つ情報を提供しますカスタマイズは
UI のコントロール パネルまたは config.json
ファイルを使用します。
カスタマイズの準備はできましたか?手順は次のとおりです。
場所
緯度と経度を調整して、エクスペリエンスの開始点を定義します
config.json
ファイルに記述します。
カメラ制御
カメラの軌道のタイプ(クラシック)を選択して、旅をコントロールできます 正弦波でもかまいません
固定軌道:
一定の高さで、特定の地点を中心とした円の軌道です できます。
Google シドニーの 探索 で、実際の周回軌道を見る できます。
動的軌道:
カメラは、指定された領域の周りを正弦波の軌跡として滑らかに移動する 選択しますこのユニークな動きにより、視聴者は重要な点を観察できます。 さまざまな高さと角度からの画像を提供し、 没入感あふれるビジュアル体験を提供できます
エッフェル塔を探索して、ダイナミックな軌道を実際に見る Tower です。
スポット(POI):
- 撮影したい場所の種類を指定することで、探索をカスタマイズできます
できます。
types
を使用して、博物館、公園、学校などから選択しましょうconfig.json
の配列。 -
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 のカスタマイズのメリット:
- 選択した設定をあらかじめ定義して、ユーザー エクスペリエンスを効率化します。
- あらかじめ読み込まれた特定の場所やスポットで、対象とする経路を共有する。
- 事前構成済みのエリア エクスプローラのエクスペリエンスをウェブサイトにシームレスに埋め込むことができます。
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 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
: 0latitude
: 60height
: 15000000(地上 15,000 km)
値の例:
longitude
: -122.4934、latitude
: 37.7951(ゴールデン ゲート ブリッジ)height
: 2,000(近くの開始位置)
事前定義の場所を読み込む
config.json
の location
オブジェクトでエリアの中心を設定します。こちらの
Cesium ビューアで表示されるカメラの初期視点。coordinates
:定義
カメラを配置する場所の緯度(lat
)と経度(lng
)
移動することもできますこれらの値を調整すると、カメラを画面上の任意の場所に設定できます。
できます。
{
"location": {
"coordinates": { "lat": null, "lng": null }
},
この設定により、3D Place Navigator アプリを起動できます 指定した場所にズームインします。 Google のジオコーディング ツールを使用すると、緯度と経度を取得できます。 住所または場所の座標を location 引数で指定 オブジェクト:
- Geocoding ツール。
- ジオコーディング リクエストを作成する - [Try It Yourself] をクリックします。セクションと 選択した場所を [住所] に入力します表示されます。アドレスを指定できます。 さらには地名やランドマークなどです。
- 座標を生成 [実行] をクリックします。] ボタンをクリックしてリクエストを送信してください。「
場所に関するさまざまな情報を含むレスポンスが返されます。
緯度と経度の座標が
geometry.location
セクション。 - ジオコードの使用: 取得した緯度と経度の値を
構成内の
coordinates
オブジェクトに貼り付けます。
注: この方法で使用するジオコードは、Google マップに記載されている規約に準拠している必要があります。 プラットフォーム利用規約 サービス セクション 3.4 では、キャッシュに保存するのは 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 変数は src/main.css.
で定義されています。
全体の色、フォント設定、パディングや余白を調整できます。
説明します。
追加データをオーバーレイする
追加のデータをオーバーレイするには、src/utils/cesium.js ファイルを更新し、 GeoJSON またはその他の位置情報を参照する方法については、Cesium のドキュメントを参照してください。 エクスポートできます。
構成セクションを削除する
この JavaScript アプリケーションには、メインとなる 3 つのセクションが
構成ファイル: demo/src/[config-panel.js](config-panel.js): location
、
poi
、camera
。各セクションでは、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 探索エクスペリエンスをカスタマイズできます。変更する カメラの動作、視覚的な傾斜の調整、ズームレベルの変更など、 選択した設定やポイントを紹介するユニークで魅力的なエクスペリエンス できます。
必ず、さまざまな構成でテストし、構成を微調整する パラメータを使用できます。Google Cloud の カスタマイズにより、顧客の心をとらえる没入感のあるパーソナライズされたジャーニーを構築できます。 ビジョンを現実化することです