Example サイト
http://www.geoext.org/examples.html
「WMS Capabilities Store」リンクをクリックすると WMS Capabilities Example が表示されます。
wms-capabilities.js. を参考にします。
説明を意訳すると、WMS capabilities ドキュメントからデータでグリッドを読み込む方法を示します。
GeoServer の Stores 設定で東京に関するレイヤだけ有効にして WMS Capabilities のデータを次のコマンドで取得します。
$ wget -O geoserver_wms_gc.xml "http://localhost:8080/geoserver/wms?&request=GetCapabilities&version=1.1.1&service=WMS"
geoserver_wms_gc.xml を Eclipse にインポートします。
var store;
Ext.onReady(function() {
// create a new WMS capabilities store
// リモートの WMS レイヤデータストアを簡単に作成
store = new GeoExt.data.WMSCapabilitiesStore({
// url: "data/wmscap.xml"
url: "./geoserver_wms_gc.xml"
});
// load the store with records derived from the doc at the above url
store.load();
// create a grid to display records from the store
var grid = new Ext.grid.GridPanel({
title: "WMS Capabilities",
store: store,
columns: [
{header: "Title", dataIndex: "title", sortable: true},
{header: "Name", dataIndex: "name", sortable: true},
{header: "Queryable", dataIndex: "queryable", sortable: true, width: 70},
{id: "description", header: "Description", dataIndex: "abstract"}
],
autoExpandColumn: "description",
renderTo: "capgrid",
height: 300,
width: 650,
listeners: {
rowdblclick: mapPreview
}
});
function mapPreview(grid, index) { // レイヤ表示
var record = grid.getStore().getAt(index);
var layer = record.getLayer().clone();
var win = new Ext.Window({
title: "Preview: " + record.get("title"),
width: 512,
height: 256,
layout: "fit",
items: [{
xtype: "gx_mappanel",
layers: [layer],
extent: record.get("llbbox")
}]
});
win.show();
}
});
HTML ファイルを新規作成します。
「openlayersTokyoproj」 を右クリックして 新規 -> HTML ファイル をクリック。
「HTML ファイル」ウィンドウの「ファイル名（任意：geoext13_wms-capabilities.html）」に入力して「完了」ボタンをクリック。
「charset」を「utf-8」にします。
以下のように HTML を作成します。
geoext12_attributes.html をコピーし、外部 JavaScript 読み込みファイルを修正し body タグ内に <div id="capgrid"></div> を設定します。
---
<title>GeoExt13 WMS Capabilities Store</title>
---
<!-- wms-capabilities.js 追加 -->
<script type="text/javascript" src="./wms-capabilities.js"></script>
</head>
<body>
<h1 id="title">GeoExt 13 - WMS Capabilities Store</h1>
<p id="shortdesc">
WMS Capabilities Example
</p>
<p>This example shows how to load a grid with data from a WMS capabilities document.
You can double-click on a row to see a map preview of the layer.</p>
<p>この例では、WMS capabilities ドキュメントからのデータのグリッドを読み込む方法を示しています。
レイヤのマップのプレビューを表示するには、行をダブルクリックします。</p>
<div id="capgrid"></div>
</body>
</html>
MapServer の tokyo_pf_pgis.map の WMS Capabilities のデータを次のコマンドで取得します。
$ wget -O mapserver_gyoseikai_wmsgc100.xml "http://localhost/cgi-bin/mapserv?map=/home/nob61/mapfile/tokyo_pf_pgis.map&request=GetCapabilities&version=1.0.0&service=WMS"
WMS のバージョンが 1.0.0 ではパネルに何も表示されません。
次にバージョン 1.1.1 の WMS Capabilities を取得します。
$ wget -O mapserver_gyoseikai_wmsgc111.xml "http://localhost/cgi-bin/mapserv?map=/home/nob61/mapfile/tokyo_pf_pgis.map&request=GetCapabilities&version=1.1.1&service=WMS"
マップパネルは表示されますが、マップが表示されないレイヤがありました。
2 件のコメント:
hajime
おそらく、リクエストのURLでimage/png やepsg:4326の/ : といった記号がうまくエンコーディングされていません。
Hajime Tanakaさん、ありがとうございます。
MapServerのデータの記号のエンコーディングがうまくできていないということですね。
いくつかのPCで試しているので、後でやってみます。（データが飛んだPCでありませんように）
全くの趣味でやっているので、不完全なところがあります。このように教えていただくとありがたいです。
コメントを投稿