[OpenLayers-Users] any click events in Control.DrawFeature while drawing polygon

Tue, 12 Jun 2007 16:07:18 -0700

Richard Duivenvoorde wrote: 
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.
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.
Here is the "draw-feature.html" example from openlayers distribution slightly modified to show you how attach your custom defined callback handler
(see the comment into _javascript_ code)
Regards,
Saverio Rutigliano


<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <style type="text/css">
        #map {
            width: 512px;
            height: 350px;
            border: 1px solid gray;
        }
        #controlToggle li {
            list-style: none;
        }
        p {
            width: 512px;
        }
    </style>
    <script src=""></script>
    <script type="text/_javascript_">
        <!--
        var map, drawControls;
        OpenLayers.Util.;
        function init(){
            map = new OpenLayers.Map('map');
           
            var wmsLayer = new OpenLayers.Layer.WMS( "OpenLayers WMS",
                "http://labs.metacarta.com/wms/vmap0?", {layers: 'basic'});

            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.addLayers([wmsLayer, pointLayer, lineLayer, polygonLayer]);
            map.addControl(new OpenLayers.Control.LayerSwitcher());
            map.addControl(new OpenLayers.Control.MousePosition());
           
            var options = {handlerOptions: {freehand: true}};
           
// HERE YOU SPECIFY THE ADDITIONAL callbacks PROPERTY WITH CALLBACK HANDLER AVAILABLE FOR THE OpenLayers.Handler.Path (i.e. done and point)
            var pathDrawFeatureOptions = {
                        callbacks : {"done": doneHandler, "point": pointHandler},
                        handlerOptions: {freehand: true}};           
                       
            drawControls = {
                point: new OpenLayers.Control.DrawFeature(pointLayer,
                            OpenLayers.Handler.Point),
                           
                line: new OpenLayers.Control.DrawFeature(lineLayer,
                            OpenLayers.Handler.Path, pathDrawFeatureOptions), // specify the custom "pathDrawFeatureOptions"
                           
                polygon: new OpenLayers.Control.DrawFeature(polygonLayer,
                            OpenLayers.Handler.Polygon, options)
            };
           
            for(var key in drawControls) {
                map.addControl(drawControls[key]);
            }
           
            map.setCenter(new OpenLayers.LonLat(0, 0), 3);
           
            document.getElementById('noneToggle').checked = true;
        }
       
// HERE YOU SPECIFY THE CALLBACK HANDLERS: doneHandler()  CALLED WHEN USER FINISHES THE PATH AND pointHandler()  CALLED FOR EVERY POINT ADDED
// BTW:  console.log IS THE FIREBUG METHOD TO WRITE DIRECTILY TO THE CONSOLE... JUST FOR DEBUG
        function doneHandler(lineGeom) {
            console.log("doneHandler:" + lineGeom.getComponentsString());
        }
        var gPointCount = 0;
        function pointHandler(aPoint) {         
            gPointCount++;
            console.log("pointHandler:point n." + gPointCount + " geom = " + aPoint.toShortString());
        }
       
        function toggleControl(element) {
            for(key in drawControls) {
                var control = drawControls[key];
                if(element.value == key && element.checked) {
                    control.activate();
                } else {
                    control.deactivate();
                }
            }
        }
        // -->
    </script>
  </head>
  <body >
    <h1>OpenLayers Draw Feature Example</h1>
    <div id="map"></div>
    <ul id="controlToggle">
        <li>
            <input type="radio" name="type" value="none" id="noneToggle"
                   checked="checked" />
            <label for="">navigate</label>
        </li>
        <li>
            <input type="radio" name="type" value="point" id="pointToggle" />
            <label for="">draw point</label>
        </li>
        <li>
            <input type="radio" name="type" value="line" id="lineToggle" />
            <label for="">draw line</label>
        </li>
        <li>
            <input type="radio" name="type" value="polygon" id="polygonToggle" />
            <label for="">draw polygon</label>
        </li>
    </ul>
    <p>Feature digitizing is in freehand mode by default.  In freehand mode, the mouse is treated as a pen.
    Drawing begins on mouse down, continues with every mouse move, and ends with mouse up.</p>
    <p>To turn freehand mode off, hold down the shift key while digitizing.  With freehand mode off, one
    vertex is added with each click and double-clicks finish drawing.  Freehand mode can be toggled on and off
    at any time while drawing.</p>
       
  </body>
</html>

_______________________________________________
Users mailing list
[email protected]
http://openlayers.org/mailman/listinfo/users

Reply via email to