OpenLayers14 に続いて次のように追加します。
---
map.addLayers([layer1, layer3, layer4, layer5, layer6, layer7, layer8]);
var panel = new OpenLayers.Control.NavToolbar(); //追加
map.addControl(panel); //追加
map.zoomToMaxExtent();
}
</script>
---
地図上にパンとズームパネルが表示されます。
それぞれをクリックした後にポインタを地図上に持っていくと、ポインタの形が変わってパンやズームの操作ができます。
Navigation Toolbar: Outside the Map（navtoolbar-outsidemap.html）を参考にしてパネルを地図の外に配置します。
OpenLayers14 に続いて "var panel = ..." の OpenLayers.Control.NavToolbar の引数を次のように修正します。
---
var panel = new OpenLayers.Control.NavToolbar({'div':OpenLayers.Util.getElement('paneldiv')});
---
<body> タグ内に次のように <div> タグを追加します。
---
<div id="map"></div>
<!-- ここを追加 -->
<div id="paneldiv" class="olControlNavToolbar"></div>
---
地図の外ににパンとズームパネルが表示されます。
パネルが地図から離れたところに表示されます。
theme/default/style.css の設定で .olControlNavToolbar の top: 300px; を top: 10px; にするとパネルが近づきます。
---
.olControlNavToolbar div {
display:block;
width: 28px;
height: 28px;
top: 10px; /* 修正 */
left: 6px;
position: relative;
}
---
0 件のコメント:
コメントを投稿