Example サイト
http://www.geoext.org/examples.html
「Zoom Slider」リンクをクリックすると GeoExt.ZoomSlider が表示されます。
zoomslider.js. を参考にします。
説明を意訳すると、Ext.Slider を使用してマップスケールの制御をする方法を示します。
var panel, slider;
Ext.onReady(function() {
// create a map panel with an embedded slider
// 東京都用マップ設定
var map = new OpenLayers.Map('map', {
controls: [
// new OpenLayers.Control.PanZoom(),
new OpenLayers.Control.Navigation(),
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),
minResolution: 'auto',
minExtent: new OpenLayers.Bounds(-27900,105400,-18500,110400),
units: 'meters',
displayProjection: new OpenLayers.Projection("EPSG:4326")
});
panel = new GeoExt.MapPanel({
title: "Map",
renderTo: "map-container",
height: 300,
width: 400,
/*
map: {
controls: [new OpenLayers.Control.Navigation()]
},
*/
map: map,
/*
layers: [new OpenLayers.Layer.WMS(
"Global Imagery",
"http://maps.opengeo.org/geowebcache/service/wms",
{layers: "bluemarble"}
)],
extent: [-5, 35, 15, 55],
*/
layers: [
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'
})
],
items: [{
xtype: "gx_zoomslider",
vertical: true,
height: 100,
x: 10,
y: 20,
plugins: new GeoExt.ZoomSliderTip()
}]
});
// create a separate slider bound to the map but displayed elsewhere
slider = new GeoExt.ZoomSlider({
map: panel.map,
aggressive: true,
width: 200,
plugins: new GeoExt.ZoomSliderTip({
template: "<div>Zoom Level: {zoom}</div>"
}),
renderTo: document.body
});
});
HTML ファイルを新規作成します。
「openlayersTokyoproj」 を右クリックして 新規 -> HTML ファイル をクリック。
「HTML ファイル」ウィンドウの「ファイル名（任意：geoext20_zoomslider.html）」に入力して「完了」ボタンをクリック。
「charset」を「utf-8」にします。
以下のように HTML を作成します。
geoext19_zoom-chooser.html をコピーし、外部 JavaScript 読み込みファイルを修正し body タグ内にターゲット id を設定します。
---
<title>GeoExt20 Zoom Slider</title>
---
<!-- zoomslider.js 追加 -->
<script type="text/javascript" src="./zoomslider.js"></script>
</head>
<body>
<h1 id="title">GeoExt 20 - Zoom Slider</h1>
<p id="shortdesc">
GeoExt.ZoomSlider
</p>
<p>The ZoomSlider allows control of the map scale using an Ext.Slider.
It is also possible to add a special tooltip plugin, ZoomSliderTip,
which will show the zoom level, scale and resolution while dragging
the slider (the content is configurable).</p>
<p>ZoomSlider は Ext.Slider を使用してマップスケールの制御をすることができます。
スライダをドラッグしながらレベル、スケールと解像度を表示（内容は変更可能）する、
特殊なツールチッププラグイン ZoomSliderTip を追加することも可能です。</p>
<div id="map-container"></div>
</body>
</html>
倍率が自動的に１０段階になり高倍率になると拡大しすぎるので、最小範囲を設定してみました。
最小範囲を最大範囲の１０分の１にしてみましたが、倍率は３段階になりました。
0 件のコメント:
コメントを投稿