この内容は、QGISを使ったGIS初心者でも再現できるよう、データ取得からWebマップ活用までまとめました。

QGISとは？概要と入手方法

QGISの概要

QGIS（キュージーアイエス）は、オープンソース・無料で利用できる地理情報システム（GIS）ソフトウェアです。国際的に普及しており、日本でも防災・インフラ・観光・登山など幅広い分野で使われています。

主な用途

• ラスタ（DEM標高データ）とベクタ（道路・登山道等）データ統合
• 標高プロファイルや等高線の自動生成
• 3D表示や俯瞰図作成
• Webマップ用データ作成

QGISの入手方法

Download · QGIS Web Site

qgis.org

インストールは「Long Term Release（長期安定版）」を推奨します。OSごとにインストーラーが用意されています。

必要なデータの取得

国土地理院DEM（基盤地図情報 数値標高モデル）

誘導ページ

fgd.gsi.go.jp

• 範囲を選択して5mまたは10mメッシュ（XML/GML形式）をダウンロード。
• 都市部は5m、郊外は10mが推奨です。

OpenStreetMapのルート・道路データ

▶ Overpass Turbo ：範囲指定・道路種別指定が可能。

▶ Geofabrik ：都道府県単位など広域データ（PBF形式）。

GeoJSONまたはShapefile形式で取得し、QGISへ読み込みます。

QGISによるDEM → OSMへの標高付与手順

1. DEM（GML形式）をGeoTIFFへ変換
   ・QGISで GML ファイルを読み込み。
   ・「ラスタ → ラスタデータセット変換」でGeoTIFF形式へエクスポート。
   ・座標系はEPSG:4326（WGS84） に変換統一。
   これにより、他ツールやWebマップでも扱いやすくなります。
   
2. OSMルートへの標高付与
   ・OSMから取得した登山道や道路のルートをQGISへ読み込み（GeoJSON等）。
   ・DEM（GeoTIFF）を読み込み。
   ・「ベクタ → ラスタ → ラスタ値抽出（サンプリング）」で標高値（Z座標）をルート上各頂点に付与。
   ・出力をGeoJSON形式とし、Z値（標高）を保持。
   
3. GeoJSONの出力イメージ
   

   {
     "type": "FeatureCollection",
     "features": [{
       "type": "Feature",
       "properties": {},
       "geometry": {
         "type": "LineString",
         "coordinates": [
           [139.6917, 35.6895, 123],
           [139.6927, 35.6905, 135],
           [139.6937, 35.6915, 140]
         ]
       }
     }]
   }
   

   このZ座標（3番目の数値）が標高（単位：m）です。

Webマップでの標高プロファイル表示【Leafletサンプル】

使用ライブラリ（CDN）

<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css">
<link rel="stylesheet" href="https://unpkg.com/leaflet-elevation@0.0.4/dist/leaflet-elevation.min.css">
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
<script src="https://unpkg.com/d3@5.7.0/dist/d3.min.js"></script>
<script src="https://unpkg.com/leaflet-elevation@0.0.4/dist/leaflet-elevation.min.js"></script>

地図＋標高プロファイル表示サンプル

<div id="map" style="height: 500px;"></div>
<script>
const map = L.map('map').setView([35.6895, 139.6917], 12);
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png').addTo(map);

const elevation = L.control.elevation({
    theme: "steelblue-theme",
    height: 125,
    detached: true
}).addTo(map);

fetch('route_with_elevation.geojson')
    .then(response => response.json())
    .then(geojson => {
        L.geoJSON(geojson, {
            onEachFeature: elevation.addData.bind(elevation)
        }).addTo(map);
    });
</script>

これで、ルート上に標高プロファイル（距離 vs 標高）が動的に表示され、マウスオーバーで該当地点がハイライトされます。

完成イメージと活用例

活用例

表示結果イメージ

1. OSM地図上にルート表示
2. 下部に標高プロファイル（距離 vs 標高）
3. マウスオーバーでルートと連携表示

関連リンクまとめ