Leaflet で表示している WMS レイヤーをクリックして情報をポップアップさせる

電 GIS debian

OpenLayers だと簡単にできるんでしょうか。
今回は Leaflet と GeoServer の組み合わせで、属性を持った WMS レイヤーを表示し、 WMS レイヤーに表示されたフィーチャーをクリックすることで属性を表示する方法のメモです。

まぁ、ぶっちゃけ Github Gist にある GetFeatureInfo を使えば簡単です。

script 要素で L.TileLayer.BetterWMS.js を読み込むように記述し、レイヤーの読み込みを L.TileLayer.WMS から L.TileLayer.BetterWMS にすれば OK 。

上書きしてリロードすれば属性をポップアップしてくれます。

但し、HTML が置かれているサーバーと GeoServer がポートも含めて同一のドメインに存在していない場合、クロスオリジンリクエストのブロックによって属性情報を取り出すことができず。ポップアップが表示されません。
GeoServer は放っておくと 8080 ポートでの通信を必要としますので、例えば www.fake.local で apache2 も GeoServer も動いている状況でも、通常の HTML へのアクセスは www.fake.local で、 WMS を取り出す GeoServer へのアクセスは www.fake.local:8080 となるため、ドメインの同一性がないと判断されてしまう場合があります。
ずっとこの問題に気づかず1年以上の時間が経ってしまいました。アホかオレは。

解決法としては、 apache2 もコントロールできる環境なので、 apache2 にプロキシ設定を追加してあげれば OK でした。
debian 7.7 での作業です。

apache2 のモジュールをロードします。

# a2enmod proxy
# a2enmod proxy_http

ドキュメントルート/geoserver へのアクセスを localhost:8080/geoserver に飛ばす設定をします。

# vi /etc/apache2/mods-available/proxy.conf
ProxyRequests On
<Proxy *> 
AddDefaultCharset off 
Order deny,allow
#Deny from all
Allow from all
</Proxy>

ProxyPass /geoserver http://localhost:8080/geoserver
ProxyPassReverse /geoserver http://localhost:8080/geoserver

サービスを再起動させてサーバの設定は完了。

# service apache2 restart

最後に JavaScript に書かれている WMS の URL を ドキュメントルート/geoserver/%レイヤ%/wms という形で :8080 を取り外せば OK 。

なお、ポップアップされる情報は GeoServer から返ってくる HTML そのままなので整形する場合には L.TileLayer.BetterWMS.js の67行目にある .setContent() に渡す content を書き換えば大丈夫です。
適当な関数を作って整形すれば見た目も変わります。

1年以上かけてなんとかここまできた…。