2009年3月9日月曜日

OpenLayers 17j 描画ツールバー表示

Editing Toolbar Example(editingtoolbar.html) ツールバー表示を参考に描画ツールバーを設定します。

次のコードを追加します。

---
var panel = new OpenLayers.Control.Panel({
div: document.getElementById("panel")
});
panel.addControls([nav.next, nav.previous]);
map.addControl(panel);

// ここから追加
vlayer = new OpenLayers.Layer.Vector("Editable");
map.addLayer(vlayer);
map.addControl(new OpenLayers.Control.EditingToolbar(vlayer));
// ここまで
---


OpenLayers EditingToolbar Outside Viewport(editingtoolbar-outside.html) ツールバーを地図の外に配置を参考に描画ツールバーを設定します。

次のコードを追加します。

---
var panel = new OpenLayers.Control.Panel({
div: document.getElementById("panel")
});
panel.addControls([nav.next, nav.previous]);
map.addControl(panel);

// ここから追加
vlayer = new OpenLayers.Layer.Vector("Editable");
map.addLayer(vlayer);
var container = document.getElementById("edpanel");
var edpanel = new OpenLayers.Control.EditingToolbar(
vlayer, {div: container}
);
map.addControl(edpanel);
// ここまで
---
<body onload="init()">
<h1 id="title">Drawing Vector Feature9</h1>
<div id="layerswitcher" style="position:absolute; z-index:1;"></div>
<div id="map"></div>
<div id="paneldiv" class="olControlNavToolbar"></div>
<!-- ここを追加 -->
<div id="edpanel" class="olControlEditingToolbar"></div><br />
<!-- ここまで -->
---

theme/default/style.css の .olControlEditingToolbar の内容を次のように修正します。

.olControlEditingToolbar {
/* float:right; 削除 */
right: 0px;
height: 30px;
width: 200px;
}

0 件のコメント: