8

I am working on a digitizing tool.

There are four buttons as of now:

  • add point
  • add line
  • add polygon
  • remove geometry

The user always starts by first drawing some geometries. I am using the Draw interaction (ol.interaction.Draw) and the geometries are added to a Collection (ol.Collection).

So far so good. Now the user might decide to remove some of the drawn geometries by clicking on them.

Here is an example:

enter image description here

When clicked on the 'remove geometry' button, then:

  • drawing is removed to deactivate it
  • a Select interaction is created (ol.interaction.Select) to select the geometry to remove it
  • when a feature is selected its ID is compared to all other features' IDs in a loop, and once the correct ID is found that feature is removed.

The logic works, but it is extremely difficult to delete a point or a line because of the blue dot that is shown when hovering, which makes it nearly impossible to click the geometries.

For example:

The following yellow point would not be removed as the blue dot is in the way:

enter image description here

If I move the cursor a little bit below the dot the feature will be removed:

enter image description here

The line is almost impossible to remove as the blue dot will move with the cursor as the cursor moves along the line:

enter image description here

For the polygon it works fine, as the blue dot is only shown when hovering around the edge of the geometry, but if you ignore that and click anywhere within the fill, the geometry will be removed as well:

enter image description here

How can I change the appearance of that blue dot? I would be OK with discarding it entirely. I have tried to add a style to the Select Interaction but that does not have any effect. It will just add another style on top of the blue dot.

EDIT: a way to solve this, perhaps, would be to look through that blue dot. Is there a way to click/select and see what is behind the blue dot?

  • If your problem is to select the feature (not so much about styling), you should use ol.interaction.Snap ... Also, is this what you are looking for? openlayers.org/en/latest/examples/snap.html – Keenan Gebze Nov 24 '16 at 4:46
  • Just used snapping instead of the selection, but the blue dot is shown as well. And, how would I then select the feature that is snapped to? Wouldn't I always have to use a Selection interaction? – BritishSteel Nov 24 '16 at 9:46
3

You need to define a style that will be used by your select interaction. This is mine for example:

selectedStyle = {
  LineString: new ol.style.Style({
  stroke: new ol.style.Stroke({
      color: 'blue',
      width: 8
  })
  }),
  Polygon: new ol.style.Style({
  stroke: new ol.style.Stroke({
      color: 'blue',
      width: 4
  }),
  fill: new ol.style.Fill({
      color: 'rgba(0, 0, 255, 0.1)'
  })
  }),
  Point: new ol.style.Style({
  image: new ol.style.RegularShape({
      fill: new ol.style.Fill({
          color: 'rgba(255, 255, 255, 0.5)'
      }),
      stroke: new ol.style.Stroke({
          color: 'red',
          width: 1
      }),
      points: 4,
      radius: 8,
      angle: Math.PI / 4
  })
})
}

In order to apply the correct style we need a style function to check the features:

var selectedStyleFunction = function (feature, resolution) {

var featureStyleFunction = feature.getStyleFunction();
if (featureStyleFunction) {
    return featureStyleFunction.call(feature, resolution);
} else {
    var type = feature.getGeometry().getType();
    return selectedStyle[type];
 }
}

Once defined, this can be added to the Select interaction object like this:

    session.interactions.select = new ol.interaction.Select({
    style: selectedStyleFunction,
    multi: true
});

I've tried to simplify this from my own code but hopefully haven't made a mistake(!)

  • This answers how to change the selection icon, which I thought was the solution to my problem and most people will read this question to find out about that, so I will mark it as the correct answer :-). And it helped me figure out my issue... finally! The real problem was: I did not remove the Modify interaction, which I activated during editing! So even though I deactivated my drawing, the Modify remained, and therefore the icon isn’t removed. – BritishSteel Nov 25 '16 at 8:57
  • I also fixed some parentheses, and I changed the 'colors' object to a value, so people can copy this without having to adjust anything. A million thanks again! – BritishSteel Nov 25 '16 at 8:58
  • No probs, glad to help ;) – dvmac01 Nov 25 '16 at 16:48

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.