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

第3回から第6回までで QGIS Server を設置し、QWC2 (QGIS Client 2) によって QGIS プロジェクトを表示する Web 地図アプリを作成し、MapCache を使って実用に耐えるパフォーマンスを確保しました。

更に前回はポータル画面を主な対象として QWC2 の外観と機能のカスタマイズを行いました。

QGIS データを Web で表示 #7 - QWC2（続々）

今回も引き続いて QWC2 のカスタマイズを行っていきます。テーマごとの表示画面（以下、ビューワと称します）を主な対象とします。

マニュアルとして、QWC2 / QWC Services のドキュメントを参照します。

QWC2 / QWC Services >

1. 地物情報が取得できない！？

ビューワで地図をクリックすると、その場所にある地物の情報が表示される筈ですが、私の場合は下のスクリーンショットのように、「選択された点には利用できる情報がありません」という表示しか出ない状態が長く続きました。「公会堂」というスポットをドンピシャでクリックしているにも拘わらず、です。

これは何かが間違っていると思って調べたところ、QWC2 から QGIS Server への GetFeatureInfo リクエストが CORS (Cross-Origin Resource Shareing) の制限に引っかかって拒絶されていることが分かりました。

問題を修正した後は、下のスクリーンショットのように、クリックした場所にある全ての地物の公開情報が表示されるようになりました。背景レイヤと非表示のレイヤは対象外です。

1-1. QGIS Server の CORS 設定

/etc/nginx/conf.d/qgis-server.conf に CORS を許容する設定を追加します。

        server {
            listen       8082;
            server_name  webgis.mydomain;
    
            gzip off;
            include fastcgi_params;
    
            # CORS を許可
+           add_header 'Access-Control-Allow-Origin' '*';
+           add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
+           add_header 'Access-Control-Allow-Headers' 'DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range';
+           add_header 'Access-Control-Expose-Headers' 'Content-Length,Content-Range';
    
            location /isg/ {
                fastcgi_pass unix:/run/qgis-server-isg.sock;
            }
    
            error_log /var/log/nginx/qgis-server-error.log;
            access_log /var/log/nginx/qgis-server-access.log;
        }

上記はかなり緩い設定です。運用環境では、下記を考慮するのが良いでしょう。

'Access-Control-Allow-Origin' ... '*' で全てのオリジンを許容しているが、'http://webgis.mydomain/' のように、QWC2 をホストするオリジンに限定することも可能。その方がよりセキュアになる
'Access-Control-Allow-Methods' ... GetFeatureInfo のためだけなら、'POST' は不要

nginx を再起動しておきます。

sudo systemctl restart nginx

1-2. GetMap リクエストは CORS の制約を受けない？

画像を返すだけの GetMap リクエストは CORS の制約を受けることがほぼ無いため、CORS 対策の設定をしなくても QWC2 は地図画像を取得することが出来ました。

それに対して、GetFeatureInfo は XML, JSON, GeoJSON などのデータを返すものであり、JavaScript（QWC2 のフロントエンド）が fetch() や XMLHttpRequest でリクエストを投げるものですので、CORS の制約を受けます。

この違いに気付かず、GetMap がうまく動作していたため、QGIS Server の設定に不備が生じていた次第です。

なお、QGIS データを Web で表示 #3 - QGIS Server の記述はすでに修正済みです。

2. ボトム・バー

ビューワ最下部のボトム・バーには、左端にスケール、中央に座標と縮尺、右端に二つのリンクが表示されています。

もう一つ、アイコンによって開閉できる 概観地図 パネルがありますが、これについては後回しにします。

2-1. ボトム・バーの設定

ボトム・バーの設定は、qwc2-demo-app/static/config.json の plugins.common.Overview に記載されています。

    "plugins": {
        "common": [
            ...
            {
                "name": "BottomBar",
                "cfg": {
                    "viewertitleUrl": "http://qgis.org/",
                    "termsUrl": "http://qgis.org/",
                    "viewertitleUrlTarget": "_blank"
                }
            },
            ...

設定のためのリファレンスとしては、下記を参照して下さい。

QWC2 / QWC Services >
- Plugin reference
  - BottomBar

スケール、座標、縮尺については、特にいじる必要は無いでしょう。

しかし、「QWC2 デモ」と「使用許諾条件」という二つのリンクは少し気になります。

2-2. 「QWC2 デモ」と「使用許諾条件」

これら二つは、ビューワのタイトルと使用許諾条件に関するリンクですが、それらには以下の設定および翻訳が関係しています。

qwc2-demo-app/static/config.json
- plugins
  - common
    - BottomBar
      - cfg
        
        viewertitleUrl ... ビューワ・タイトルのリンク先
        
        viewertitleUrlTarget ... ビューワ・タイトルのリンク先の開き方
        
        termsUrl ... 使用許諾条件のリンク先
        
        termsUrlTarget ... 使用許諾条件のリンク先の開き方
qwc2-demo-app/static/translations/xx-XX.json
- "bottombar"
  - "viewertitle_label" ... ビューワ・タイトルのラベル
  - "terms_label" ... 使用許諾条件のラベル

2-3. 「QWC2 デモ」と「使用許諾条件」を消す

表示を消すだけなら、viewertitleUrl または termsUrl を無効にするだけで目的を達っすることが出来ます。空文字をセットしても良いし、項目自体を削除しても構いません。

        "plugins": {
            "common": [
                ...
                {
                    "name": "BottomBar",
                    "cfg": {
-                       "viewertitleUrl": "http://qgis.org/",
+                       "viewertitleUrl": "",
-                       "termsUrl": "http://qgis.org/",
-                       "viewertitleUrlTarget": "_blank"
                    }
                },
            ...

2-4. 「QWC2 デモ」と「使用許諾条件」のラベルを変更する

表示されるラベルをカスタマイズしたい場合は、翻訳ファイルを編集します。

2-4-1. 修正する項目を列挙する

qwc2-demo-app/static/translations/tsconfig.json の "overrides" セクションに翻訳を修正したいキーを追加します。

        "overrides": [
+           "bottombar.terms_label",
            "bottombar.viewertitle_label"
        ],

おや、"bottombar.viewertitle_label" は最初から追加されていました。

このようにアプリ固有のカスタマイズ項目を tsconfig.json に列挙しておかないと、yarn start や yarn run prod を実行したときに翻訳ファイルが QWC2 の標準状態まで戻されてしまいます。

2-4-2. 翻訳ファイルの項目を修正する

日本語用の翻訳ファイルは qwc2-demo-app/static/translations/ja-JP.json ですので、これを編集します。

    {
        "locale": "ja-JP",
        "messages": {
            ...
            "bottombar": {
                "mousepos_label": "座標",
                "scale_label": "縮尺",
                "terms_label": "使用許諾条件",
-               "viewertitle_label": ""
+               "viewertitle_label": "i-GIS Map ビューワ"
            },
            ...

アプリが日本語以外のユーザに利用される場合を考慮に入れて qwc2-demo-app/static/translations/en-US.json も編集して、英語の翻訳を提供するのが良いでしょう。

    {
        "locale": "en-US",
        "messages": {
            ...
            "bottombar": {
                "mousepos_label": "Coordinates",
                "scale_label": "Scale",
                "terms_label": "Terms of use,
-               "viewertitle_label": "QWC2 Demo"
+               "viewertitle_label": "i-GIS Map Viewer"
            },
            ...

もちろん、その他の言語にも対応するに越したことは無いのですが、翻訳データが欠損している場合は en-US がフォールバックとなりますので、最低限、英語には対応しておきたいところです。

面倒くさいですね。

3. 概観地図

ビューワの右下に開いている小さな地図が"概観地図"です。

現在の背景レイヤを小縮尺で表示
メインのビューワで見ている範囲が矩形で示される
その矩形をトラッグしてメインのキャンバスをスクロール出来る

というものですが、使い勝手があまり良くないのです。

矩形が見えづらい
メインのビューワのコマンド・ボタンを隠している

これ、何とかならないのか？ということでマニュアルを見ると、OpenLayers の API を参照しろ、と丸投げしています。

https://qwc-services.github.io/master/references/qwc2_plugins/#overviewmap

てめー、このやろう。そんなら、いっそ、プラグインごと削除してやるわ。

3-1. 概観地図を無効化する

まず、qwc2-demo-app/static/config.json で、"OverviewSupport" の設定を削除します。

        "plugins": {
            "common": [
                {
                    "name": "Map",
                    "cfg": {
                        "mapOptions": { ... },
                        "toolsOptions": {
-                           "OverviewSupport": {
-                               "tipLabel": "Overview"
-                           },
                            "LocateSupport": { ... },
                            "ScaleBarSupport": { ... }
                        },
                        "swipeGeometryTypeBlacklist": [ ... ],
                        "swipeLayerNameBlacklist": [ ... ]
                    }
                },

しかし、これだけでは、アイコンのツールチップが Overvew から Overview Map に変るだけです。

さらに、qwc2-demo-app/qwc2/js/appConfing.js で、OverviewSupport 自体をインポートしないように設定変更します。

    ...
    import MeasurementSupport from 'qwc2/plugins/map/MeasurementSupport';
-   import OverviewSupport from 'qwc2/plugins/map/OverviewSupport';
+   // import OverviewSupport from 'qwc2/plugins/map/OverviewSupport';
    import RedliningSupport from 'qwc2/plugins/map/RedliningSupport';
    ...
                    LocateSupport: LocateSupport,
-                   OverviewSupport: OverviewSupport,
+                   // OverviewSupport: OverviewSupport,
                    RedliningSupport: RedliningSupport,

これで概観地図は出て来なくなります。ざまー見ろ。

概観地図が大して邪魔にならないと思う場合は、何もせずに残しておけば良いでしょう。

4. マップ・ボタン

ビューワの右側に丸いボタンが並んでいます。これらは "plugins.common" ノードまたは "plugins.desktop" ノードの下に定義されているボタンの一群で、ビューワの UI の中で最も使用頻度が高いものです。

下から上へと見ていきます。と言うのは、位置を示す番号が下から順に振られているからです。

4-1. 背景スイッチャー

最下段は背景スイッチャーです。

    "plugins": {
        "common": [
            ...
            {
                "name": "BackgroundSwitcher",
                "cfg": {
                    "position": 0
                }
            },
            ...
        ],
    },

"position" すなわち位置は最下段が 0 です。

背景スイッチャーについては、特に設定を修正する必要は無いでしょう。

背景レイヤのサムネール画像については、前回の記事を参照して下さい。

QGIS データを Web で表示 #7 - QWC2（続々）
- 5. サムネール
  - 5-2. 背景レイヤのサムネール

4-2. ズーム・ボタン

"＋"（ズーム・イン）と "ー"（ズーム・アウト）の一組のボタンです。

    "plugins": {
        "desktop": [
            ...
            {
                "name": "ZoomIn",
                "cfg": {
                    "position": 2
                }
            },
            {
                "name": "ZoomOut",
                "cfg": {
                    "position": 1
                }
            },
            ...
        ],
    },

"desktop" ノード下にあるので、モバイル環境ではズーム・ボタンは表示されない設定です。

オプションで、"enableZoomByBoxSelection": true を設定することが出来ます。

                {
                    "name": "ZoomIn",
                    "cfg": {
+                       "enableZoomByBoxSelection": true,
                        "position": 2
                    }
                },
                {
                    "name": "ZoomOut",
                    "cfg": {
+                       "enableZoomByBoxSelection": true,
                        "position": 1
                    }
                },

通常、ズーム・ボタンは、押すと同時にワン・ショットでズーム・インまたはズーム・アウトの動作をします。

"enableZoomByBoxSelection": true を設定した場合は、ズーム・ボタンを押すと、ズーム・イン・モードまたはズーム・アウト・モードに入り、カーソルも "＋" ルーペ（ズーム・イン）または "ー" ルーペ（ズーム・アウト）に変ります。

モード中の動作は以下の通りです。

ズーム・イン・モード
- 地点をクリック ... その地点をビューワ中央に移動してズーム・イン
- ドラッグして矩形を描く ... 矩形の範囲へズーム・イン
ズーム・アウト・モード
- 地点をクリック ... その地点をビューワ中央に移動してズーム・アウト
- ドラッグして矩形を描く ... 矩形の範囲をビューワ中央に移動してズーム・アウト

モードは、もう一度同じボタンを押すか、反対側のズーム・ボタンを押すまで継続します。

4-3. 位置情報ボタン

端末の現在位置をビューワに表示するためのボタンです。

    "plugins": {
        "common": [
            ...
            {
                "name": "LocateButton",
                "cfg": {
                    "position": 3
                }
            },
            ...
        ],
    },

このボタンは、GPS 機能を持つ端末でのみ意味を持つボタンです。

従って、"common" ノードから "mobile" ノードに移してしまっても良いかも知れません。

4-3-1. テーマのフラグによるボタン表示制御

テーマごとにフラグを立ててボタンの表示を制御する運用が出来ます。

                {
                    "name": "LocateButton",
                    "cfg": {
+                       "themeFlagWhitelist": [
+                           "allow_location",
+                           "use_gps"
+                       ],
                        "position": 3
                    }
                },

上記の例のように設定すると、"themeFlagWhitelist" に載っている "allow_location" または "use_gps" というフラグが立っているテーマでのみ、このボタンが表示されます。qwc2-demo-app/themesConfig.json において、このボタンを表示させたいテーマにどちらかのフラグを設定します。

    {
        "themes": {
            "items": [
                {
                    "id": "isg",
                    "url": "http://webgis.mydomain:8082/isg",
+                   "flags": [
+                       "allow_location"
+                   ],
                    ...
                },
                ...
            ],
            ...
        }
        ...
    }

フラグの名称は自由に付けることが出来ます。

上記はホワイトリスト方式での運用ですが、ブラックリスト方式での運用も可能です。すなわち、"themeFlagBlacklist" に載っているフラグを立てているテーマではこのボタンを表示させない、という方式も可能です。

"themeFlagWhitelist" と "themeFlagBlacklist" による表示制御は、多くのボタンやメニュー項目で使う事が出来ます。詳細は Plugin reference で確認して下さい。

4-4. HOME ボタン

表示範囲をと縮尺をテーマの初期値（Advertize範囲）に戻すボタンです。

    "plugins": {
        "common": [
            ...
            {
                "name": "HomeButton",
                "cfg": {
                    "position": 4
                }
            },
            ...
        ],
    },

4-5. レイヤ・ツリー・ボタン

レイヤ・ツリー（「レイヤ & 凡例」）を表示するボタンです。

    "plugins": {
        "desktop": [
            ...
            {
                "name": "TaskButton",
                "cfg": {
                    "position": 5,
                    "task": "LayerTree",
                    "icon": "layers"
                }
            },
            ...
        ],
    },

4-6. 編集ボタン

編集機能を起動するボタンです。

    "plugins": {
        "desktop": [
            ...
            {
                "name": "TaskButton",
                "cfg": {
                    "position": 6,
                    "task": "Editing",
                    "icon": "editing"
                }
            },
            ...
        ],
    },

ただし、現在の "isg" プロジェクトは QWC2 による編集に対応していませんので、「編集可能なレイヤがありません」とだけ表示されて終ります。どのような編集画面が出てくるのか、まったく分かりません。

また、運用時に QWC2 経由の編集を許可するようなユース・ケースも、少なくとも私にとっては、非常に稀であろうと思います。

そのため、当面は、ホワイトリスト方式でボタンの表示を制御して、デフォルトでは編集機能を隠すことにします。

                {
                    "name": "TaskButton",
                    "cfg": {
+                       "themeFlagWhitelist": [
+                           "allow_edit"
+                       ],
                        "position": 6,
                        "task": "Editing",
                        "icon": "editing"
                    }
                },

4-6-1. 編集機能は諦める

マニュアルによると、編集機能を使用するためには Docker 環境下の qwc-services を利用することが推奨されており、さらに、編集可能なレイヤのソースは PostGIS データベースでなければならないとされています。

QWC2 / QWC Services
- Editing

これは今回の一連の記事が前提としている環境や条件と大きく異なるものですので、編集機能を使用することは、当面、諦めます。

5. トップ・バー

ビューワ最上部のトップ・バーには、qwc2-demo-app/static/config.json によると、いくつかの固定的アイテムと、メニューとツールバーが含まれます。

    "plugins": {
        "common": [
            ...
            {
                "name": "TopBar",
                "cfg": {
                    "menuItems": [
                        ...
                    ]
                }
            }
            ...
        ],
        "mobile": [ ... ],
        "desktop": [
            ...
            {
                "name": "TopBar",
                "cfg": {
                    "toolbarItems": [
                        ...
                    ]
                }
            }
            ...
        ]
    }

ツールバーがあるのはデスクトップだけですね。

ツールバーから見ていきます。

5-1. ツールバー

qwc2-demo-app/static/config.json における設定は以下の通りです。

    "plugins": {
        "common": [ ... ],
        "mobile": [ ... ],
        "desktop": [
            ...
            {
                "name": "TopBar",
                "cfg": {
                    "toolbarItems": [
                        {
                            "key": "Measure",
                            "mode": "LineString",
                            "icon": "measure_line"
                        },
                        {
                            "key": "Measure",
                            "mode": "Polygon",
                            "icon": "measure_polygon"
                        },
                        {
                            "key": "Print",
                            "icon": "print"
                        },
                        {
                            "key": "Identify",
                            "icon": "identify_region",
                            "mode": "Region"
                        }
                    ]
                }
            }
        ],
        ...
    }

順に、計測ツール（線）、計測ツール（ポリゴン）、印刷、Identify ツール（ポリゴン）です。

"topbarItems" ノードの下に定義されているツールは、自由に追加と削除が出来ます。

5-1-1. 計測ツール

二つの計測ツールは問題なく動作しています。

これは、実際には計測ツールを別のモードで呼び出すものです。計測ツールには4つのモードがあって、次のようになっています。

ツール	モード	ラベル	アイコン	計測内容
Measure		計測	measure	以下のどれか
	Point	位置	--	点の座標値
	LineString	長さ	measure_line	ポリラインの長さ
	Area	領域	measure_polygon	ポリゴンの面積
	Bearing	方角	--	方角

ツールバーには LineString と Area だけが登録されている訳ですが、計測ツール呼び出し後にモードを変更することが出来ますので、4つのモードをどれでも使用できます。

後述するメニューには、地図ツールのサブ・アイテムとして、モードを指定しない Measure（計測）だけが登録されています。

ツールバーでも、そうしても良いかも知れません。

                        "toolbarItems": [
                            {
                                "key": "Measure",
-                               "mode": "LineString",
-                               "icon": "measure_line"
+                               "icon": "measure"
                            },
-                           {
-                               "key": "Measure",
-                               "mode": "Polygon",
-                               "icon": "measure_polygon"
-                           },
                            {
                                "key": "Print",
                                "icon": "print"
                            },
                            {
                                "key": "Identify",
                                "icon": "identify_region",
                                "mode": "Region"
                            }
                        ]

なお、Point モードは 'WGS 84 / Pseudo-Mercator'（メートル単位）で座標値を表示します。これは 'WGS 84'（経緯度）に変更したい所ですが、方法が分かりません。

5-1-2. 印刷

"isg" QGIS プロジェクトには印刷レイアウトがまだ登録されていないので、印刷については次回以降に取っておきます。

5-1-3. Identify ツール

Identify ツールは、指定した点の近傍、または円やポリゴンで指定した範囲の中にある地物を特定して、その地物の情報を表示するものです。「特定」という日本語訳は分かりにくいですね。

これにも実際には3つのモードがあるようです。

ツール	モード	ラベル	アイコン	範囲の指定方法
Identify	Point	点を特定	--	点
Identify	Radius	--	identify_radius	中心点と半径
Identify	Region	領域を特定	identify_region	ポリゴン

実験してみました。

                    "toolbarItems": [
                        ...
                        {
                            "key": "Identify",
                            "icon": "info-sign"
                        },
                        {
                            "key": "Identify",
                            "icon": "info-sign",
                            "mode": "Point"
                        },
                        {
                            "key": "Identify",
                            "icon": "identify_radius",
                            "mode": "Radius"
                        },
                        {
                            "key": "Identify",
                            "icon": "identify_region",
                            "mode": "Region"
                        }
                    ]

適当なアイコンが無いので、上の二つは "info-sign" を代用しています。

結果として分かったことは :

モードを指定しない場合は、Point モード
モード・スイッチャーは無い
Radius モードは動作するが、地物情報の取得に失敗する（原因は不明）

という所です。

Identify の Point モードは、ビューワ上で左クリックしたときの既定の動作でもあります。この既定の仕様を変更して、明示的に呼び出さない限り Identify ツールが動作しないようにすることは、出来ないようです。

従って、当面は Region モードの Identify ツールを呼び出すボタンが有れば十分です。後述するメニューでも、地図ツールのサブ・アイテムとして、それだけが登録されています。

なお、このツールに関する翻訳は上書きしたいところですね。

Message Id	現在の翻訳	改訂案
`appmenu.items.IdentifyPoint`	点を特定	点で地物を確認
`appmenu.items.IdentifyRegion`	領域を特定	領域内の地物を確認
`infotool.clickhelpPointP`	地図上の特定したい地点をクリック...	地物を確認したい地点をクリック...
`infotool.clickhelpPolygon`	特定したい地物のまわりにポリゴンを描画...	地物を確認したい領域をポリゴンで描画...
`infotool.clickhelpRadius`	半径をセットし、中心地点をクリックして、円内の地物を特定...	中心地点をクリックして半径を指定し、円内の地物を確認...

「点を特定」および「領域を特定」というラベルは、「点で確認」および「領域で確認」に変更したい所ですね。

5-2. ロゴ

トップ・バー左端のロゴは、"TopBar" ノード直下の固定要素であり、画像ファイル以外のカスタマイズは想定外であるようです。

ただ、私は、ロゴをクリックしたときの動作が気になります。通常、この位置にあるロゴをクリックするとアプリのホームページが 現在のウィンドウで 表示されるものですが、QWC2 では新しいウィンドウで開かれるからです。

この動作を一般的なものに変更することは不可能なようですので、変更するとすればリンクそのものを削除するぐらいしか出来ません。

                {
                    "name": "TopBar",
                    "cfg": {
                        ...
-                       "logoUrl": "/",
+                       "logoUrl": "",
                        ...
                    }
                }

なお、ロゴ画像のカスタマイズについては、前回の記事を参照して下さい。

QGIS データを Web で表示 #7 - QWC2（続々）
- 2. アイコン、ロゴ、タイトルの変更
  - 2-4. ロゴを差し替える

5-3. 検索ボックス

ロゴの右隣にある大きな検索ボックスも "TopBar" ノード直下の固定的な要素で、非表示にしたり、カスタマイズしたりすることは困難なようです。

機能としては、

入力された言葉を含むテーマとレイヤを検索して列挙
テーマまたはレイヤを選択すると、
- ビューワのレイヤ・ツリーを選択したテーマ（または選択したレイヤを含むテーマ）に差し替える ... テーマ・スイッチャーと同じ動作
- またはビューワのレイヤ・ツリーに追加

というものです。

検索時に地物の情報までドリル・ダウンはしません。

検索ボックスのプレース・ホルダーの翻訳も改訂が望まれます。

Message Id	現在の翻訳	改訂案
`search.placeholder`	場所を検索、または地図を追加...	テーマやレイヤを検索して選択または追加...

5-4. フル・スクリーン・モード

ツールバー右端のフル・スクリーン・モードを ON/OFF する小さなボタンも "TopBar" ノード直下の固定的な要素です。特にカスタマイズする必要は無いでしょう。

And so, what's next?

おなか一杯になったので、今回はここまでです。

残っているのは、トップ・バーのメニュー・アイテムです。今回は後回しにしたレイヤ・ツリー、印刷などの大物も、すべてメニュー・アイテムに含まれています。

次回はこの残っているメニュー・アイテムを（諦めることにした編集関連の機能を除いて）一つずつ片付けて行きたいと思います。

ただし、単純に数だけ数えても項目が多いし、厄介そうなのも多いので、一回で完了しない可能性はあります。

QGIS データを Web で表示 #9 - QWC2（続々々々）