QGISで作成した地図をWebで公開できます。
QGISからWebマップを作成する方法【qgis2web活用ガイド】
この記事では、qgis2webプラグインを使ってインタラクティブなWebマップを作成する方法を解説します。
WebマップとQGIS
Webマップとは
ブラウザで表示できるインタラクティブな地図です。
特徴
- インストール不要で閲覧可能
- ズーム・パン操作
- クリックで情報表示
- スマートフォン対応
QGISからWebマップを作る方法
| 方法 | 特徴 |
|---|---|
| qgis2web | プラグインで簡単出力 |
| 手動コーディング | 柔軟だが知識が必要 |
| GeoServer等 | サーバー型、大規模向け |
qgis2webのインストール
インストール手順
1. プラグイン → プラグインの管理とインストール 2. 「qgis2web」を検索 3. 「インストール」をクリック 4. インストール完了
動作確認
確認方法
- Web → qgis2web → Create web map
- ダイアログが表示されればOK
基本的な使い方
ステップ1: QGISで地図を準備
準備
- 背景地図を追加（地理院タイル等）
- データレイヤを追加
- シンボル・ラベルを設定
- 表示範囲を調整
ステップ2: qgis2webを起動
Web → qgis2web → Create web map
ステップ3: 設定
レイヤタブ:
・出力するレイヤにチェック ・ポップアップの設定 ・クラスタリングの設定
外観タブ:
・タイトル ・検索機能 ・レイヤ切り替え ・縮尺バー
ステップ4: プレビューと出力
手順
- 「Update preview」でプレビュー
- 問題なければ「Export」
- 出力先フォルダを選択
- 完了
出力オプション
出力ライブラリの選択
| ライブラリ | 特徴 |
|---|---|
| Leaflet | 軽量、シンプル、おすすめ |
| OpenLayers | 高機能、複雑 |
Leafletがおすすめ
- ファイルサイズが小さい
- 動作が軽い
- カスタマイズしやすい
データ形式の選択
Export タブ → Data export ・GeoJSON：ベクターデータをそのまま出力 ・Minify GeoJSON：軽量化して出力 ※ 大量データの場合は軽量化推奨
出力フォルダの構成
output_folder/ ├── index.html # メインHTMLファイル ├── css/ │ └── style.css # スタイルシート ├── js/ │ └── script.js # JavaScript ├── data/ │ └── layer.js # GeoJSONデータ ├── markers/ # マーカーアイコン └── images/ # 画像
カスタマイズ
ポップアップの設定
Layers タブ → レイヤを選択 → Popup fields □ header：ヘッダーとして表示 □ inline：インラインで表示 □ no label：ラベルなし フィールドごとに表示/非表示を選択
スタイルの調整
qgis2webはQGISのスタイルを反映しますが、一部制限があります。
対応するスタイル
単一シンボル、分類（カテゴリ値）、段階（数値範囲）、単純なラベル
非対応・制限あり
複雑なSVGシンボル、式によるスタイル、ルールベーススタイル（一部）
出力後の編集
生成されたファイルは直接編集できます。
index.html を編集:
html
<!-- タイトルの変更 -->
<title>カスタムタイトル</title>
<!-- CSSの追加 -->
<link rel="stylesheet" href="css/custom.css">script.js を編集:
javascript
// 初期表示位置の変更
map.setView([35.6812, 139.7671], 13);
// レイヤオプションの変更
L.geoJSON(data, {
style: customStyle,
onEachFeature: customPopup
});
公開方法
方法1: 静的ホスティング
GitHub Pages:
1. GitHubにリポジトリを作成 2. 出力フォルダの内容をアップロード 3. Settings → Pages → 公開設定 4. https://username.github.io/repo/ で公開
Netlify:
1. Netlifyにアカウント作成 2. 出力フォルダをドラッグ＆ドロップ 3. 自動で公開
方法2: 自社サーバー
1. 出力フォルダをサーバーにアップロード 2. Webサーバー（Apache, nginx等）で公開 例： /var/www/html/webmap/ └── index.html
方法3: クラウドストレージ
Amazon S3:
手順
- S3バケットを作成
- 静的ウェブサイトホスティングを有効化
- ファイルをアップロード
トラブルシューティング
プレビューが表示されない
対処
- ネットワーク接続を確認 → 背景タイルはオンライン必須
- ブラウザを確認 → Chrome, Firefox推奨
- データサイズを確認 → 大きすぎると表示されない
出力後に表示されない
対処
- ブラウザコンソールでエラー確認 → F12 → Console
- ファイルパスを確認 → 相対パスが正しいか
- CORSエラーの場合 → ローカルサーバー経由で表示（python -m http.server 8000）
スタイルが反映されない
対処
- QGISでシンプルなスタイルに変更 → 単一シンボルで試す
- シンボルサイズを確認 → 小さすぎると見えない
- 透明度を確認 → 100%になっていないか
データが重い
対処
- ジオメトリを簡略化 → QGIS: ベクタ → ジオメトリツール → 簡素化
- 属性フィールドを削減 → 必要なフィールドのみ出力
- ベクタータイルを検討 → 大規模データ向け
応用テクニック
複数地図の切り替え
javascript
// ベースマップの切り替え
var osm = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png');
var gsi = L.tileLayer('https://cyberjapandata.gsi.go.jp/xyz/std/{z}/{x}/{y}.png');
L.control.layers({
"OpenStreetMap": osm,
"地理院タイル": gsi
}).addTo(map);フィルタ機能の追加
javascript
// 属性でフィルタ
function filterByAttribute(value) {
layer.eachLayer(function(layer) {
if (layer.feature.properties.type === value) {
layer.setStyle({opacity: 1});
} else {
layer.setStyle({opacity: 0.2});
}
});
}
まとめ
Webマップ作成の流れ
作成の流れ
- QGISで地図を作成
- qgis2webでプレビュー
- 設定を調整
- エクスポート
- サーバーにアップロード
- 公開
チェックリスト
確認項目
- □ 背景地図を設定した
- □ レイヤのスタイルを設定した
- □ ポップアップを設定した
- □ プレビューで確認した
- □ 出力ファイルをテストした
- □ 公開先を準備した
関連記事