最初に、ポイントを描画できるようにしてみます。
次のコードを追加します。
---
var drawControls;
OpenLayers.Util.onImageLoadErrorColor = "transparent";
//The color tiles with load errors will turn.
function init(){
---
var pointLayer = new OpenLayers.Layer.Vector("Point Layer");
map.addLayer(pointLayer);
// var options = {handlerOptions: {freehand: true}};
drawControls = {
point: new OpenLayers.Control.DrawFeature(pointLayer,OpenLayers.Handler.Point)
};
for(var key in drawControls) {
map.addControl(drawControls[key]);
}
document.getElementById('noneToggle').checked = true;
} //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();
}
}
}
</script>
<body init()>
<h1 id="title">Drawing Vector Feature2</h1>
<div id="layerswitcher" style="position:absolute; z-index:1;"></div>
<div id="map"></div>
<div id="paneldiv" class="olControlNavToolbar"></div>
<div id="panel" style="margin-left:50px;"></div><br />
<div id="coords" style="margin-left:50px;"></div>
<div style="margin-left:50px;">Moving your mouse to the upper left corner of this map should return 'x=0,y=0'</div>
<div style="margin-left:50px;">zoom: <span id="zoom"></span></div>
// ここから追加
<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="point" id="pointToggle" onclick="toggleControl(this);" />
<label for="pointToggle">draw point</label>
</li>
</ul>
// ここまで
---
"draw point" のラジオボタンをクリックしてチェックし、地図上をクリックするとポイントが描画されます。
次に、ラインとポリゴンが描画できるようにします。
次のようにコードを追加します。
---
var pointLayer = new OpenLayers.Layer.Vector("Point Layer");
var lineLayer = new OpenLayers.Layer.Vector("Line Layer"); //ここを追加
var polygonLayer = new OpenLayers.Layer.Vector("Polygon Layer"); //ここを追加
// map.addLayer(pointLayer);
map.addLayers([pointLayer, lineLayer, polygonLayer]); //ここを追加
var options = {handlerOptions: {freehand: true}}; //ここを追加 フリーハンドで描画
drawControls = {
point: new OpenLayers.Control.DrawFeature(pointLayer,OpenLayers.Handler.Point),
line: new OpenLayers.Control.DrawFeature(lineLayer,OpenLayers.Handler.Path, options), //ここを追加
polygon: new OpenLayers.Control.DrawFeature(polygonLayer,OpenLayers.Handler.Polygon, options) //ここを追加
};
---
<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="point" id="pointToggle" onclick="toggleControl(this);" />
<label for="pointToggle">draw point</label>
</li>
// ここから追加
<li>
<input type="radio" name="type" value="line" id="lineToggle" onclick="toggleControl(this);" />
<label for="lineToggle">draw line</label>
</li>
<li>
<input type="radio" name="type" value="polygon" id="polygonToggle" onclick="toggleControl(this);" />
<label for="polygonToggle">draw polygon</label>
</li>
// ここまで
</ul>
---
ラインとポリゴンはドラッグしてフリーハンドで描画されます。
0 件のコメント:
コメントを投稿