を参考に、描画した図をドラッグできるようにします。
次のようにコードを追加、修正します。
openlayers17a、openlayers17bで追加・修正したコードは削除してください。
---
/* ここを削除
var pointLayer = new OpenLayers.Layer.Vector("Point Layer");
var lineLayer = new OpenLayers.Layer.Vector("Line Layer");
var polygonLayer = new OpenLayers.Layer.Vector("Polygon Layer");
*/
vectors = new OpenLayers.Layer.Vector("Vector Layer"); //ここを追加
// map.addLayers([pointLayer, lineLayer, polygonLayer]);
map.addLayer(vectors); //ここを追加
// var options = {handlerOptions: {freehand: true}};
drawControls = {
// ここから修正
point: new OpenLayers.Control.DrawFeature(vectors,OpenLayers.Handler.Point),
line: new OpenLayers.Control.DrawFeature(vectors,OpenLayers.Handler.Path),
polygon: new OpenLayers.Control.DrawFeature(vectors,OpenLayers.Handler.Polygon),
// ここまで
drag: new OpenLayers.Control.DragFeature(vectors) //ここを追加
};
---
<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>
// ここから追加
<li>
<input type="radio" name="type" value="drag" id="dragToggle"
onclick="toggleControl(this);" />
<label for="dragToggle">drag feature</label>
</li>
// ここまで
</ul>
---
図のように "draw polygon" をクリックして選択し、地図上をクリックして図を描画します。
最後はダブルクリックで終了。
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhENiTeE07gl3eYcoDPd39d-A6IWHiuWlvXjfxnOKzfxbWrf1dNwcLi3pwWKOm8pHxjX2MtP5kmXFvoccKABjqNqKytonJB0uDgpEd4v2MQWfn-8aBErFMkOQy19A3FOI5dmQnQ4eJJnNAt/s320/openlayers17d_02_small.png)
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi9sNvqJDbJODJtjeiqwn-yiDnflHIVJM9sQqmnK4Osua7VZTXlOYmP5Xx65U25mI0AG821-i3MUNSnRyeM5-YCscblPvZKgF_f3cm8HF8jZTJB1_CFrvrXM7N0avnBRluvG2nrb44ngF9P/s320/openlayers17d_01_small.png)
次に "drag feature" をクリックして選択し、描画した図をドラッグして移動します。
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZIxGsWKx03EdAnJ6hNENVaym46foFGXpD4PX-GsRu-moN5HlTULeKtBCTIhCJcFOAgc2ZZzNWzniMR_E1gy1_NZWWSfhuh7q7clovVcSCZifw0Nec6ruRGfEG5e9evmuD-qxnEuGzwNvW/s320/openlayers17d_04_small.png)
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgEKnet5cgJy4F_MzKAoFmZq4D5zPvjd1dvKIc3s5ZHgdeHDUL7h5jDxdCALe0FCFtgIHBiReZuVUCsdFaKaP5dAKEGVvg9SJqzTvTyMvebppPZhQRviPu80bHblcTlZozlFNJmVeD1YCQX/s320/openlayers17d_03_small.png)
0 件のコメント:
コメントを投稿