Debianでka-MapのメモプラスOpenLayers とGeoExt: OpenLayers 54 Feature Info - WMSGetFeatureInfo コントロールでレイヤ情報を表示

Feature Info Example（getfeatureinfo-control.html）を参考に WMS レイヤからの位置情報と属性を表示することを試してみます。

HTML ファイルを新規作成します。
「openlayersTokyoproj」を右クリックして新規 -> HTML ファイルをクリック。
「HTML ファイル」ウィンドウの「ファイル名（任意：openlayers_getfeatureinfo_ctrl.html）」に入力して「完了」ボタンをクリック。
「charset」を「utf-8」にします。
「examples」の「getfeatureinfo-control.html」の内容をコピーして新規作成したファイルに貼り付けます。

コードの修正とちょっと解説します。


<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>OpenLayers54 WMS Feature Info (GeoServer)</title>

<!-- OpenLayers ライブラリ -->
  <script src="./lib/Firebug/firebug.js"></script>
  <script src="./lib/OpenLayers.js"></script>

<!-- Proj4js ライブラリ -->
  <script type="text/javascript" src="./lib/proj4js/lib/proj4js-compressed.js"></script>
  <script type="text/javascript" src="./lib/proj4js/lib/projCode/tmerc.js"></script>
  <script type="text/javascript" src="./lib/proj4js/lib/defs/EPSG2456.js"></script>


<!-- スタイルシート -->
  <link rel="stylesheet" href="./theme/default/style.css" type="text/css" />
  <link rel="stylesheet" href="./examples/style.css" type="text/css" />

<!-- フィーチャの属性の表示スタイル -->
  <style type="text/css">
   ul, li {
    padding-left: 0px;
    margin-left: 0px;
    list-style: none;
   }
   #info {
    position: absolute;
    top: 6em;
    left: 550px;
   }
   #info table td {
    border:1px solid #ddd;
    border-collapse: collapse;
    margin: 0;
    padding: 0;
    font-size: 90%;
    padding: .2em .1em;
    background:#fff;
   }
   #info table th{
    padding:.2em .2em;
    text-transform: uppercase;
    font-weight: bold;
    background: #eee;
   }
   tr.odd td {
    background:#eee;
   }
   table.featureInfo caption {
    text-align:left;
    font-size:100%;
    font-weight:bold;
    text-transform:uppercase;
    padding:.2em .2em;
   }

  </style>


  <script defer="defer" type="text/javascript">
   OpenLayers.ProxyHost = "/cgi-bin/proxy.cgi?url="; // 修正

   var map, infocontrols, water, highlightlayer;

   function load() {
// 東京都用 map の設定
    map = new OpenLayers.Map('map', {
     projection: new OpenLayers.Projection("EPSG:2456"),
     displayProjection: new OpenLayers.Projection("EPSG:4326"),
     maxResolution: 'auto',
     units: 'meters',
     maxExtent: new OpenLayers.Bounds(-279000,1054000,-185000,1104000)
    });
// ここまで


    var layer1 = new OpenLayers.Layer.WMS("Gyoseikukaku", // 修正
     "http://localhost:8080/geoserver/wms", // 修正
     {
      'layers': 'sde:gyoseikukaku', // 修正
//    transparent: true, // 修正
      format: 'image/png'
     },{
      isBaseLayer: true
    });
    var layer2 = new OpenLayers.Layer.WMS("railroad", // 修正
     "http://localhost:8080/geoserver/wms", // 修正
     {
      'layers': 'sde:railroad2', // 修正
      transparent: true, 
      format: 'image/png'
     },{
      isBaseLayer: false,
      projection: new OpenLayers.Projection("EPSG:4326") // 追加
    });

    var layer3 = new OpenLayers.Layer.WMS("Public Facilities", // 修正
     "http://localhost:8080/geoserver/wms", // 修正
     {
      'layers': 'sde:pf_tokyo', // 修正
      transparent: true, 
      format: 'image/png'
     },{
      isBaseLayer: false,
      projection: new OpenLayers.Projection("EPSG:4326") // 追加
    });

    water = new OpenLayers.Layer.WMS("River", // 修正
     "http://localhost:8080/geoserver/wms", // 修正
     {
      'layers': 'sde:river_tokyo2', // 修正
      transparent: true, 
      format: 'image/png'
     },{
      isBaseLayer: false,
      projection: new OpenLayers.Projection("EPSG:4326") // 追加
    });


    highlightLayer = new OpenLayers.Layer.Vector("Highlighted Features", {
     displayInLayerSwitcher: false, 
     isBaseLayer: false 
    });

    infoControls = {
     click: new OpenLayers.Control.WMSGetFeatureInfo({
      url: 'http://localhost:8080/geoserver/wms', // 修正
      title: 'Identify features by clicking',
      layers: [water],
      queryVisible: true
     }),
     hover: new OpenLayers.Control.WMSGetFeatureInfo({
      url: 'http://localhost:8080/geoserver/wms', // 修正
      title: 'Identify features by clicking',
      layers: [water],
      hover: true,
      // defining a custom format options here
      formatOptions: {
       typeName: 'water_bodies', 
       featureNS: 'http://geoserver.sf.net'
      },
      queryVisible: true
     })
    }


    map.addLayers([layer1, layer2, layer3, water, highlightLayer]); 
    for (var i in infoControls) { 
     infoControls[i].events.register("getfeatureinfo", this, showInfo);
     map.addControl(infoControls[i]); 
     }

    map.addControl(new OpenLayers.Control.LayerSwitcher());
    map.addControl(new OpenLayers.Control.MousePosition()); // 追加
    map.addControl(new OpenLayers.Control.ScaleLine());     // 追加

    infoControls.click.activate();
//  map.zoomToMaxExtent();
    map.zoomToExtent(new OpenLayers.Bounds(-210000,1070000,-200000,1075000)); // 最初の表示範囲を狭くしました。
   }


    // フィーチャのハイライトまたは属性の表示
   function showInfo(evt) {
    if (evt.features && evt.features.length) {
     highlightLayer.destroyFeatures();
     highlightLayer.addFeatures(evt.features);
     highlightLayer.redraw();
    } else {
     $('responseText').innerHTML = evt.text;
    }
   }
    // Click または Hover の選択
   function toggleControl(element) {
    for (var key in infoControls) {
     var control = infoControls[key];
     if (element.value == key && element.checked) {
      control.activate();
     } else {
      control.deactivate();
     }
    }
   }
    // フィーチャ属性表示またはハイライトの選択
   function toggleFormat(element) {
    for (var key in infoControls) {
     var control = infoControls[key];
     control.infoFormat = element.value;
    }
   }
    // [water] レイヤまたはすべてのレイヤが対象か選択
   function toggleLayers(element) {
    for (var key in infoControls) {
     var control = infoControls[key];
     if (element.value == 'Specified') {
      control.layers = [water];
     } else {
      control.layers = null;
     }
    }
   }

  </script>
 </head>


 <body onload="load()">
  <h1 id="title">Feature Info Example</h1>
  <div id="tags"></div>
  <p id="shortdesc">
   Demonstrates the WMSGetFeatureInfo control for fetching information about a position from WMS (via GetFeatureInfo request).
  </p>
  <div id="info">
   <h1>Tasmania</h1>
   <p>Click on the map to get feature info.</p>
   <div id="responseText"></div>
  </div>
  <div id="map" class="smallmap"></div>
  <div id="docs"></div>
  <ul id="control">
   <li>
    <input type="radio" name="controlType" value="click" id="click" onclick="toggleControl(this);" checked="checked" />
    <label for="click">Click</label>
   </li>
   <li>
    <input type="radio" name="controlType" value="hover" id="hover"  onclick="toggleControl(this);" />
    <label for="hover">Hover</label>
   </li>
  </ul>
  <ul id="format">
   <li>
    <input type="radio" name="formatType" value="text/html" id="html"  onclick="toggleFormat(this);" checked="checked" />
    <label for="html">Show HTML Description</label>
   </li>
   <li>
    <input type="radio" name="formatType" value="application/vnd.ogc.gml" id="highlight" onclick="toggleFormat(this);" />
    <label for="highlight">Highlight Feature on Map</label>
   </li>
  </ul>
  <ul id="layers">
   <li>
    <input type="radio" name="layerSelection" value="Specified" id="Specified" onclick="toggleLayers(this);" checked="checked" />
    <label for="Specified">Get water body info</label>
   </li>
   <li>
    <input type="radio" name="layerSelection" value="Auto" id="Auto"  onclick="toggleLayers(this);" />
    <label for="Auto">Get info for visible layers</label>
   </li>
  </ul>
 </body>
</html>

river_tokyo2(water) レイヤと railroad2(layer2) レイヤの色が同じなので、railroad2 レイヤの線の色を GeoServer で変えます。

GeoServer の設定ページの左側の欄の Data -> Layers をクリックします。
Layers 画面の「railroad2」をクリックします。
sde:railroad2 画面の「Publishing」タブをクリックします。
Default Title の Default Style の選択リストで「simple_roads」を選びます。
「Save」ボタンをクリックします。

Debianでka-MapのメモプラスOpenLayers とGeoExt

ブログアーカイブ

自己紹介

2010年3月12日金曜日

OpenLayers 54 Feature Info - WMSGetFeatureInfo コントロールでレイヤ情報を表示

0 件のコメント:

Debianでka-Mapのメモ プラスOpenLayers とGeoExt

ブログ アーカイブ