<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta content="text/html;charset=ISO-8859-1" http-equiv="Content-Type">
<title></title>
</head>
<body bgcolor="#ffffff" text="#000000">
<div class="moz-text-html" lang="x-western"> Richard Duivenvoorde
wrote:
<blockquote cite="mid466F0F96.1080306@duif.net" type="cite">
<pre wrap="">Hi,
I'm using the DrawFeature control to let users define linestrings. I can
capture the doubleclick event (for ending the line) using
lineLayer.onFeatureInsert
But I cannot find a way to check something WHILE clicking/adding the
segments. Actually on the addition of every segment I want to be able to
count the number of segments, because I want to be sure the will be not
more then 20 segments in certain lines.
</pre>
</blockquote>
OpenLayers.Handler.Path has two callback "done" and "point". The
latter is called for every point added to the path while the user is
drawing on the map.<br>
Here is the "draw-feature.html" example from openlayers distribution
slightly modified to show you how attach your custom defined callback
handler<br>
(see the comment into javascript code)<br>
Regards,<br>
Saverio Rutigliano<br>
<br>
<br>
<tt><html xmlns=<a class="moz-txt-link-rfc2396E"
href="http://www.w3.org/1999/xhtml">"http://www.w3.org/1999/xhtml"</a>><br>
<head><br>
<style type="text/css"><br>
#map {<br>
width: 512px;<br>
height: 350px;<br>
border: 1px solid gray;<br>
}<br>
#controlToggle li {<br>
list-style: none;<br>
}<br>
p {<br>
width: 512px;<br>
}<br>
</style><br>
<script src="../lib/OpenLayers.js"></script><br>
<script type="text/javascript"><br>
<!--<br>
var map, drawControls;<br>
OpenLayers.Util.onImageLoadErrorColor = "transparent";<br>
function init(){<br>
map = new OpenLayers.Map('map');<br>
<br>
var wmsLayer = new OpenLayers.Layer.WMS( "OpenLayers WMS", <br>
<a class="moz-txt-link-rfc2396E"
href="http://labs.metacarta.com/wms/vmap0?">"http://labs.metacarta.com/wms/vmap0?"</a>,
{layers:
'basic'}); <br>
<br>
var pointLayer = new OpenLayers.Layer.Vector("Point Layer");<br>
var lineLayer = new OpenLayers.Layer.Vector("Line Layer");<br>
var polygonLayer = new OpenLayers.Layer.Vector("Polygon
Layer");<br>
<br>
map.addLayers([wmsLayer, pointLayer, lineLayer,
polygonLayer]);<br>
map.addControl(new OpenLayers.Control.LayerSwitcher());<br>
map.addControl(new OpenLayers.Control.MousePosition());<br>
<br>
var options = {handlerOptions: {freehand: true}};<br>
<br>
<font color="#ff0000">// HERE YOU SPECIFY THE ADDITIONAL callbacks
PROPERTY WITH CALLBACK HANDLER AVAILABLE FOR THE
OpenLayers.Handler.Path (i.e. done and point)<br>
var pathDrawFeatureOptions = {<br>
callbacks : {"done": doneHandler, "point":
pointHandler},<br>
handlerOptions: {freehand: true}}; </font><br>
<br>
drawControls = {<br>
point: new OpenLayers.Control.DrawFeature(pointLayer,<br>
OpenLayers.Handler.Point),<br>
<br>
line: new OpenLayers.Control.DrawFeature(lineLayer,<br>
OpenLayers.Handler.Path, <font
color="#ff0000">pathDrawFeatureOptions), // specify the custom
"pathDrawFeatureOptions"</font><br>
<br>
polygon: new
OpenLayers.Control.DrawFeature(polygonLayer,<br>
OpenLayers.Handler.Polygon, options)<br>
};<br>
<br>
for(var key in drawControls) {<br>
map.addControl(drawControls[key]);<br>
}<br>
<br>
map.setCenter(new OpenLayers.LonLat(0, 0), 3);<br>
<br>
document.getElementById('noneToggle').checked = true;<br>
}<br>
<br>
<font color="#ff0000">// HERE YOU SPECIFY THE CALLBACK HANDLERS:
doneHandler() CALLED WHEN USER FINISHES THE PATH AND pointHandler()
CALLED FOR EVERY POINT ADDED<br>
// BTW: console.log IS THE FIREBUG METHOD TO WRITE DIRECTILY TO THE
CONSOLE... JUST FOR DEBUG<br>
function doneHandler(lineGeom) {<br>
console.log("doneHandler:" +
lineGeom.getComponentsString());<br>
}<br>
var gPointCount = 0;<br>
function pointHandler(aPoint) { <br>
gPointCount++;<br>
console.log("pointHandler:point n." + gPointCount + " geom
= " + aPoint.toShortString());<br>
}</font><br>
<br>
function toggleControl(element) {<br>
for(key in drawControls) {<br>
var control = drawControls[key];<br>
if(element.value == key && element.checked) {<br>
control.activate();<br>
} else {<br>
control.deactivate();<br>
}<br>
}<br>
}<br>
// --><br>
</script><br>
</head><br>
<body onload="init()"><br>
<h1>OpenLayers Draw Feature Example</h1><br>
<div id="map"></div><br>
<ul id="controlToggle"><br>
<li><br>
<input type="radio" name="type" value="none"
id="noneToggle"<br>
onclick="toggleControl(this);" checked="checked"
/><br>
<label for="noneToggle">navigate</label><br>
</li><br>
<li><br>
<input type="radio" name="type" value="point"
id="pointToggle" onclick="toggleControl(this);" /><br>
<label for="pointToggle">draw point</label><br>
</li><br>
<li><br>
<input type="radio" name="type" value="line"
id="lineToggle" onclick="toggleControl(this);" /><br>
<label for="lineToggle">draw line</label><br>
</li><br>
<li><br>
<input type="radio" name="type" value="polygon"
id="polygonToggle" onclick="toggleControl(this);" /><br>
<label for="polygonToggle">draw polygon</label><br>
</li><br>
</ul><br>
<p>Feature digitizing is in freehand mode by default. In
freehand mode, the mouse is treated as a pen.<br>
Drawing begins on mouse down, continues with every mouse move, and
ends with mouse up.</p><br>
<p>To turn freehand mode off, hold down the shift key while
digitizing. With freehand mode off, one<br>
vertex is added with each click and double-clicks finish drawing.
Freehand mode can be toggled on and off<br>
at any time while drawing.</p><br>
<br>
</body><br>
</html><br>
</tt><br>
</div>
</body>
</html>