Example サイト
http://www.geoext.org/examples.html
「Permalink」リンクをクリックすると Permalink Example が表示されます。
permalink.js. を参考にします。
説明を意訳すると、現在のマップの位置と表示されているレイヤーと共にパーマリンクを生成する方法を示します。
var permalinkProvider;
Ext.onReady(function() {
// set a permalink provider
permalinkProvider = new GeoExt.state.PermalinkProvider({encodeType: false});
Ext.state.Manager.setProvider(permalinkProvider);
// var map = new OpenLayers.Map();
var map = new OpenLayers.Map('map', { // 東京マップ用
projection: new OpenLayers.Projection("EPSG:2456"),
maxResolution: 'auto',
maxExtent: new OpenLayers.Bounds(-279000,1054000,-185000,1104000),
units: 'meters',
displayProjection: new OpenLayers.Projection("EPSG:4326")
});
map.addLayers([
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'
}),
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'
})
])
map.addControl(new OpenLayers.Control.LayerSwitcher());
map.addControl(new OpenLayers.Control.MousePosition());
map.addControl(new OpenLayers.Control.ScaleLine());
var mapPanel = new GeoExt.MapPanel({
title: "GeoExt MapPanel",
renderTo: "mappanel",
height: 400,
width: 600,
map: map,
// center: new OpenLayers.LonLat(5, 45),
// zoom: 4,
stateId: "map",
prettyStateKeys: true
});
// update link when state chnages
var onStatechange = function(provider) {
var l = provider.getLink();
Ext.get("permalink").update("<a href=" + l + ">" + l + "</a>");
};
permalinkProvider.on({statechange: onStatechange});
});
HTML ファイルを新規作成します。
「openlayersTokyoproj」 を右クリックして 新規 -> HTML ファイル をクリック。
「HTML ファイル」ウィンドウの「ファイル名（任意：geoext15_permalink.html）」に入力して「完了」ボタンをクリック。
「charset」を「utf-8」にします。
以下のように HTML を作成します。
geoext14_wms-tree.html をコピーし、外部 JavaScript 読み込みファイルを修正し body タグ内に mappanel と permalink を設定します。
---
<title>GeoExt15 Permalink</title>
---
<!-- permalink.js 追加 -->
<script type="text/javascript" src="./permalink.js"></script>
</head>
<body>
<div id="desc">
<h1 id="title">GeoExt 15 - Permalink</h1>
<p id="shortdesc">
Permalink Example
</p>
<p>This example shows how to generate permalinks with the current map
position and visible layers.</p>
<p>この例では、現在のマップの位置と表示されているレイヤーと共にパーマリンクを
生成する方法を示します。</p>
<div id="mappanel"></div>
<h2>Permalink:</h2>
<div id="permalink"></div>
</div>
</body>
</html>
地図をパンやズームなどの操作をすると Permalink が表示されます。
0 件のコメント:
コメントを投稿