26 - あきる野市の地図で属性のポップアップ表示（WMS）

WMS レイヤの属性のポップアップ表示
東京都の公共施設のレイヤ（tokyo_pf）の WMS レイヤの属性をポップアップ表示させる機能を追加します。GeoServer が配信したレイヤで動作します。

この機能は、proxy.cgi が実行されていないと動作しないので、24章で WFS で地図を表示して確認しました。また、クリックしやすいように25章でポイントのスタイルを設定しました。

Eclipse を起動して ol003-nippon_bmi_akiruno_pgis.html を開きます。
example フォルダにある getfeatureinfo-popup.html を参考にコードを編集します。

a メニューの「ファイル」->「開く」をクリックします。

b 「ファイルを開く」ウィンドウで、「OpenLayers-2.13.1」->「example」->「getfeatureinfo-popup.html」をクリックして選択し、「OK」ボタンをクリックします。




c 「ol003-nippon_bmi_akiruno_pgis.html」をコピーして、ファイル名「ol005-nippon_bmi_akiruno_pgis.html」にします。
d 「getfeatureinfo-popup.html」の53行目あたりの「info = ...」から71行目あたりの「info.active()」までをコピーします。
e 「ol005-nippon_bmi_akiruno_pgis.html」の「map.addLayers([...」の後に貼り付けます。
f javascriptの一部を次のように修正します。
---
<script type="text/javascript">
 var map, layer0, layer1, layer2, layer3, layer4, info; // info 追加
---
  layer4 = new OpenLayers.Layer.WMS( "Tokyo Public Facilities WMS",
   "http://192.168.1.200:8080/geoserver/wms",
   {
   layers: 'npn:tokyo_pf',
   transparent: true
  });
---
  info = new OpenLayers.Control.WMSGetFeatureInfo({
   url: 'http://192.168.1.200:8080/geoserver/wms',
   title: 'Identify features by clicking',
   queryVisible: true,
   eventListeners: {
    getfeatureinfo: function(event) {
     map.addPopup(new OpenLayers.Popup.FramedCloud(
      "chicken",
      map.getLonLatFromPixel(event.xy),
      null,
      event.text,
      null,
      true
     ));
    }
   }
  });
  map.addControl(info);
  info.activate();
---

レイヤが表示されないときは、url のドメイン部分の "localhost" を "192.168.1.200（GeoServer のときは 192.168.1.200:8080）" に変更します。
Eclipse の実行ボタンをクリックして地図を表示したときは、公共施設のポイントをクリックすると次のように表示されます。

正常に機能させるときは、Web ブラウザのアドレスバーに

http://192.168.1.200/mapsite/openlayersTokyoproj/ol005-nippon_bmi_akiruno_pgis.html

と入力して Enter キーを押します。公共施設のポイントをクリックすると次のように表示されます。