examples フォルダにある「OpenLayers Draw Feature Example（draw-feature.html）」を参考に マウスでポリゴン（多角形）を描いてみます。
最初に、HTML ファイルを準備します。
（Eclipse 4.2 Juno の調子が良くないので、4.3 Kepler standerd をインストールしました。少し手順が変わります。）
d 「App Exploler」ペインの「ol014-nippon_bmi_akiruno_pgis.html」をダブルクリックして開きます。
g 次のように「draw-feature.html」の内容の一部をコピーして「ol014-nippon_bmi_akiruno_pgis.html」に貼り付け、修正します。
（29-2 で追加したところは削除します。）
--- <link rel="stylesheet" href="OpenLayers-2.13.1/theme/default/style.css" type="text/css"> <link rel="stylesheet" href="OpenLayers-2.13.1/examples/style.css" type="text/css">
<!-- ここからスタイルを追加 -->
<style type="text/css">
/* リスト表示のときマークがつかないようにする */
#controlToggle li {
list-style: none;
}
p {
width: 512px;
}
/* avoid pink tiles */
/* 画像が表示できない時にピンク色のタイルを表示しないようにする */
.olImageLoadError {
background-color: transparent !important;
}
</style>
<title>WMS Example BMI Akiruno PGIS2</title>---
<script type="text/javascript"> var map, layer0, layer1, layer2, layer3, layer4, drawControls; // "drawControls" 追加---
// わかりやすいようにポリゴンだけ追加
var polygonLayer = new OpenLayers.Layer.Vector("Polygon Layer");
map.addLayers([layer0, layer3, layer1, layer2, layer4, polygonLayer]); // "polygonLayer" 追加
// ここから追加
drawControls = {
polygon: new OpenLayers.Control.DrawFeature(polygonLayer, OpenLayers.Handler.Polygon)
};
for(var key in drawControls) {
map.addControl(drawControls[key]);
}
document.getElementById('noneToggle').checked = true;
// ここまで
map.addControl(new OpenLayers.Control.LayerSwitcher()); map.addControl(new OpenLayers.Control.MousePosition()); map.zoomToMaxExtent();
} // End of "function init()"
// ここから追加
function toggleControl(element) {
for(key in drawControls) {
var control = drawControls[key];
if(element.value == key && element.checked) {
control.activate();
} else {
control.deactivate();
}
}
}
function allowPan(element) {
var stop = !element.checked;
for(var key in drawControls) {
drawControls[key].handler.stopDown = stop;
drawControls[key].handler.stopUp = stop;
}
}
// ここまで
</script> </head> <body onload="init()">---
<!-- ここから追加 --> <ul id="controlToggle"> <li> <input type="radio" name="type" value="none" id="noneToggle" onclick="toggleControl(this);" checked="checked" /> <label for="noneToggle">navigate</label> </li> <li> <input type="radio" name="type" value="polygon" id="polygonToggle" onclick="toggleControl(this);" /> <label for="polygonToggle">draw polygon</label> </li> </ul> <!-- ここまで -->
</body> </html>
0 件のコメント:
コメントを投稿