[OpenLayers-Users] ModifyControl Select/Delete Vertex?

[Robert Smart]

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?", { 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é 
Sent: Thursday, February 28, 2013 7:05 PM
To: Robert Smart 
Cc: 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
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.osgeo.org/pipermail/openlayers-users/attachments/20130301/13e464e2/attachment-0001.html>