Example サイト
http://www.geoext.org/examples.html
「Zoom Chooser」リンクをクリックすると GeoExt.data.ScaleStore with an Existing OpenLayers.Map が表示されます。
zoom-chooser.js. を参考にします。
説明を意訳すると、マップで有効なズームレベルをリスト表示する GeoExt.data.ScaleStore の使用方法を示します。
var mapPanel;
Ext.onReady(function() {
// 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()
],
allOverlays: true,
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 layer = new OpenLayers.Layer.WMS(
"Global Imagery",
"http://maps.opengeo.org/geowebcache/service/wms",
{layers: "bluemarble"}
);
*/
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'
})
map.addLayers([layer1, layer2]);
var scaleStore = new GeoExt.data.ScaleStore({map: map});
// 利用可能なズームレベルのキャッシュが含まれているストア
var zoomSelector = new Ext.form.ComboBox({
store: scaleStore,
emptyText: "Zoom Level",
tpl: '<tpl for="."><div class="x-combo-list-item">1 : {[parseInt(values.scale)]}</div></tpl>',
editable: false,
triggerAction: 'all', // needed so that the combo box doesn't filter by its current content
mode: 'local' // keep the combo box from forcing a lot of unneeded data refreshes
});
zoomSelector.on('select',
function(combo, record, index) {
map.zoomTo(record.data.level);
},
this
);
map.events.register('zoomend', this, function() {
var scale = scaleStore.queryBy(function(record){
return this.map.getZoom() == record.data.level;
});
if (scale.length > 0) {
scale = scale.items[0];
zoomSelector.setValue("1 : " + parseInt(scale.data.scale));
} else {
if (!zoomSelector.rendered) return;
zoomSelector.clearValue();
}
});
mapPanel = new GeoExt.MapPanel({
title: "GeoExt MapPanel",
renderTo: "mappanel",
height: 400,
width: 600,
map: map,
// center: new OpenLayers.LonLat(5, 45),
// zoom: 4,
bbar: [zoomSelector]
});
});
HTML ファイルを新規作成します。
「openlayersTokyoproj」 を右クリックして 新規 -> HTML ファイル をクリック。
「HTML ファイル」ウィンドウの「ファイル名（任意：geoext19_zoom-chooser.html）」に入力して「完了」ボタンをクリック。
「charset」を「utf-8」にします。
以下のように HTML を作成します。
geoext18_layeropacityslider.html をコピーし、外部 JavaScript 読み込みファイルを修正しマップのスタイルシートを修正し body タグ内にターゲット id を設定します。
---
<title>GeoExt19 Zoom Chooser</title>
---
<!-- zoom-chooser.js 追加 -->
<script type="text/javascript" src="./zoom-chooser.js"></script>
</head>
<body>
<h1 id="title">GeoExt 19 - Zoom Chooser</h1>
<p id="shortdesc">
GeoExt.data.ScaleStore with an Existing OpenLayers.Map
</p>
<p>This example demonstrates the use of a GeoExt.data.ScaleStore to list
the available zoom levels for a map.</p>
<p>この例では、マップで有効なズームレベルをリスト表示す GeoExt.data.ScaleStore
の使用方法を示します。</p>
<div id="mappanel"></div>
</body>
</html>
倍率 520423 より縮小（数値では大きく）すると地図が表示されません。
解像度が合わないためと思われます。
0 件のコメント:
コメントを投稿