Open Hinata 3

3D表示・陰影設定

地形の立体表示・陰影効果・標高強調で
地図を3Dで可視化

OH3を開いて試す
🗻

3D表示とは

OH3の3D表示は、産総研(AIST)の標高タイルを使って地形を立体的に表現する機能です。MapLibre GL JSのTerrain機能を活用し、ブラウザ上でリアルタイムに3D地形を描画します。

3つのモード
  • 平面 — 真上から見た通常の地図
  • 傾ける — 地図を平面のまま傾けて3D風に表示。建物や地図ラベルを斜めから見る効果
  • 地形 — 標高タイルで実際の地形の起伏を立体表示。山・谷・尾根が凹凸で表現される

3D表示ではピッチ(傾き)とベアリング(回転)を操作して、任意の角度から地形を眺めることができます。

🔄
Section 2

3Dモードの切り替え方

右下の3Dボタンをクリック 地図右下の3Dボタンをクリックすると、3D表示パネルが開きます。
平面 / 傾ける / 地形 から選択 パネル上部の平面・傾ける・地形から選びます。モードを選んでもパネルは開いたままです。
パネルを閉じる パネル右上の×、もう一度3Dボタン、または Esc で閉じます。パネルはヘッダーをつかんで好きな場所へ動かせます。
平面に戻すと

「平面」を選ぶと、真上から見下ろす通常の2D地図表示に戻ります。3D表示中は3Dボタンに縁取りが付きます。

🎮
Section 3

傾き・回転

3D表示パネルのボタンで、傾き(ピッチ)と回転(ベアリング)を操作できます。

ボタン操作説明
↑傾ける地図を倒して斜めから見る
↓起こす真上から見る向きに戻していく
↶左に回す地図を反時計回りに回転
↷右に回す地図を時計回りに回転
⟲戻す真上・北向きに戻す
操作のコツ
  • 押している間だけ動く — ボタンを押し続けると連続的に傾き・回転します
  • マウス操作 — 右クリック+ドラッグでも傾きと回転を操作可能
⛰️
Section 4

標高強調

標高強調は、地形の起伏を誇張して表示する機能です。平坦な地形でも微地形を把握しやすくなります。

設定方法

3D表示パネルの「標高強調」スライダーで調整します(基本設定 → 操作タブのスライダーでも同じ値を変えられます)。

項目範囲説明
標高強調1.0倍 〜 10.0倍地形の起伏の誇張度(0.1刻み)
標高強調の目安
  • 1.0倍 — 実際の標高比率。通常の3D表示
  • 1.5〜2.0倍 — 丘陵地帯の微地形を確認するのに最適
  • 3.0〜5.0倍 — 平野部でも河岸段丘や台地が明瞭に
  • 10.0倍 — 最大強調。地形の構造を大きく誇張して表示
注意

標高強調は「地形」モードのときだけ有効です。「平面」「傾ける」ではパネルのスライダーが薄く表示され、効果はありません。

🌄
Section 5

陰影

3D表示パネルの「陰影」スライダーで、地図に地形の光と影(陰影起伏)を重ねて立体感を出せます。

操作結果
右へ動かす陰影が付き、右ほど濃くなる(右上に「60%」のように強さを表示)
左端まで下げる陰影なし
陰影のポイント
  • 動かしている間も反映 — スライダーを動かしながら地図の見え方を確かめられます
  • どのモードでも使える — 平面・傾ける・地形のどれでも陰影を付けられます
  • 地図ごとに設定 — 2画面のときは左右の地図で別々に設定できます
レイヤーごとの陰影

ダイナミック標高図・カスタム標高図などのレイヤーには、それぞれのパネルに別の「陰影」があります。こちらはそのレイヤーだけに付く陰影です。

🔗
Section 6

URL共有

3D表示の状態はURLパラメータに保存されるため、現在の3D表示をそのままURLで共有できます。

URLパラメータ一覧

パラメータ値説明
terrain0 / 13D(地形あり)の有効/無効
terrainLevel1.0〜10.0標高強調の倍率
pitch010〜85ピッチ角度
bearing0〜360ベアリング角度
URL例

?terrain=1&terrainLevel=1.5&pitch01=60&bearing=0
地形あり3D、標高強調1.5倍、ピッチ60°、北向き

共有のコツ

ブラウザのアドレスバーのURLをそのままコピーするだけで、位置・ズーム・3D状態が含まれたURLを共有できます。受け取った側も同じ3D視点で地図が表示されます。

⌨️
Section 7

キーボードショートカット

陰影が出ているとき、キーボードから陰影を細かく調整できます。

キー操作
Alt + J陰影を -5%
Alt + K陰影を +5%
Alt + H陰影の方式を切り替え(多方向 / 単方向)
Alt + ← / →光源の方位を ∓5°(単方向のとき)
🎨
Section 9

3Dジオラマ

3Dジオラマは、地図上でフリーハンドで囲んだ範囲をThree.jsでジオラマ風の3Dモデルとして表示する機能です。航空写真のテクスチャが自動的にマッピングされ、建物の3D表示やミニチュア効果も適用できます。

フリーハンドスケッチを開く 左パネルのスケッチアイコンからフリーハンドスケッチを起動します。
範囲をフリーハンドで囲む 地図上でジオラマにしたい範囲をフリーハンドで囲みます。地形がある程度ズームされた状態で描画してください。
3Dジオラマが自動表示 描画完了後、標高データの取得とテクスチャのレンダリングが行われ、3Dジオラマが自動的に表示されます。
3Dジオラマの機能
  • 航空写真テクスチャ — 囲んだ範囲の航空写真を自動マッピング
  • PLATEAU建物立体化 — PLATEAU対応エリアでは建物が3Dで表示
  • ミニチュア効果 — ティルトシフト風のミニチュアモデル表示
  • 強調倍率 — 地形の高低差を誇張表示(0.5〜10倍)
  • 海面上昇シミュレーション — 2D地図の海面上昇レイヤーと連動。ジオラマ内スライダーで水位をリアルタイムに変更でき、水深に応じた着色と水面プレーンで浸水状況を立体的に確認
  • STLエクスポート — 3Dモデルを STL 形式でダウンロード(3Dプリンタ対応)

3Dジオラマの操作

操作動作
ドラッグ3Dモデルを回転
スクロールズームイン/アウト
Shift+ドラッグ or 右ドラッグパン(平行移動)
リセットボタンカメラ位置を初期状態に戻す

海面上昇シミュレーション(3D連動)

2Dの海面上昇シミュレーションレイヤーをONにした状態でジオラマを起動すると、ジオラマ内に海面スライダーが表示されます。

URLで3Dジオラマを共有

3Dジオラマの画面にあるURLボタンを押すと、現在のカメラアングル・強調倍率・ミニチュア状態を含んだURLがクリップボードにコピーされます。このURLを開くと、同じ視点で3Dジオラマが再現されます。

おすすめの使い方

山岳地形を囲んでミニチュア効果をONにすると、精巧なジオラマ模型のような表示になります。STLエクスポートと組み合わせれば、3Dプリンタで実際の地形模型を作成できます。

📐
Section 10

3D断面図

断面図のルートに沿った地形をThree.jsで3Dモデル化して表示する機能です。断面図パネルからルートを描くと、D3チャートとともに3D断面図が自動的に表示されます。

3D断面図の特徴
  • 航空写真テクスチャ — ルート沿いの地形に航空写真を自動マッピング
  • マーカー表示 — 始点・終点・最高点・最低点にマーカーを配置
  • D3チャート連動 — チャート上のホバー位置が3Dモデル上にもリアルタイム表示
  • 強調倍率 — 地形の高低差を誇張表示(0.5〜10倍)
  • STLエクスポート — STL 形式でダウンロード

操作方法やURL共有は3Dジオラマと同じです。詳しくは断面図ガイドの3D断面図セクションをご覧ください。

💡

活用事例

🏔️ 山岳地形の可視化

「地形」で山岳地帯を表示し、標高強調を1.5〜2.0倍に設定。陰影を強めにすると、尾根・谷・斜面の構造が明瞭に把握できます。登山計画やルート確認に活用できます。

🚨 防災(土砂災害リスクの立体把握)

急傾斜地や土石流の危険区域を3D表示で確認。標高強調を高めに設定することで、地形の傾斜や谷筋を直感的に把握でき、土砂災害リスクの評価に役立ちます。

📊 プレゼン(クライアント向け3D表示)

陰影と標高強調で印象的な3D地図を作成し、URLで共有。クライアントや関係者に対して、開発予定地の地形をわかりやすく説明できます。

📐 測量(地形確認)

現場の地形を事前に3Dで確認。標高強調で微地形を把握し、測量計画の立案や現場の下見に活用できます。陰影で地形の起伏を強調すると、等高線では読み取りにくい地形の特徴が見えてきます。

3D表示を体験してみましょう

右下の3Dボタンから3D表示パネルを開く

OH3を開く