Debianでka-MapのメモプラスOpenLayers とGeoExt: GeoExt10 Grid with Feature

Grid Panel configured with a GeoExt.data.FeatureStore

GeoJSONドキュメント（mapserver_tokyo.json）から読み込んだフィーチャを読み込んだ Ext グリッドを表示します。

tokyo_pf_pgis.map の gyoseikai レイヤに東京都の人口を追加して GeoJSON データを作成します。
tokyo_pf_pgis.map をつぎのように修正します。


---
  DATA "the_geom from (
   SELECT gyoseikai.gid AS gid,
   gyoseikai.con AS con,
   gyoseikai.cn2 AS cn2,
   gyoseikai.aac AS aac,
   gyoseikai.the_geom AS the_geom,
   population.total AS total,
   population.male AS male,
   population.female AS female,
   population.foreigner AS foreigner
    FROM gyoseikai LEFT OUTER JOIN population ON gyoseikai.aac = population.aac
  )
  AS gyosei_pop USING UNIQUE gid USING SRID=-1"
---

次に gyoseikai レイヤの WFS データを出力します。
（データ量が多いので２３区だけ出力します。）

///// 参考 /////
MapServer の WFS Filter Encoding サイト
http://mapserver.org/ogc/filter_encoding.html

の検索文字列のフィルタの例より次のコマンドを実行しました。

$ wget -O mapserver_gyoseikai.xml "http://localhost/cgi-bin/mapserv?map=/home/nob61/mapfile/tokyo_pf_pgis.map&request=GetFeature&VERSION=1.0.0&SERVICE=WFS&TYPENAME=gyoseikai&Filter=<Filter><PropertyIsLessThan><PropertyName>aac</PropertyName><Literal>13124</Literal></PropertyIsLessThan></Filter>"

prepare_database(): Query error. Error declaring cursor: ERROR: operator does not exist: character varying < integer
LINE 13: AS gyosei_pop WHERE ( (aac< 13124) ) and (the_geom && setS...
^
HINT: No operator matches the given name and argument type(s). You might need to add explicit type casts.

aac の型が文字列になっているのでエラーになったと思われます。

$ wget -O mapserver_gyoseikai.xml "http://localhost/cgi-bin/mapserv?map=/home/nob61/mapfile/tokyo_pf_pgis.map&request=GetFeature&VERSION=1.0.0&SERVICE=WFS&TYPENAME=gyoseikai&Filter=<Filter><PropertyIsLike wildcard='*' singleChar='.' escape='!'><PropertyName>con</PropertyName><Literal>*区</Literal></PropertyIsLike></Filter>"
bash: !: event not found

と表示されます。

How does one escape special characters when writing SQL queries? サイトに
http://www.orafaq.com/faq/how_does_one_escape_special_characters_when_writing_sql_queries

SQL クエリのエスケープキャラクタが "_" であるとあります。
これで２３区のデータが出力されました。
///// ここまで /////

今回は範囲を限定して出力しました。

$ wget -O mapserver_gyoseikai.xml "http://localhost/cgi-bin/mapserv?map=/home/nob61/mapfile/tokyo_pf_pgis.map&request=GetFeature&VERSION=1.0.0&SERVICE=WFS&TYPENAME=gyoseikai&bbox=139.62,35.53,139.90,35.80"

出力したデータを GeoJSON データに変換します。

$ ogr2ogr -f "GeoJSON" mapserver_gyoseikai.json mapserver_gyoseikai.xml

mapserver_gyoseikai.json を Eclipse にインポートします。

Example サイト
http://www.geoext.org/examples.html

「Grid with Feature」リンクをクリックすると Grid Panel configured with a GeoExt.data.FeatureStore が表示されます。
feature-grid.js を参考にします。

説明を意訳すると、GeoJSONドキュメントから読み込んだフィーチャを読み込んだ Ext グリッドを示しています。

JS ファイルを新規作成します。
「openlayersTokyoproj」を右クリックして新規 -> JavaScript ファイルをクリック。
「JavaScript ファイル」ウィンドウの「ファイル名（任意：feature-grid.js）」に入力して「完了」ボタンをクリック。


var mapPanel, store, gridPanel, mainPanel;

Ext.onReady(function() {
 // create map instance
 // var map = new OpenLayers.Map();
 // 東京都マップ表示
  var map = new OpenLayers.Map('map', {
  controls: [
   new OpenLayers.Control.PanZoom(),
   new OpenLayers.Control.LayerSwitcher(),
   new OpenLayers.Control.MousePosition(),
   new OpenLayers.Control.ScaleLine()
  ],
  projection: new OpenLayers.Projection("EPSG:2456"),
  maxResolution: 'auto',
  maxExtent: new OpenLayers.Bounds(-279000,1054000,-185000,1104000),
  units: 'meters',
  displayProjection: new OpenLayers.Projection("EPSG:4326")
 });


/*
 var wmsLayer = new OpenLayers.Layer.WMS(
  "vmap0",
  "http://vmap0.tiles.osgeo.org/wms/vmap0",
  {layers: 'basic'}
 );
*/
 var layer1 = new OpenLayers.Layer.WMS( "Tokyo Height WMS",
  "http://192.168.1.6/cgi-bin/mapserv?",
  {
   map: '/home/nob61/mapfile/tokyo_bmi_pgis_img2.map',
   layers: 'height',
   format: 'image/png'
 });
 var layer2 = new OpenLayers.Layer.WMS( "Tokyo Kukaku Sen WMS",
  "http://192.168.1.6/cgi-bin/mapserv?",
  {
   map: '/home/nob61/mapfile/tokyo_bmi_pgis_img2.map', 
   layers: 'kukaku',
   transparent: true,
   format: 'image/png'
 });


 // create vector layer
 var vecLayer = new OpenLayers.Layer.Vector("vector");
 map.addLayers([layer1, layer2, vecLayer]);


 // create map panel
 mapPanel = new GeoExt.MapPanel({
  title: "Map",
  region: "center",
  height: 400,
  width: 600,
  map: map,
//  center: new OpenLayers.LonLat(5, 45),
//  zoom: 6
 });


 // create feature store, binding it to the vector layer
 store = new GeoExt.data.FeatureStore({
  layer: vecLayer,
  fields: [
// {name: 'name', type: 'string'},
// {name: 'elevation', type: 'float'}
   {name: 'con', type: 'string'}, // 郡、区名
   {name: 'cn2', type: 'string'}, // 市町村名
   {name: 'total', type: 'float'} // 人口
  ],
  proxy: new GeoExt.data.ProtocolProxy({
   protocol: new OpenLayers.Protocol.HTTP({
//  url: "data/summits.json",
    url: "./mapserver_gyoseikai.json", // gyoseikai JSON ファイル
    format: new OpenLayers.Format.GeoJSON(
    {
     'internalProjection': new OpenLayers.Projection("EPSG:2456"),
     'externalProjection': new OpenLayers.Projection("EPSG:4326")
    }
    )
   }),
  }),
  autoLoad: true
 });


 // create grid panel configured with feature store
 gridPanel = new Ext.grid.GridPanel({
  title: "Feature Grid",
  region: "east",
  store: store,
  width: 320,
  columns: [{
// header: "Name",
   header: "区、郡",
// width: 200,
   width: 100,
// dataIndex: "name"
   dataIndex: "con",
   sortable: true
  },{
// header: "Elevation",
   header: "市町村",
   width: 100,
// dataIndex: "elevation"
   dataIndex: "cn2"
  },{ // ここから「人口」を追加
   header: "人口",
   width: 100,
   dataIndex: "total"
  }],
  sm: new GeoExt.grid.FeatureSelectionModel() 
 });


 // create a panel and add the map panel and grid panel
 // inside it
 mainPanel = new Ext.Panel({
  renderTo: "mainpanel",
  layout: "border",
  height: 400,
  width: 920,
  items: [mapPanel, gridPanel]
 });
});

HTML ファイルを新規作成します。
「openlayersTokyoproj」を右クリックして新規 -> HTML ファイルをクリック。
「HTML ファイル」ウィンドウの「ファイル名（任意：geoext10_feature-grid.html）」に入力して「完了」ボタンをクリック。
「charset」を「utf-8」にします。
以前使用した OpenLayers.Layer.WMS レイヤの例を参考に以下のように HTML を作成します。
（geoext08_map-tool.html をコピーし feature-grid.js を追加し body タグ内を修正します。）


---
  <title>GeoExt10 Grid with Feature</title>
---
<!-- feature-grid.js 追加 -->
  <script type="text/javascript" src="./feature-grid.js"></script>
 </head>
 <body>
  <h1 id="title">GeoExt 10 - Grid with Feature</h1>
  <p id="shortdesc">
   Grid Panel configured with a GeoExt.data.FeatureStore
  </p>
  <p>This example shows an Ext grid loaded with features read from 
   a GeoJSON document (data/summits.json).Because the layer and 
   the store are bound to each other, the features loaded into the store
   are automatically added to the layer. A GeoExt feature selection model 
   is also used so that selecting rows in the grid selects features in the
   layer, and vice-versa.<p>
  <p>この例では、GeoJSONドキュメント（data/summits.json）から読み込んだ
    フィーチャを読み込んだ Ext グリッドを示しています。レイヤとストアは、お互いに
    バインドされているので、フィーチャはレイヤを自動的に追加されたストアにロードします。 
    GeoExt フィーチャ選択モデルは、レイヤ中のフィーチャを選択するグリッド内の行を
    選択するために、もしくはその逆に使用されます。</p>

  <div id="mainpanel"></div>

 </body>
</html>

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

ブログアーカイブ

自己紹介

2010年11月24日水曜日

GeoExt10 Grid with Feature - フィーチャデータのグリッド表示

0 件のコメント:

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

ブログ アーカイブ