QGIS データを Web で表示 #1 - qgis2web

Last updated at 2025-02-08Posted at 2025-01-31

QGIS で作成したデータ（"プロジェクト"）を Web ページで表示する方法について、ノウハウを共有します。

最初は、一番手軽な方法として、QGIS のプラグインである qgis2web を使用して、Web 地図を作成します。

なお、以下の説明では QGIS 3.40 および qgis2web 3.24.0 を使用しています。

1. qgis2web をインストールする

メニュー・バーで プラグイン > プラグインの管理とインストール ... を選び、qgis2web を検索してインストールします。

2. QGIS プロジェクト

QGIS で作成したプロジェクトを用意します。ここでは説明のために下のスクリーンショットのようなプロジェクトを使います。

以下のレイヤ構成になっています。

スポット ... 名所や建物
棚田
岩座神境界線
地形
- CS立体図
- 陰影図-地形
- 陰影図-表面
- DEM
- DSM
背景
- 国土地理院-標準地図
- 国土地理院-航空写真
- Google Maps
- Google Satellite

2-1. プロジェクトの CRS

プロジェクト全体および背景以外のレイヤは CRS を ESPG:6673 JGD2011 / Japan Plane Rectangular CS V としています。これは、いろいろ迷った挙げ句に、地図の表示範囲が兵庫県の内陸部であるため、その適用範囲から考えてこれが良いだろう、同じ範囲でも JGD2000 より新しい JGD2011 だよな、と思って選んだものです。

今になって考えてみると、ESPG:3857 WGS 84 Pseudo-Mercator を選んでおく方が、後々、少し楽を出来たかも知れません。

2-2. レイヤのグループ化について

このプロジェクトでは、地形と背景を「相互排他的グループ」としています。すなわち、これらのグループ内では表示できるレイヤは一つだけ、という設定です。

重宝することが多い機能ですが、残念ながら、qgis2web では「相互排他的グループ」は背景として指定したレイヤ以外では効力を発揮しません。

さらに、qgis2web で OpenLayers を使う場合には、背景グループを別として、グループ内のレイヤは無視されますので、一時的にグループからレイヤを外に出しておく必要があります。（qgis2web を起動する前にプロジェクトを保存する必要はありません）

グループ化されたレイヤを Web 地図で実現するためには、QGIS Server + QGIS Web Client 2 を使用する必要があります。

2-3. 背景には XYZ タイルを使う

背景は外部の Web サービスを利用して表示しています。使いやすく、qgis2web との相性も良い XYZ 形式のタイルがお奨めです。私の経験では、他の形式（WMS/WMTS 等）の場合は qgis2web でうまく表示できませんでした。

ここで使用しているのは、以下の4つです。

XYZ タイル	URL
国土地理院-標準地図	`https://cyberjapandata.gsi.go.jp/xyz/std/{z}/{x}/{y}.png`
国土地理院-航空写真	`https://cyberjapandata.gsi.go.jp/xyz/seamlessphoto/{z}/{x}/{y}.jpg`
Google Maps	`https://mt1.google.com/vt/lyrs=m&x={x}&y={y}&z={z}`
Google Satellite	`https://mt1.google.com/vt/lyrs=s&x={x}&y={y}&z={z}`

Google が嫌いな人は osm (Open Street Map) を使っても良いでしょう。

XYZ タイル	URL
Open Street Map	`https://tile.openstreetmap.org/{z}/{x}/{y}.png`

これらの XYZ タイルを テータソース・マネージャー > XYZ を開いて登録しておけば、いつでも必要に応じて背景地図としてプロジェクトに追加することが出来ます。

QGIS で XYZ タイルを使う方法や、どのような地図が利用できるかについては、下記の記事を参照して下さい。

3. qgis2web を使う

メニュー・バーで Web > qgis2web > Create Web Map を選びます。すると、下図のようなダイアログが開きます。

3-1. プレビュー

画面右側がプレビューです。

Update preview ボタンを押すとプレビューが更新されます。プレビューで確認しながら以下の設定を進めていくのが良いでしょう。

3-2. OpenLayers / Leaflet

地図表示の Javascript ライブラリを使い分けることが出来ます。性能は一長一短です。

3-3. レイヤとグループ（Layers & Groups）タブ

Layers & Groups のタブで、地図に含めるレイヤおよびグループの選択とレイヤの詳細設定を行います。

グループ ?

既に述べたように、OpenLayers を使う場合には、背景のグループを別として、グループ内のレイヤは全て無視されます。一時的にでも、グループから全てのレイヤを外に出しておいて下さい。

Leaflet を使う場合は、グループ化されていても大丈夫です。ただし、グループ自体を選択しておかないと、その中のレイヤは選択していても全て無視されます。また「相互排他的グループ」の仕組みは実装されておらず、形だけのグループ化にとどまります。

レイヤの選択

先頭のチェック・ボックスの ON/OFF によって、そのレイヤを地図に含めるか否かが決定されます。初期状態は QGIS のレイヤ・パネルの状態に従います。初期状態で表示しないレイヤでも、表示する可能性のあるものはチェック・ボックスを ON にしておきます。

初期表示状態（Visible）

Visible チェック・ボックスによって、レイヤの初期表示状態を指定します。

ポップアップ（Popups & Popup fields）

ベクタ・レイヤについては、Popups チェック・ボックスを ON にすると、地物の属性をポップアップ表示することが出来るようになります。

どの属性をどのように表示するかは、属性ごとのドロップダウン・リストで決定します。

hidden field ... 非表示
no label ... ラベル（属性名）無し、値だけを表示
inline label ... ラベル（属性名）と値を横並び表示
header label ... ラベル（属性名）と値を縦並び表示
(always visible) ... 常に表示
(vislble with data) ... 値がある場合は表示

実際のポップアップは OpenLayers と Leaflet で少しデザインが異なります。

背景レイヤの指定（BaseMap）

XYZ タイルのレイヤには、BaseMap チェック・ボックスが表示されます。これを ON にすることで、レイヤが背景用の基本地図であることを指定します。BaseMap の指定は複数のレイヤに対して行うことが出来て、BaseMap 指定されたレイヤは暗黙の「相互排他的グループ」を形成します。あらかじめプロジェクトでグループ化しておいても構いませんが、そうしていなくても大丈夫です。

3-4. 外観（Appearance）タブ

設定項目が多いので、重要と思われるものに説明を絞ります。

レイヤ・リストの表示（Layers list）

None ... 非表示
Collapsed ... 表示 / 初期状態はアイコン状態
Expanded ... 表示 / 初期状態は展開した状態

位置情報取得（Geolocate user）

ユーザの位置情報を検出して地図上で現在位置を表示するかどうか

モバイル・デバイス向けのページなら ON にして良い場合があるかも知れませんが、たいていの場合は OFF の方が良いでしょう。ページを開くたびに、位置情報を利用して良いかどうかを尋ねてきますし、GPS 機能の無いデスクトップだと実用的な精度が出ませんからね。

計測ツール（Measure Tool）

None ... 非表示
Metric ... 表示 / メートル法
Imperial ... 表示 / ヤード・ポンド法

初期表示領域（Extent）

Canvas extent ... 現在の QGIS Desktop の表示領域
Fit to layers extent ... レイヤの領域にフィット

お奨めは、あらかじめ QGIS で表示領域を調整してから qgis2web を起動して、Canvas extent を選択することです。

3-5. エクスポート（Export）タブ

「FTP にエクスポート」も指定できるようですが、私は「フォルダにエクスポート」を使っています。エクスポート先のフォルダは、指定しなければ、C:\Users\user_name\AppData\Local\Temp\qgis2web になります。

Settings と WIKI のタブについては割愛します。

3-6. エクスポート（Export）ボタン

Export ボタンを押すと、エクスポート先フォルダの下に日時を指定したサブ・フォルダ（例えば qgis2web_2025_01_31-20_25_32_560299）が自動的に作られて、Web 地図の表示に必要な全てのファイルが作成されます。そして既定のウェブ・ブラウザによってエクスポートされた Web 地図のページが開かれます。

ボタンを押してからウェブ・ブラウザによる表示まで、確認のポップアップなどで中断することなく、一気に自動的に実行されます。

作成されるファイルとフォルダは以下の構成になっています。

+ C:\Users\user_name\AppData\Local\Temp\qgis2web
    + qgis2web_yyyy_mm_dd-HH_MM_SS_xxxxx
        + images
        + layers
        + resources
        + styles
            + legend
        + webfonts
        - index.html

上記で + はフォルダ、- はファイルです。

index.html 以外に、サブ・フォルダの中に多くのファイルが作成されますが、数も多く、動的に変化するものでもあるため、記載を割愛しています。

4. カスタマイズ

作成されたファイルを運用環境に配備する前に、index.html に修正を加えてカスタマイズすることが可能です。難易度は高くなりますが、CSS や javascript の修正も不可能ではありません。

ただし、エクスポートによって毎回作成され直すものであることを考慮すると、手の込んだカスタマイズを施すことは、あまり現実的ではないでしょう。

お奨めするのは、index.htm の言語設定の変更とタイトルの設定です。

<!doctype html>
- <html lang="en">
+ <html lang="ja">
    <head>
        <meta charset="utf-8">
        ...
-        <title></title>
+        <title>XXXXの地図</title>
    </head>
    <body>
        ...
    </body>

作成されたままの index.html では <title> が空白になっていますので、地図の内容にあわせて適切なタイトルを設定して下さい。タイトル設定はウェブ・ブラウザのタブに表示されるタイトルを左右しますので効果の高いカスタマイズになります。

5. 運用環境への配備（デプロイ）

エクスポートされたフォルダ内にある index.html と全てのサブ・フォルダをウェブ・サーバのドキュメント・ルート以下のしかるべき場所にアップロードし、他のページから index.html へのリンクを張ります。それだけです。QGIS のプロジェクト・ファイルやデータ・ファイルをウェブ・サーバにアップロードする必要はありません。