地図の表示部分のスクリプトに OpenLayers.Control.LayerSwitcher() を次のように追加します。
---
map.addLayers([layer1, layer3, layer4, layer5, layer6, layer7, layer8]);
var panel = new OpenLayers.Control.NavToolbar({'div':OpenLayers.Util.getElement('paneldiv')});
map.addControl(panel);
map.zoomToMaxExtent();
map.setOptions({restrictedExtent: extent});
var click = new OpenLayers.Control.Click();
map.addControl(click);
click.activate();
map.events.register("moveend", null, displayZoom);
map.fractionalZoom = input.checked;
map.zoomTo(Math.round(map.zoom));
nav = new OpenLayers.Control.Navigation({'zoomWheelEnabled': false});
map.addControl(nav);
map.addControl(new OpenLayers.Control.LayerSwitcher()); //追加
}
function displayZoom() {
document.getElementById("zoom").innerHTML = map.zoom.toFixed(4);
}
</script>
---
Layer Switcher を地図の外には位置するには、new OpenLayers.Control.LayerSwitcher() を次のように修正して、<body> タグ内に Layer Switcher 用に次のように <div> タグを追加します。
---
map.addControl(new OpenLayers.Control.LayerSwitcher({'div':OpenLayers.Util.getElement('layerswitcher')})); //修正
---
---
<!-- ここを追加 Layer Switcher の表示-->
<div id="layerswitcher"></div>
<div id="map"></div>
<div id="paneldiv" class="olControlNavToolbar"></div>
<div style="margin-left:50px;">zoom: <span id="zoom"></span></div>
<div style="margin-left:50px;"><a href="#" onclick="nav.enableZoomWheel();return false">Turn on Wheel Zoom</a> | <a href="#" onclick="nav.disableZoomWheel(); return false;">Turn off Wheel Zoom</a></div>
---
Layer Switcher が地図の下に配置されるので注意してください。
地図内に配置される用に元に戻しておきます。
0 件のコメント:
コメントを投稿