[2026/10/11]

[WEB Tool] Elevation Profile v1.0 — 地図に線を引くだけで、標高の断面図が出る使い方ガイド

[WEB Tool] Elevation Profile v1.0 — 地図に線を引くだけで、標高の断面図が出る使い方ガイド

概要

Elevation Profile は、地図の上に引いた線に沿って、標高の変化を断面図にする、WEBツールです。登山のコースの高低差、道や川の勾配、2 つの山の間の谷の深さなどを、線を引くだけで見られます。

標高は、国土地理院の標高タイル（ズーム 14、約 10 m メッシュ）から、ブラウザが直接読みます。地図の上で、点を打つ、動かす、消すができて、断面図は、そのたびに描き直されます。

断面図の上にマウスを乗せると、その場所の標高、距離、勾配が出て、地図にも印が出ます。逆に、地図の線の上にマウスを乗せても、断面図に印が出ます。書き出しは、PNG、CSV、GeoJSON に対応しています。

データはすべてお使いの端末（ブラウザ内）で処理されます。打った点や線を、このサイトのサーバーへ送信することはありません。標高と地図のタイルは、国土地理院のサーバーから、ブラウザが直接取得します。

Elevation Profile

アプリのリンク。

スタートメニューから起動

トップページのスタートメニューからも起動できます。

地図に折れ線を引いて、下に断面図が出た Elevation Profile

スクリーンショット

富士山の周りに線を引いたところ

地図に折れ線を引いて、下に断面図が出た Elevation Profile

Pointを複数作成

地図に折れ線を引いて、下に断面図が出た Elevation Profile

ヘルプのダイアログ

使い方と断面図の見方を書いたヘルプのダイアログ

動画

ツールの特徴

  • 地図に線を引くだけ: 点を 2 つ以上打つと、断面図が出ます。点を増やすと、折れ線になります
  • 点を自由に直せる: ドラッグで移動、右クリックで削除、Ctrl+Z で 1 つ戻す
  • 地図と断面図が連動: どちらにマウスを乗せても、もう一方に、その場所の印が出ます
  • 要約の数値: 距離、始点と終点の標高、最高点、最低点、登りと下りの合計、平均勾配、いちばん急な登りと下り
  • 縦の倍率を選べる: auto、×1（実際の形）、×2、×5、×10
  • 4 種類の地図: 地図、淡色地図、航空写真、色別標高図
  • プリセットと住所検索: 富士山、槍ヶ岳〜穂高岳、立山〜剱岳などを選べます。地名や住所でも探せます
  • 4 種類の書き出し: PNG、CSV、GeoJSON、線を復元できるリンク
  • 完全ローカル処理: 点や線は、サーバーへ送信されません

まず試す：プリセットを開く

  1. 左の「PLACE」で、「（行き先を選ぶ）」の一覧から、「富士山（東西）」を選びます。
  2. 地図が動いて、2 点の線が引かれます。下に、富士山を東西に横切る断面図が出ます。
  3. 断面図の上に、マウスを乗せてみてください。標高、距離、勾配が出て、地図の線の上にも、印が動きます。
  4. 地図の線の、まん中あたりをクリックして、点を 1 つ足してみてください。折れ線になって、断面図が描き直されます。
  5. 足した点を、ドラッグして動かしてみてください。動かしているあいだも、断面図が追いかけます。
  6. 右の「DISPLAY」で、「Vertical」を「×1」にすると、縦と横が同じ縮尺の、実際の形になります。

使い方

1. 場所を決める

左の「PLACE」に、2 つの方法があります。

  • 一覧から選ぶ: プリセットの場所に、地図が動いて、線が引かれます
  • 検索する: 「地名・住所で探す」に入力して「検索」を押すと、候補が出ます。選ぶと、その場所に地図が動きます

地図は、ドラッグで動かして、ホイールで拡大縮小できます（カーソルの位置が中心です）。右上の「＋」「−」でも、拡大縮小できます。

2. 線を引く

地図をクリックすると、その場所に点が打たれます。2 つ目の点を打つと、断面図が出ます。

操作できること
クリック点を足す
点をドラッグ点を動かす
点を右クリックその点を消す
空いているところをドラッグ地図を動かす
ホイール拡大縮小
Ctrl+Z最後の点を消す

左の「LINE (POINTS)」に、打った点の一覧が出ます。各行の「✕」で、その点を消せます。下のボタンは、次のとおりです。

  • Undo point: 最後の点を消します
  • Reverse: 線の向きを逆にします（始点と終点が入れ替わります）
  • Clear: 点を全部消します

地図の右上の「Fit line」で、線の全体が見える位置と大きさに、地図が動きます。

地図の種類は、右上の一覧で、「地図」「淡色地図」「航空写真」「色別標高図」から選べます。

3. 断面図を見る

断面図の、横は距離、縦は標高です。

  • ホバー: マウスを乗せると、距離、標高、前後 25 m の勾配が出て、地図に印が出ます
  • 縦の倍率: 右の「DISPLAY」の「Vertical」で選びます
    • auto: 枠いっぱいに伸ばします。起伏が、強調されて見えます
    • ×1: 縦と横を、同じ縮尺にします。実際の形です。普通は、ほとんど平らに見えます
    • ×2、×5、×10: 縦を、その倍率で伸ばします
  • 右上に、「vertical ×4.5」のように、いまの縦の倍率が出ます
  • fill と grid: 面の塗りと、目盛りの線を、切り替えられます
  • 青く塗られたところは、標高のデータがない場所（海など）です。0 m として描いています

4. 数値を見る（SUMMARY）

右の「SUMMARY」に、断面の数値が出ます。

項目意味
Distance線の全長
Start → End始点と終点の標高
Highest / Lowest最高点と最低点の標高と、始点からの距離
Ascent / Descent登りの合計と、下りの合計
Avg grade平均勾配（始点と終点の標高差 ÷ 全長）
Steepest ↑ / ↓いちばん急な登りと下り（約 50 m の区間の平均）
No dataデータがない場所の割合
  • 登りと下りの合計は、小さな上下も、足し合わせます。10 m メッシュの細かい凹凸の分だけ、実際より多めに出ることがあります
  • 最大勾配は、約 50 m の区間の、標高差を距離で割った値です。10 m メッシュなので、崖などの急なところは、実際より緩く出ます
  • データなしを含む区間は、増減と最大勾配に数えません

5. サンプリングの間隔（SAMPLING）

左の「SAMPLING」で、線を何 m おきに読むかを選べます。

  • Step: auto: 標高メッシュの粗さ（約 10 m）に合わせます
  • Step: 10 m、25 m、50 m、100 m、250 m: 長い線で、読む点を減らしたいときに使います

線がとても長いときは、点の数が増えすぎないように、自動で間隔を広げます。ステータスに、いまの間隔が出ます。

6. 書き出す（EXPORT）

右の「EXPORT」で、形式を選びます。

形式内容
Chart PNG断面図の画像（白い背景、1600 × 640）
CSV距離、経度、緯度、標高の表
GeoJSON標高つきの線（LineString）。標高は 3 つ目の値
Copy link to this line打った点を、URL に入れてコピー
  • CSV と GeoJSON では、データなしの場所の標高は、CSV では空欄、GeoJSON では 0 になります
  • リンクを開くと、同じ線が、そのまま復元されます。ブックマークや、他の人に渡すのに使えます
  • アドレスバーの URL にも、同じ内容が入っています

データの出どころ

標高と地図は、国土地理院の「地理院タイル」を、加工して作成しています。

  • 標高: 標高タイル（DEM、ズーム 14、約 10 m メッシュ）
  • 地図: 標準地図、淡色地図、全国最新写真（シームレス）、色別標高図

右の「DATA」に、読み込んだタイルの数と、間隔が出ます。

注意事項

  • 本ツールは、ブラウザ内で計算します。打った点が、このサイトのサーバーへ送信されることはありません。標高と地図のタイルは、国土地理院のサーバーから、ブラウザが直接取得します。
  • 標高は、約 10 m メッシュの値です。細かい段差や、建物、橋の高さは含まれません。トンネルの上は、山の標高になります。
  • 海などのデータがない場所は、0 m として描きます。青い帯で区別できます。
  • 長い線（数百 km）は、読み込むタイルが多くなり、時間がかかります。タイルが多すぎる線は、読み込めません（約 500 枚まで）。
  • 勾配や登りの合計は、10 m メッシュの目安です。登山の計画などには、公式の地図や、最新の情報を合わせて確認してください。
  • プリセットの座標は、おおよその位置です。
  • スマホなどのタッチ操作は、まだ確認していません。

よくある質問 (FAQ)

Q. 点を打っても、断面図が出ません。
A. 点が 2 つ以上必要です。1 つのときは、「地図に 2 点以上を打つと、断面図が出ます。」と表示されます。

Q. 断面図が、ほとんど平らに見えます。
A. 「Vertical」を「auto」にすると、枠いっぱいに伸びます。×1 は、実際の形なので、平らに見えるのが普通です。

Q. 青い帯は、何ですか？
A. 標高のデータがない場所です。海や湖の沖などで、そこは 0 m として描いています。登りと下りの合計や、最大勾配には、数えません。

Q. 点を間違えて打ちました。
A. 点をドラッグして動かすか、右クリックで消してください。Ctrl+Z で、最後の点を消すこともできます。

Q. 線を、後で開き直せますか？
A. 「Copy link to this line」でコピーしたリンクを、ブックマークなどに残してください。開くと、同じ線が復元されます。

Q. 作った断面図を、ほかのソフトで使えますか？
A. CSV は、表計算ソフトで開けます。GeoJSON は、GIS ソフトや、地図のライブラリで、標高つきの線として読めます。

技術記事

実装の詳細は、技術記事にまとめています。

[Astro] #164 Terrain Explorer — 地理院タイルの地形を立体にして、VRで歩くツールを作成 // PROTOCOL.LAIN

[Astro] #164 Terrain Explorer — 地理院タイルの地形を立体にして、VRで歩くツールを作成 // PROTOCOL.LAIN

Astro のページ 1 枚と three.js（約 1,300 行）で作った地形ビューアの実装記録。標高タイル（PNG の色 = 標高）の読み方、Web メルカトルの座標、地図の自作、標高の格子から面を作る方法、足元だけ細かい地面を読み足すチャンクの仕組み、遠景との継ぎ目の処理、WebXR での模型と実寸の切り替え、偽のタイルサーバーを使った試験、ハマりどころまで。

lain-lab.com

更新履歴

バージョン日付内容
v1.0.02026/10/11初回公開（地図に線を引いて断面図を表示、点のドラッグ・削除、地図と断面図の連動、縦の倍率、要約の数値、PNG / CSV / GeoJSON / リンクの書き出し、地名・住所の検索、プリセット 6 件）

クレジット

データ

  • 標高・地図: 地理院タイル（国土地理院）を加工して作成
  • 地名・住所の検索: 国土地理院の住所検索 API

ライブラリ

  • 地図、断面図、補間、統計、書き出しは、すべて自作の JavaScript（Web API）です。外部ライブラリは使っていません。