[OpenLayers-Users] ModifyControl Select/Delete Vertex?

Alexandre Dubé adube at mapgears.com
Fri Mar 1 06:15:02 PST 2013


Hi Rob,

   I look and haven't found what's causing the issue, but here's some 
updates anyway:

   You shouldn't set the standalone property after the instantiation of 
the modify control.  If you look at the code, that property is used in 
the initialize function.

   I noticed that the DragControl already has a 'click' callback method, 
so the way I suggested currently overrides it completely. Making the 
following change makes the chain continue:

     click: function(feature) {
         this.layer.events.triggerEvent(
             "vertexclicked", {feature: feature}
         )
         // call the dragControl original click callback method
         control.dragControl.clickFeature.apply(
             control.dragControl, [feature]);
     }

   Even with the above fix, I notice that the callback method is never 
triggered. The feature handler is still active though. I don't know 
what's wrong. This may be an issue in OpenLayers.

Regards,

Alexandre


On 13-03-01 07:26 AM, Robert Smart wrote:
> Hi,
> I’ve made a start on modifying the code so it does what i need. 
> However I need it work in standalone mode, and it seems to exhibit 
> some odd behaviour.
> If I start editing and selecting points it all works fine, but if I 
> click outside of the polygon (it remains editable since it is in 
> standalone mode)when I go back to the polygon the click event no 
> longer fires, so I can no longer select a vertex.
> Any ideas what might be causing this?
> I’ve pasted the page code below. I have not changed the 
> modifyFeatureVertexSelection code at all except putting it in a 
> seperate js file.
> Thanks,
> Rob Smart
> <div id="map" style="width:500px; height:500px; " ></div>
>       <input id="Button4" type="button" value="Delete Selected Vertex" 
> onclick="deleteSelectedVertex()" />
>    <script type="text/javascript">
>    var map, vectors, modify, feature, selectedVertex;
>    $(document).ready(function () {
>        map = new OpenLayers.Map('map');
>        var wms = new OpenLayers.Layer.WMS("OpenLayers WMS",
>        "http://vmap0.tiles.osgeo.org/wms/vmap0?" 
> <http://vmap0.tiles.osgeo.org/wms/vmap0?%22>, { layers: 'basic' });
> OpenLayers.Feature.Vector.style['default']['strokeWidth'] = '2';
>        // allow testing of specific renderers via "?renderer=Canvas", etc
>        var renderer = 
> OpenLayers.Util.getParameters(window.location.href).renderer;
>        renderer = (renderer) ? [renderer] : 
> OpenLayers.Layer.Vector.prototype.renderers;
>        var style = $.extend(true, {}, 
> OpenLayers.Feature.Vector.style['default']); // get a copy of the 
> default style
>        style.fillColor = "Red";
>        style.fillOpacity = 1;
>        var myStyleMap = new OpenLayers.StyleMap({
>            "temporary": new OpenLayers.Style(style)
>        });
>        vectors = new OpenLayers.Layer.Vector("Vector Layer", {
>            renderers: renderer, styleMap: myStyleMap
>        });
>        map.addLayers([wms, vectors]);
>        feature = new OpenLayers.Feature.Vector(
>        OpenLayers.Geometry.Polygon.createRegularPolygon(
>            new OpenLayers.Geometry.Point(0, 0),
>            10,
>            5
>        ),
>        {}
>    );
>        vectors.addFeatures([feature]);
>        if (console && console.log) {
>            // register a callback function to our new "vertexclicked" 
> event
>            vectors.events.on({ "vertexclicked": function report(event) {
>                console.log(event.type, event.feature.id);
>                myVertices = feature.geometry.getVertices();
>                realVertex = false;
>                //TEST TO SEE IF ITS A REAL VERTEX
>                for (var i = 0; i < myVertices.length; i++) {
>                    //console.log(myVertices[i]);
>                    if (myVertices[i] == event.feature.geometry) { 
> realVertex = true; }
>                    //Do something
>                }
>                if (realVertex == false) { 
> console.log("virtualVertex"); return; }
>                console.log(event.feature)
>                if (selectedVertex == null) {
>                    selectedVertex = event.feature;
>                    vectors.drawFeature(event.feature, "temporary");
>                    return;
>                }
>                if (event.feature == selectedVertex) {
>                    vectors.drawFeature(event.feature, "default");
>                    selectedVertex = null;
>                    return;
>                }
>                if (event.feature != selectedVertex) {
>                    vectors.drawFeature(selectedVertex, "default");
>                    selectedVertex = event.feature;
>                    vectors.drawFeature(event.feature, "temporary");
>                }
>                // change the color - sure !
>                //                // do more - popup to delete the vertex
>                //                c = [];
>                //                c.push("Selected feature id: ");
>                // c.push(vectors.selectedFeatures[0].id);
>                //                c.push("\nSelected vertex id: ");
>                // c.push(event.feature.id);
>                //                c.push("\n\nRemove this vertex?")
>                //                var removeVertex = confirm(c.join(""));
>                //                if (removeVertex) {
>                //                    // I noticed that the 
> ModifyFeature control doesn't have
>                //                    // a method to manage a vertices 
> removal, it's only done inside
>                //                    // the 'handleKeypress' callback 
> method... but it doesn't
>                //                    // prevent us from using it :) so 
> we'll emulate a 'delete' key
>                //                    // pressed
>                // modify.dragControl.feature = event.feature;
>                // modify.handleKeypress({ keyCode: 46 });
>                //                } else {
>                //                    // simply redraw the vertex back 
> to its default style
>                // vectors.drawFeature(event.feature, "default");
>                //                }
>            }
>            });
>        }
>        modify = new OpenLayers.Control.ModifyFeatureVertexClick(vectors);
>        modify.standalone = true;
>        map.addControls([modify]);
>        modify.activate();
>        map.setCenter(new OpenLayers.LonLat(0, 0), 3);
>        // select with a delay to let the map render and apply the 
> default style
>        // to the feature, which emulates a selection that would be 
> made using a
>        // click on the feature
>        setTimeout(function () {
>            modify.selectControl.select(feature);
>        });
>    });
>    function deleteSelectedVertex() {
>        if (selectedVertex != null) {
>        modify.dragControl.feature = selectedVertex;
>        modify.handleKeypress({ keyCode: 46 });
>        //This works for some of the issues but not all of the them
>        //vectors.destroyFeatures([selectedVertex])
>        modify.dragControl.feature = null;
>        selectedVertex = null;
>        modify.selectControl.select(feature);
>    }
>    }
>    </script>
> *From:* Alexandre Dubé <mailto:adube at mapgears.com>
> *Sent:* Thursday, February 28, 2013 7:05 PM
> *To:* Robert Smart <mailto:r_n_smart at hotmail.com>
> *Cc:* openlayers-users at lists.osgeo.org 
> <mailto:openlayers-users at lists.osgeo.org>
> *Subject:* Re: [OpenLayers-Users] ModifyControl Select/Delete Vertex?
> Hi Robert,
>
>   Yep, all the things you ask are quite possible but not without 
> getting your hand a bit dirty :)  You can do all that by programming.  
> Extend the ModifyControl more to make it do what you want.  Don't be 
> afraid to look at the source code to see what the components do.  
> You'll get more knowledge that way.
>
>   I'd be happy to see the end result.  Best of luck to you.
>
> Kind regards,
>
> Alexandre
>
>
>
> On 13-02-28 12:36 PM, Robert Smart wrote:
>
>> This there a way to define a style for the selected vertex?
>
> Sure.  Look at the OpenLayers.Layer.Feature drawFeature method, second 
> argument.
>
>
>> Is there a way to store a reference to the selected vertex in the 
>> modify feature control? So that I could allow a user to select a 
>> vertex and then if they choose to delete it, I can just pull out a 
>> reference to it in the code from the modify feature. I suppose this 
>> could also just be a deleteSeletectedVertex function on the 
>> modifyFeature control too.
>
> Yep, but you'll need to program that.
>
>
>> Is there a way to deselect the the vertex too? So if I click on it 
>> and it changes its style to the ‘selected’ style, I can then click on 
>> it again to deselect it?
>
> If you keep track of the current one selected, yeah you could.  This 
> is also done programmatically.
>
>
>
> -- 
> Alexandre Dubé
> Mapgears
> www.mapgears.com


-- 
Alexandre Dubé
Mapgears
www.mapgears.com

-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.osgeo.org/pipermail/openlayers-users/attachments/20130301/6e85bea8/attachment-0001.html>


More information about the Users mailing list