0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

QGIS データを Web で表示 #9 - QWC2(続々々々)

Last updated at Posted at 2025-02-21

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

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

更に QWC2 の外観と機能のカスタマイズを2回連続で行ってきました。

今回も引き続いて QWC2 のカスタマイズを行います。さまざまなメニュー・アイテムとそこから呼び出される機能の詳細が主な対象となります。

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

なお、前回述べたように、この一連の記事では、Docker で動く qwc-services 環境や PostGIS データベースの利用を前提とした機能(特に編集機能)については扱いませんので、ご了承下さい。

1. メニュー

トップ・バーの右端にある「地図 & ツール」と表示された部分をクリックすると、下のスクリーンショットのように、メニューがドロップダウン表示されます。

image.png

さらに、メニュー・アイテムの「地図ツール」をクリックすると、サブ・アイテムが表示されます。

image.png

これら全てのメニュー・アイテムについて順に見ていきますが、何しろ数が多いので、不要なものや今回は対象にしないものを非表示にして、少しでも心理的負担を軽減しておきましょう。

1-1. メニュー・フィルタ

メニュー最上段にある検索ボックスはメニュー項目を絞り込むためのものですが、要りますか? 要らんでしょう。

qwc2-demo-app/static/config.json で、"plugins.common.TopBar.cfg.appMenuFilterField"false に変更します。

        "plugins": {
            "common": [
                ...
                {
                    "name": "TopBar",
                    "cfg": {
                        ...
                        "appMenuClearsTask": true,
-                       "appMenuFilterField": true,
+                       "appMenuFilterField": false,
                        "appMenuVisibleOnStartup": false,
                        ...
                    }
                },
                ...
            ],
            ...
        }

これでメニュー・フィルタは表示されなくなります。

image.png

1-2. 編集機能を非表示にする

以下の機能は、Docker で動く qwc-services 環境や PostGIS データベースの利用を前提としたものですので、メニューから削除します。

  • "Editing" ... 編集
  • "FeatureForm" ... 地物フォーム
  • "AttributeTable" ... 属性テーブル
        "plugins": {
            "common": [
                ...
                {
                    "name": "TopBar",
                    "cfg": {
                        "menuItems": [
                            ...
                            {
                                "key": "Tools",
                                "icon": "tools",
                                "subitems": [
                                    ...
                                    {
                                        "key": "Editing",
+                                       "themeFlagWhitelist": [ "allow_edit"],
                                        "icon": "editing"
                                    },
                                    {
                                        "key": "FeatureForm",
+                                       "themeFlagWhitelist": [ "allow_edit"],
                                        "icon": "featureform"
                                    },
                                    {
                                        "key": "AttributeTable",
+                                       "themeFlagWhitelist": [ "allow_edit"],
                                        "icon": "editing"
                                    },
                                    ...
                                ]
                            },
                            ...
                        }
                        ...
                    }
                },
                ...
            ],
            ...
        }

上記は、テーマが "allow_edit" というフラグを立てている場合に限って "Editing""FeatureForm""AttributeTable" のアイテムを表示するというホワイトリスト方式の設定です。

これで、メニューの「地図ツール」のサブ・アイテムから上記の3つが削除されます。

image.png

1-3. 複数のテーマを準備

テーマ・スイッチャーとレイヤ・ツリーについて調べるために、複数のテーマを準備しました。

  1. "isg" ... これまで使用してきたテーマ
    • 岩座神 ... プロジェクト・タイトル
      • スポット
      • 棚田
      • 岩座神境界線 ("isarigami")
      • 地形 ("geom")
        • CS立体図
        • 陰影図-地表
        • 陰影図-表面
  2. "isg-dem" ... 標高図
    • 岩座神標高図 ... プロジェクト・タイトル
      • 岩座神境界線 ("isarigami")
      • 地形 ("geom")
        • DEM
        • DSM
  3. "isg-dem-flat" ... 標高図(フラットなレイヤ構成)
    • 岩座神標高図 (FLAT) ... プロジェクト・タイトル
      • 岩座神境界線 ("isarigami")
      • DEM
      • DSM
  4. "isg-basics" ... 河川、道路、建造物
    • 岩座神基本情報 ... プロジェクト・タイトル
      • 基本情報 ("basics")
        • 建造物
        • 道路
        • 水域
      • 岩座神境界線 ("isarigami")
  5. "isg-basics-flat" ... 河川、道路、建造物(フラットなレイヤ構成)
    • 岩座神基本情報 (FLAT) ... プロジェクト・タイトル
      • 建造物
      • 道路
      • 水域
      • 岩座神境界線 ("isarigami")
  6. "isg-road" ... 道路だけ
    • 岩座神道路図 ... プロジェクト・タイトル
      • 道路

(FLAT) を後置したプロジェクトは、レイヤをグループ化をしていないこと以外は元のプロジェクトと同じです。

1-4. ポータル

「ポータル」というメニュー・アイテムを選択すると、ポータル画面に戻ります。

image.png

追加したものを含めて全部で6つのテーマが表示されています。

1-5. テーマ・スイッチャー

メニュー・アイテム「テーマ」を選ぶと、テーマ・スイッチャーが呼び出されます。

image.png

ポータルとの違いは、テーマ・スイッチャーには「レイヤを追加」ボタンと「テーマを追加」ボタンがあることです。

テーマ・スイッチャー("ThemeSwitcher")プラグインに関わる設定は、qwc-demo-app/static/config.json の2個所、一つはルート・ノード、もう一つは "plugins.common.ThemeSwitcher" ノードの下にあります。

    ...
    "allowAddingOtherThemes": true,
    ...
    "plugins": {
        "common": [
            ...
            {
                "name": "ThemeSwitcher",
                "cfg": {
                    "collapsibleGroups": true
                }
            },
            ...
        ],
        ...
    }

マニュアルによると、プラグインのレベルでいろいろな設定が可能です。以下に主要なものを挙げます。

属性 説明
1 G allowAddingOtherThemes 他のテーマの追加を許可
(既定値 = false
2 collapsibleGroups テーマ・グループの折りたたみを許可
(既定値 = 指定無し)
3 hideAddThemeButton 「テーマを追加」ボタンを非表示 (※)
(既定値 =指定無し)
4 hideAddThemeLayersButton 「レイヤを追加」ボタンを非表示 (※)
(既定値 = 指定無し)
5 showDefaultThemeSelector デフォルト・テーマ選択ボタンを表示
(既定値 = true
6 showLayerAfterChangeTheme テーマ切替え後にレイヤ・ツリーを表示
(既定値 = false
7 showThemeFilter テーマ・フィルタを表示
(既定値 = true
  • G ... グローバル・オプション
  • (※) : グローバル・オプション "allowAddingOtherThemes"false の場合、「テーマを追加」ボタンと「レイヤを追加」ボタンは非表示になる

「テーマを追加」と「レイヤを追加」は、選択したテーマまたはレイヤを現在表示中のテーマのレイヤ・ツリーに追加するという、上級者にとっては便利かも知れないけれど、GIS というものに馴染みの少ない一般の人にとっては躓きの原因となりそうな機能です。

しかし、今回は、すぐ後で触れるレイヤ・ツリーの機能を調査するために、テーマとレイヤの追加を有効にしたままにしておきます。

なお、テーマ・フィルタは、テーマの数が少ない場合には不要でしょう。

        ...
        "allowAddingOtherThemes": true,
        ...
        "plugins": {
            "common": [
                ...
                {
                    "name": "ThemeSwitcher",
                    "cfg": {
+                       "showThemeFilter": false,
                        "collapsibleGroups": true
                    }
                },
                ...
            ],
            ...
        }

1-5-1. テーマの追加

image.png

ボタンをクリックすると、選択されたテーマが現在表示中のテーマに追加されます。

image.png

上の図で、赤い矩形でかこったところが追加されたテーマです。

1-5-2. レイヤの追加

image.png

「レイヤの追加」ボタンを押すと、下の図のように、現在のレイヤ・ツリーと、選択したテーマのレイヤ・ツリーが表示されます。

image.png

チェックボックスで追加したいレイヤを選択して「選択したレイヤを追加」ボタンを押すか、または、レイヤ(およびレイヤ・グループ)の ボタンを押すと、選択されたレイヤが現在のレイヤに追加されます。

下の図は、「地形」レイヤ・グループを追加した結果です。

image.png

操作については、以下の点を特徴として挙げることができます。

  • レイヤ・グループを追加すると、相互排他的グループが維持される
  • グループ内のレイヤを単独で追加することも出来るが、その場合はグループの外に出される
  • 同じレイヤを2回追加しようとしても出来ない
    • ただし、現在のテーマに同じレイヤがあっても、それは考慮しない
  • 間違って追加したものは、レイヤ・ツリーの「ゴミ箱」アイコンをクリックすると削除出来る

1-5-3. レイヤの表示順とレイヤ・グループの取扱いについて

テーマやレイヤを追加した後にレイヤの表示順を変更したい場合がよくあります。

このとき、どのような方法でレイヤの表示順を変更出来るか、また、その時にレイヤ・グループはどういう取扱いになるのかが問題になります。

この問題は、レイヤ・ツリーの設定によって大きく変ってきます。後で詳しく説明します。

1-6. レイヤ・ツリー

メニュー・アイテム「レイヤ & 凡例」を選ぶと、レイヤ・ツリーが呼び出されます。

image.png

レイヤ・ツリー("LayerTree")プラグインに関係する設定も、qwc-demo-app/static/config.json のルート・ノードと "plugins.common.LayerTree" ノードの下にあります。

    ...
    "preserveExtentOnThemeSwitch": true,
    "preserveBackgroundOnThemeSwitch": true,
    "preserveNonThemeLayersOnThemeSwitch": false,
    ...
    "allowReorderingLayers": true,
    "preventSplittingGroupsWhenReordering": false,
    "allowLayerTreeSeparators": false,
    "flattenLayerTreeGroups": false,
    "allowRemovingThemeLayers": true,
    ...
    "allowAddingOtherThemes": false,
    ...
    "plugins": {
        "common": [
            ...
            {
                "name": "LayerTree",
                "cfg": {
                    "showLegendIcons": true,
                    "showRootEntry": true,
                    "showQueryableIcon": true,
                    "allowMapTips": true,
                    "mapTipsEnabled": false,
                    "allowCompare": true,
                    "allowImport": true,
                    "groupTogglesSublayers": false,
                    "grayUnchecked": false,
                    "layerInfoWindowSize": {
                        "width": 480,
                        "height": 400
                    },
                    "bboxDependentLegend": true,
                    "scaleDependentLegend": "theme",
                    "showToggleAllLayersCheckbox": true,
                    "extraLegendParameters": ""
                },
                "mapClickAction": "identify"
            },
            ...
        ],
        ...
    }

マニュアルに設定可能な項目が列挙されていますが、以下には重要と思われるものだけを示します。

属性 説明
1 G allowAddingOtherThemes 現在表示されているテーマに別のテーマを追加することを許可
(既定値 = false)
2 G allowLayerTreeSeparators フラットなレイヤ・ツリーにセパレータを追加することを許可
(既定値 = false)
3 G allowRemovingThemeLayers テーマ内レイヤをレイヤ・ツリーから削除することを許可
(既定値 = false)
4 G allowReorderingLayers レイヤ・ツリーでレイヤの表示順変更を許可
(既定値 = false)
5 G disableImportingLocalLayers ローカル・ファイルによるレイヤのインポートを無効化
(既定値 = false)
6 G flattenLayerTreeGroups グループを表示せずにフラットなレイヤ・ツリーを表示
(既定値 = false)
7 G importLayerUrlPresets レイヤ・インポート用 URL のプリセット
{"label":"表示名", "value":"URL"} の配列で指定
(既定値 = 指定無し)
8 G preserveBackgroundOnThemeSwitch 可能ならテーマ変更後も現在の背景を維持
(既定値 = false)
9 G preserveExtentOnThemeSwitch 可能ならテーマ変更後も現在の表示領域を維持
(既定値 = false)
10 G preserveNonThemeLayersOnThemeSwitch テーマ変更後もテーマ外レイヤを維持
(既定値 = false)
11 G preventSplittingGroupsWhenReordering レイヤ表示順序変更時にグループを分割しない
(既定値 = false)
12 addLayerSeparator セパレータの挿入方法
func 型で指定(既定値 = 指定無し)
13 allowCompare 「トップ・レイヤを比較」を許可
MapCompare プラグインが必要
(既定値 = true
14 allowImport 外部レイヤのインポートを許可
(既定値 = true
15 allowMapTips マップ・チップの選択を許可
(既定値 = true
16 mapTipsEnabled マップ・チップの選択の初期状態
(既定値 = false
17 allowSelectIdentifyableLayers 地物確認(Identify)できるレイヤの選択を許可
"showQueryableIcon" : true の設定が必要
(既定値 = false
18 bboxDependentLegend BBox 依存の凡例を表示
指定できる値は、true, false または "theme"
"theme" を指定すると、テーマ内レイヤのみに適用
(既定値 = false
19 enableLegendPrint 凡例の印刷を許可
(既定値 = true
20 enableServiceInfo WMS サービスのメタデータを表示するボタンを表示
(既定値 = true
21 enableVisibleFilter 非表示レイヤをフィルタするボタンを表示
(既定値 = true
22 extraLegendParameters GetLegendGraphics リクエストに渡す追加のパラメータ(文字列)
(既定値 = 指定無し)
23 fallbackDrag ドラッグ & ドロップ にフォールバック・ロジックを使用
(既定値 = 指定無し)
24 flattenGroups グループを表示せずにフラットなレイヤ・ツリーを表示
(既定値 = false)
25 grayUnchecked 非表示のレイヤをグレイ表示
(既定値 = true
26 groupTogglesSublayers グループをトグルすると、全サブ・レイヤをトグル
(既定値 = false)
27 infoInSettings true なら、レイヤ情報ボタンをレイヤ設定の中に表示
false ならレイヤのタイトルの横に表示
(既定値 = true)
28 onlyGroups レイヤ・グループのみを表示
(既定値 = false)
29 scaleDependentLegend 縮尺依存の凡例を表示
指定できる値は、true, false または "theme"
"theme" を指定すると、テーマ内レイヤのみに適用
(既定値 = 指定無し)
30 showAttributeTableLink レイヤ・オプション・メニューにレイヤの属性テーブルへのリンクを表示
(既定値 = 指定無し)
31 showLegendIcons 凡例アイコンを表示
(既定値 = true
32 showQueryableIcon レイヤが地物確認可能であることを示すアイコンを表示
(既定値 = true
33 showRootEntry ツリーのルート・エントリ(テーマ名)を表示
(既定値 = true
34 showToggleAllLayersCheckbox 全レイヤの表示を ON/OFF するチェックボックスを表示
(既定値 = true
  • G ... グローバル・オプション
  • テーマ内レイヤ ... テーマに元からあるレイヤ
  • テーマ外レイヤ ... テーマに後から追加されたレイヤ
  • ドラッグ & ドロップでレイヤ表示順を変更出来るようにするための条件は ...
    • "allowReorderingLayers": true AND
      • ("preventSplittingGroupsWhenReordering": true OR
      • "flattenLayerTreeGroups: true)

絞り込んだつもりですが、まだまだオプションの数が多くて、気が遠くなりそうです。一つずつ見ていきます。

1-6-1. 全レイヤの表示を ON/OFF するチェックボックス

レイヤ・ツリー・パネルのタイトル・バー左端にあるチェックボックスです。

image.png

On/OFF すると、全レイヤの表示状態がトグルされます。

"showToggleAllLayersCheckbox" (No.34) を false に設定すると、チェックボックスが表示されなくなります。

image.png

この状態でも、テーマ・タイトル(「岩座神」)のチェックボックスで全レイヤの表示を ON/OFF 出来ます。

無くても行けますが、有っても邪魔にならないでしょうから、好みに従ってください。

1-6-2. 凡例の印刷

レイヤ・ツリー・パネルのタイトル・バーにある「プリンタ」アイコンをクリックすると、下の図のように、凡例印刷用のウィンドウが開き、「凡例を印刷」ボタンを押すとブラウザの印刷機能が呼び出されます。

image.png

非表示のレイヤは凡例から除外されます。例えば、縮尺が小さすぎて表示されていない「スポット」と、排他的選択グループで選ばれていない「陰影図-地表」と「陰影図-表面」は、凡例の印刷でも除外されています。

印刷のレイアウトがしょぼいのを何とか出来ないかと思います。

"enableLegendPrint" (No.19) を false にすると、「印刷」アイコンは表示されなくなります。

1-6-3. 不可視のレイヤをフィルタ

レイヤ・ツリー・パネルのタイトル・バーにある「目玉」アイコンをクリックすると、下の図のように、現在表示されていないレイヤがツリー上に表示されなくなります。

image.png

元に戻す場合は、もう一度おなじ「目玉」アイコンを押します。トグル・スイッチになっている訳ですね。

しかし、見えていないレイヤをツリーの表示から除外したら、レイヤの表示・非表示を選択しづらくなりませんか?

"enableVisibleFilter" (No.21) を false に設定すると、「目玉」アイコンは表示されなくなります。

1-6-4. 全てのレイヤを削除

レイヤ・ツリー・パネルのタイトル・バーにある「ゴミ箱」アイコンをクリックすると、下の図のように、全てのレイヤが削除されます。

image.png

ルート・エントリ(=テーマ名)だけは残るのですね。

1-6-4-1. テーマ内レイヤの削除を禁止

"allowRemovingThemeLayers" (No.3 G) を false に設定すると、レイヤ・ツリー・パネルのタイトル・バーにある「ゴミ箱」アイコンは表示されなくなります。また、レイヤ・ツリーのエントリでも、テーマ内のレイヤについては「ゴミ箱」アイコンが消えます。

image.png

ただし、追加したテーマのレイヤは個別に削除することが出来ます。

1-6-5. テーマの情報

レイヤ・ツリー・パネルのタイトル・バーにある「情報」アイコンをクリックすると、下の図のように、WMS サーバが公開しているテーマのメタデータが表示されます。

image.png

"enableServiceInfo" (No.20) を false に設定すると、「情報」アイコンは表示されなくなります。

1-6-6. 凡例アイコン

レイヤ・ツリーでレイヤ名の前に表示される小さな凡例のアイコンです。

image.png

図のように、マウスをホバーすると、ツールチップで拡大表示されます。

1-6-6-1. 縮尺依存の凡例

上の図で、「スポット」の凡例アイコンが表示されていないのは、現在の縮尺では「スポット」が表示されないことを反映しています。

"scaleDependentLegend" (No.29) の設定によって、この挙動を変更することが出来ます。

  • true ... 縮尺依存の凡例を表示する
  • false ... 縮尺に関係なく凡例を表示する
  • "theme" ... テーマ内のレイヤについて、縮尺依存の凡例を表示する
1-6-6-2. BBox 依存の凡例

レイヤの領域(BBox)に依存して凡例の表示を制御します。

"bboxDependentLegend" (No.18) の設定によって、レイヤの領域(BBox)に依存して凡例の表示を制御することが出来ます。

  • true ... BBox 依存の凡例を表示する
  • false ... BBox に関係なく凡例を表示する
  • "theme" ... テーマ内のレイヤについて、BBox 依存の凡例を表示する

と、マニュアルには書いてあるのですが、私の環境では違いが分かりませんでした。

1-6-6-3. 凡例アイコンを表示しない

小さくて見にくいアイコンですので、無くても良い場合があるかも知れません。

"showLegendIcons" (No.31) を false に設定すると、凡例アイコンを消すことが出来ます。

この場合、ツールチップも表示されなくなりますので、凡例を知るためには別途メニューから「凡例」を選ぶ必要があります。

1-6-6-4. 凡例のイメージを調整する

"extraLegendParameters" (No.22) にいくつかの追加パラメータを設定することによって、凡例のイメージを調整することが出来ます。

image.png

上の図は、QGIS Desktop のレイヤ・ツリーに出来るだけ似せようと試みた結果です。以下のパラメータを指定しています。

RULELABEL=AUTO
BOXSPACE=1
LAYERTITLESPACE=0
LAYERTITLE=FALSE

タイトルとラベルを省略してシンボルだけを出来るだけ大きく表示しているのですが、上と右にある余計な余白がどうしても取れません。

また、これだと「プリンタ」ボタンで凡例を印刷するときに、タイトルとラベルが表示されなくて、それはそれで具合が悪いのです。

なかなか思い通りには出来ませんね。

詳細については、1-8. 凡例のイメージを調整する を参照してください。

1-6-7. ルート・エントリ(テーマ名)を表示しない

"showRootEntry" (No.33) を false に設定すると、下の図のように、ツリーのルート・エントリ(テーマ名)が表示されなくなります。

image.png

テーマを追加すると、下の図のようになります。

image.png

同じレベルに「岩座神の境界線」レイヤと「地形」レイヤ・グループがあるのが、ちょっと落ち着かない感じがします。

ルート・エントリ(テーマ名)は表示されないだけで、データとしては追跡されていますので、同じ名前のレイヤであってもルート・エントリが異なるものは別物として扱われます。

"allowRemovingThemeLayers" (No.3 G) を false に設定すると、下の図のようになって、どのレイヤが追加されたか判別しやすくなります。

image.png

1-6-8. レイヤのグループを表示せず、フラットなツリーを表示する

"flattenLayerTreeGroups" (No.6 G) あるいは No.23 "flattenGroups" (No.24) true に設定すると、下の図のように、レイヤのグループを表示せずに、フラットなレイヤ・ツリーが表示されます。

image.png

ルート・エントリ(=テーマ名)も表示されません。

ただし、レイヤのグループ情報は追跡されていて、相互排他的グループに属するレイヤ(上の例では「CS立体図」、「陰影図-地表」、「陰影図-表面」)は、一つの表示を ON にすると他の表示が OFF になります。ラジオボタンではなくチェックボックスを頭に付けているにもかかわらず、そういう挙動をします。

見た目と挙動が異なるのはユーザ・インタフェイスとして落第なので、相互排他的グループを利用している場合は、レイヤのグループ表示を抑止するのはやめておく方が良いでしょう。

1-6-8-1. レイヤのセパレータを追加できるようにする

"allowLayerTreeSeparators" (No.2 G) を true に設定すると、フラットなレイヤ・ツリーにセパレータを追加することが出来るようになります。

image.png

上の図のように、レイヤの間にマウス・ポインタを置くと「区切り線を追加」という表示がでますので、そのまま左ボタンをクリックすると、下の図のようにその場所に区切り線が追加されます。

image.png

しかし、「区切り線」という翻訳は無いですよね。ははは、どうしたものか。(実は、QWC2 の日本語メッセージの初版を書いたのは私なのです)

なお、セパレータの追加は、フラットなレイヤ・ツリーでのみ可能です。

1-6-9. グループのみを表示

"onlyGroups" (No.28) を true に設定すると、レイヤ・グループだけが表示されるようになります。

image.png

さらに、"showRootEntry" (No.33) を false を合せて設定すると、下の図のようになります。

image.png

ルート・エントリもグループの一種なのですね。

グループだけを表示、グループ内のレイヤは表示しないという、標榜するとおりの挙動ですが、しかし、こんな機能、どこに使うんだ?

1-6-10. レイヤの設定

各レイヤの「歯車」アイコンをクリックすると、下の図のように、レイヤの設定が開きます。

image.png

1-6-10-1. レイヤにズーム

「ルーペ」アイコンをクリックすると、レイヤの地物が存在する領域へとズームします。

1-6-10-2. 透明度スライダ

レイヤの透明度を設定するスライダです。

しかし、非常に残念なことですが、MapCache 経由で表示しているレイヤは透明度を変更することが出来ません。

qwc-services 環境では、MapCache 経由の外部レイヤであっても、透明度をコントロールすることが可能です。

1-6-10-3. レイヤ順序変更ボタン

二つの「矢印」アイコン( )は、レイヤの重なり順序(表示順序)を変更するためのものです。これについては、後で詳しく説明します。

1-6-10-4. レイヤ情報

「情報」アイコンをクリックすると、図のように、レイヤの情報が表示されます。

image.png

"infoInSettings" (No.26) を false に設定すると、「情報」アイコンが設定の中ではなく、レイヤ・タイトルの隣に表示されます。

image.png

この方が良いですね。

1-6-11. レイヤ順序変更

1-6-11-1. 矢印ボタンによるレイヤ順序変更

image.png

上の図は、「岩座神」というテーマに「岩座神標高図」というテーマから「地形」レイヤ・グループを追加した直後の状態です。

「標高図-地表」というレイヤを一番下の「地形」グループに移動したいと思います。

まず、「歯車」アイコンを押してレイヤの設定を開きます。

image.png

次に (下向き矢印)を押します。

image.png

「標高図-地表」と「標高図-表面」のレイヤの順序が入れ替わりました。よしよし、と。

引き続いて (下向き矢印)を押します。

image.png

ちょっと見ただけでは何だかよく分からない結果になりましたが、下の図のように分解して考えてみると理解できます。

image.png

つまり、ただ単に「標高図-地表」のレイヤが移動したと言うよりも、「岩座神地形図」テーマの「地形」グループの「標高図-地表」レイヤが移動しているのです。

さらに何回か (下向き矢印)を押した結果が下の図です。

image.png

「岩座神標高図 > 地形 > 標高図-地表」のレイヤは、「岩座神 > 地形」グループの中に入っているのではありません。「岩座神 > 地形」グループを二つに分割して、その間に入っています。結果として、「岩座神 > 地形」という相互排他的グループが二つ出来ています。

1-6-11-2. グループの分割を防止する

"preventSplittingGroupsWhenReordering" (No.11 G) を true に設定すると、レイヤ表示順変更時にグループが分割されないようにすることが出来ます。すなわち、グループ外のレイヤがグループを割って間に入ることは出来なくなります。

どっちみち、グループの中に別のレイヤを入れることは出来ないのですから、グループの分割を禁止しておく方が良いでしょう。

1-6-11-3. ドラッグ & ドロップによるレイヤ順序変更

フラットなレイヤ・ツリーにするか、または、グループ分割禁止にすると、ドラッグ & ドロップでレイヤ表示順序を変更出来ます。

しかし、「矢印」アイコンで順序変更をする場合と同じ制約および副作用が伴うことは承知しておく必要があります。

1-6-11-4. レイヤ・グループとレイヤ順序変更は相性が悪い

使用するテーマ(QGIS プロジェクト)がレイヤ・グループ(特に相互排他的グループ)を持っている場合は、レイヤ順序変更機能はかえって使いづらいものになる、というのが私の結論です。

1-6-11-5. レイヤ順序変更を無効にする

"allowReorderingLayers" (No.4 G) を false に設定すると、レイヤ順序変更機能を無効にすることが出来ます。

ただし、副作用があって、レイヤ順序変更機能を無効化すると、後述する「トップ・レイヤを比較」機能も無効化されます。

image.png

1-6-12. 地物確認(Identify)できるレイヤを選択可能にする

"allowSelectIdentifyableLayers" (No.17) および "showQueryableIcon" (No.32) の二つを true に設定すると、地物確認(Identify)できるレイヤを選択することが可能になります。

たとえば、次の画面は「神光寺仁王門」の地点をクリックして地物確認をした結果です。

image.png

岩座神境界線、CS立体図、スポット、棚田という4つのレイヤの地物の情報が表示されていることが分かります。

次に、レイヤ・タイトルの隣にあるアイコンを操作して、スポットと棚田だけを地物確認の対象にして同じ地点をクリックした結果が次の画面です。

image.png

1-6-13. レイヤのマップ・チップ

「レイヤのマップ・チップを表示」チェックボックスを ON にすると、下の図のように、地物の上にマウスをホバーさせたときに、マップ・チップが表示されます。

image.png

"allowMapTips" (No.15) を false にすると、この機能は使用できなくなります。また、"mapTipsEnabled" (No.16) は「レイヤのマップ・チップを表示」チェックボックスの初期状態を設定するオプションです。

また、この機能を働かせるためには、QGIS プロジェクト側でマップ・チップを有効にしてチップの表示内容を定義しておく必要があります。

レイヤのプロパティ > 表示名 > Tipsを有効化 & 地図のTipsのHTML定義 で設定します。

image.png

1-6-14. トップ・レイヤの比較

「トップ・レイヤを比較」チェックボックスを ON にすると、地図のキャンバスが左右に分割され、左側には現在の最上位レイヤを表示したもの、右側にはそれを非表示にした地図が表示されます。

image.png

上の図では「棚田」が現在の最上位レイヤです。

分割位置はマウスのドラッグで動かすことが出来ます。

"allowCompare" (No.13) によって、この機能の有効化・無効化を設定することが出来ます。なお、既に述べたように、レイヤ表示順序変更機能を無効化すると、この機能も無効化されるようです。

1-6-15. レイヤをインポート

"allowImport" (No.14) が true に設定されている場合、テーマ・スイッチャー経由ではなく、レイヤ・ツリーから外部のレイヤをインポートすることが出来ます。

「レイヤをインポート」をクリックすると、下の図のように URL 入力フィールドが表示されます。

image.png

QGIS Server の URL を入力して「接続」ボタンを押すと、次の図のように、サーバから取得できるレイヤが一覧表示されます。

image.png

このサーバは、WMS だけでなく、WFS もサポートしています。

wfs の「水域」、「道路」、「建造物」をクリックして追加した結果が次の図です。

image.png

WFS 経由なので、レイヤのスタイルは復元できません。

1-6-15-1. URL のプリセット

"importLayerUrlPresets" (No.7 G) によって、利用する URL をプリセットすることも出来ます。

    ...
    "importLayerUrlPresets": [
        {"label": "岩座神の基本情報", "value": "http://webgis.mydomain:8082/isg-basics"},
        {"label": "岩座神道路図", "value": "http://webgis.mydomain:8082/isg-road"}
    ],
    ...

上記は、URL 入力欄に手入力してうまく行った URL をセットしたものです。が、それだと上手く行かないみたいです。何が間違っているのかよく分かりません。

1-6-15-2. ローカル・ファイルからのインポート

入力欄を URL から ローカル・ファイル に変更すると、ローカル・ファイルからレイヤをインポートすることが出来ます。

アップロード出来るローカル・ファイルとしてサポートされているファイル形式は、*.kml, *.json, *.geojason, *.pdf, *.zip です。

"disableImportingLocalLayers" (No.5 G) を true に設定すると、ローカル・ファイルのインポートを無効化することが出来ます。

1-7. 凡例

メニュー・アイテム「凡例」を選ぶと、凡例のパネルが呼び出されます。

image.png

凡例("MapLegend")プラグインに関係する設定は "plugins.common.MapLegend" ノードの下にあります。

    ...
    "plugins": {
        "common": [
            ...
            {
                "name": "MapLegend",
                "cfg": {
                    "addGroupTitles": true,
                    "addLayerTitles": true,
                    "bboxDependentLegend": false,
                    "onlyVisibleLegend": false,
                    "scaleDependentLegend": false,
                    "extraLegendParameters": "LAYERTITLE=FALSE"
                }
            },
            ...
        ],
        ...
    }

マニュアルに設定可能な項目が列挙されていますが、以下には重要と思われるものだけを示します。

属性 説明
1 addGroupTitles グループのタイトルを追加
(既定値 = false
2 addLayerTitles レイヤのタイトルを追加
(たいてい凡例画像そのものにタイトルが含まれている事に注意)
(既定値 = false
3 bboxDependentLegend デフォルトで BBox 依存の凡例を表示
(既定値 = false
4 excludeLayers 凡例から除外するレイヤを指定
(既定値 = []
5 extraLegendParameters GetLegendGraphics リクエストに渡す追加のパラメータ(文字列)
(既定値 = 指定無し)
6 onlyVisibleLegend デフォルトで可視のレイヤのみを凡例に含める
(既定値 = false
7 scaleDependentLegend デフォルトで縮尺依存の凡例を表示
(既定値 = false

1-7-1. レイヤ・タイトルの重複を回避する

何もしないと、下の図のように、レイヤ・タイトルが重複表示されます。

image.png

これを回避するには、"addLayerTitles" (No.2) を false に設定するか、"extraLegendParameters" (No.5) に `"LAYERTITLE=FALSE" を指定します。

最初に示した例では、後者の方法を採用しています。

1-7-2. 凡例のイメージを調節する

"extraLegendParameters" (No.5) に追加パラメータを指定して、WMS サーバから取得する凡例のイメージを調節することが出来ます。

詳細は、1-8. 凡例のイメージを調整する を参照してください。

1-7-3. 凡例からレイヤを除外する

"excludeLayers" (No.4) で指定したレイヤは凡例から除外されます。

この設定は、config.jsonMapLegend プラグインの設定ではなく、themesConfig.json のテーマごとの設定に書く方が良いでしょう。

    "themes": {
        "items": [
            {
                "id": "isg",
                ...
                "config": {
                    "plugins": {
                        "MapLegend": {
                            "excludeLayers": [
                                "geom"
                            ]
                        }
                    }
                }
            },
            ...
        },
        ...
    },

書式に注意
themesConfig.json にプラグインの設定を書くときは config.json に書くときと書式が異なりますので、注意してください。

テーマごとにプラグイン設定をオーバーライド可能
上記の例で示しているように、config.json におけるプラグインの設定を themesConfig.json でオーバーライドすることが可能です。

1-8. 凡例のイメージを調整する

LayerTree でも MapLegnend でも "extraLegendParameters" に追加パラメータを設定することによって、取得する凡例のイメージを調整することが出来ます。

次のような追加パラメータが使用可能です。

パラメータ 説明
RULELABEL - TRUE ... ラベルを表示
- FALSE ... ラベルを非表示
- AUTO ... 単一シンボルならラベルを非表示
BOXSPACE 凡例のフレームと内容の間のスペース (mm)
既定値は 2
LAYERSPACE 凡例のレイヤ間のスペース (mm)
既定値は 3
LAYERTITLESPACE レイヤ・タイトルと項目の間の垂直方向スペース (mm)
既定値は 3
SYMBOLSPACE シンボル間の垂直方向スペース (mm)
既定値は 2
ICONLABELSPACE シンボルとラベルの間の水平方向スペース (mm)
既定値は 2
SYMBOLWIDTH シンボルの幅 (mm)
既定値は 7
SYMBOLHEIGHT シンボルの高さ (mm)
既定値は 4
LAYERTITLE - TRUE ... レイヤ・タイトルを表示 (既定値)
- FALSE ... レイヤ・タイトルを非表示

指定可能な全ての引数については、QGIS Server Guide/Manual を参照してください。

追加のパラメータは、以下のように[パラメータ名]=[パラメータ値] の形式で指定します。複数のパラメータを指定する場合は & で繋ぎます。

    "extraLegendParameters" : "RULELABEL=AUTO&BOXSPACE=0"

2. レイヤのインポートと表示順序変更は使えるか?

今回は主としてテーマ・スイッチャーとレイヤ・ツリーの設定を見てきましたが、常に問題になるのが、インポートしたレイヤを適切な表示順序の位置に移動することが結構むずかしい、ということです。GIS というものに馴染んでいるユーザでも訳が分からなくてストレスを感じることが多いのではないでしょうか。少なくとも私はそうでした。

レイヤのインポートと表示順序変更の操作を容易にするためには、使用するテーマ(QGIS プロジェクト)から「レイヤ・グループ」を無くして、まったくフラットなレイヤ・ツリーにする必要があるように思われます。

しかし、そんな事までして、テーマやレイヤのインポートをする必要があるでしょうか?

それよりは、大元のテーマに全てのレイヤを含めておく方が良くないか、と思うのです。初期表示状態を非表示にしておいて、必要に応じて表示するようにすれば良いのです。インポートだの表示順序変更だの、さらにはレイヤの削除だのと、面倒くさい操作はしなくても済みます。レイヤのグループ化という便利な方法も諦めずに済みます。

という次第ですので、私が制作する Web 地図アプリにおいては、レイヤのインポートと表示順序変更(および削除)の機能は封印されることになると思っています。

And so, what's next?

今回は、メニュー・アイテムの中から、テーマ・スイッチャーとレイヤ・ツリーという QWC2 にとっては屋台骨と言ってよい大物たちを片付けました。

残りは、どっちに転んでも大勢に影響の無い小物ばかりです。(本当かしら?)

さっさと残りを片付けたいところですが、その前に、一旦 QWC2 のカスタマイズを中断して、Web 地図アプリの https 化と同一オリジン化を行います。

長々と続く QWC2 カスタマイズ作業に飽きてきたということもありますが、QWC2 に https でないと動作しない機能があったり、QGIS Server が同一オリジンでないと動作に支障があったりすることに気付いたからでもあります。

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?