QGISからWebマップを作成する方法【qgis2web活用ガイド】
目次
QGISで作成した地図をWebで公開できます。
この記事では、qgis2webプラグインを使ってインタラクティブなWebマップを作成する方法を解説します。
WebマップとQGIS
Webマップとは
ブラウザで表示できるインタラクティブな地図です。
特徴:
- インストール不要で閲覧可能
- ズーム・パン操作
- クリックで情報表示
- スマートフォン対応
QGISからWebマップを作る方法
| 方法 | 特徴 |
|---|---|
| qgis2web | プラグインで簡単出力 |
| 手動コーディング | 柔軟だが知識が必要 |
| GeoServer等 | サーバー型、大規模向け |
qgis2webのインストール
インストール手順
1. プラグイン → プラグインの管理とインストール
2. 「qgis2web」を検索
3. 「インストール」をクリック
4. インストール完了動作確認
Web → qgis2web → Create web map
→ ダイアログが表示されればOK基本的な使い方
ステップ1: QGISで地図を準備
1. 背景地図を追加（地理院タイル等）
2. データレイヤを追加
3. シンボル・ラベルを設定
4. 表示範囲を調整ステップ2: qgis2webを起動
Web → qgis2web → Create web mapステップ3: 設定
レイヤタブ:
・出力するレイヤにチェック
・ポップアップの設定
・クラスタリングの設定外観タブ:
・タイトル
・検索機能
・レイヤ切り替え
・縮尺バーステップ4: プレビューと出力
1. 「Update preview」でプレビュー
2. 問題なければ「Export」
3. 出力先フォルダを選択
4. 完了出力オプション
出力ライブラリの選択
| ライブラリ | 特徴 |
|---|---|
| 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 を編集:
<!-- タイトルの変更 -->
<title>カスタムタイトル</title>
<!-- CSSの追加 -->
<link rel="stylesheet" href="css/custom.css">script.js を編集:
// 初期表示位置の変更
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:
1. S3バケットを作成
2. 静的ウェブサイトホスティングを有効化
3. ファイルをアップロードトラブルシューティング
プレビューが表示されない
対処:
1. ネットワーク接続を確認
→ 背景タイルはオンライン必須
2. ブラウザを確認
→ Chrome, Firefox推奨
3. データサイズを確認
→ 大きすぎると表示されない出力後に表示されない
対処:
1. ブラウザコンソールでエラー確認
→ F12 → Console
2. ファイルパスを確認
→ 相対パスが正しいか
3. CORSエラーの場合
→ ローカルサーバー経由で表示
→ python -m http.server 8000スタイルが反映されない
対処:
1. QGISでシンプルなスタイルに変更
→ 単一シンボルで試す
2. シンボルサイズを確認
→ 小さすぎると見えない
3. 透明度を確認
→ 100%になっていないかデータが重い
対処:
1. ジオメトリを簡略化
→ QGIS: ベクタ → ジオメトリツール → 簡素化
2. 属性フィールドを削減
→ 必要なフィールドのみ出力
3. ベクタータイルを検討
→ 大規模データ向け応用テクニック
複数地図の切り替え
// ベースマップの切り替え
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);フィルタ機能の追加
// 属性でフィルタ
function filterByAttribute(value) {
layer.eachLayer(function(layer) {
if (layer.feature.properties.type === value) {
layer.setStyle({opacity: 1});
} else {
layer.setStyle({opacity: 0.2});
}
});
}まとめ
Webマップ作成の流れ
1. QGISで地図を作成
2. qgis2webでプレビュー
3. 設定を調整
4. エクスポート
5. サーバーにアップロード
6. 公開チェックリスト
□ 背景地図を設定した
□ レイヤのスタイルを設定した
□ ポップアップを設定した
□ プレビューで確認した
□ 出力ファイルをテストした
□ 公開先を準備した関連記事
お問い合わせ
Webマップ作成についてのご相談は、お気軽にお問い合わせください。
最終更新: 2025年1月