1

I have a map displaying various paths, separated to the segments, which are of type Feature<LineString>. We have a request to implement functionality allowing users to merge two neighboring segments. This is done on BE, all we need to do is provide IDs of two segments.

I was hoping to extend our selection, as we do it right now but I'm struggling with keeping two LineStrings selectecd

this.selectInstance = new Select({
  condition: (mapBrowserEvent) => (this.hasFeature() ? false : click(mapBrowserEvent)),
  style: multi ? MultiSelectLineStyle : ModifyLineStyle, // provides different style for multi select
  // multi: true, // doesn't work for me, lines don't overlap
  hitTolerance: MAP_CONSTANTS.HIT_TOLERANCE, // 10
  filter: (feature) => feature.getProperties()['modelType'] === EntityType.SegmentEntity
  // we display multiple features and we want to select only SegmentEntity types
});

// hasFeature - don't allow further selection until the first one is cleared
// in our case I'm planning to refactor it -> two items + common point
private hasFeature(): boolean {
  const features = this.selectInstance?.getFeatures();
  return !!features?.item(0);
}

What I'm capable of doing now is to click on multiple lines, add them to a selection array, which basically gives me their IDs - that's the goal, but they are not distinguished visually. Only the last selected LineString stays color in a "selected" color.

NOTE: I was able to implement multi select like they did it here, but I would like to implement the selection condition as mentioned above and I'm not even sure if it possible to do it this way. OpenLayers version: "ol": "^7.1.0",

1 Answer 1

1

If you want to add selected item to collection of already selected items, you can use select interaction addCondition option for that. It just has to return true value all the time.

In you case select interaction definition could then look something like this:

this.selectInstance = new Select({
  condition: (mapBrowserEvent) => (this.hasFeature() ? false : click(mapBrowserEvent)),
  addCondition: (mapBrowserEvent) => true,
  style: multi ? MultiSelectLineStyle : ModifyLineStyle, // provides different style for multi select
  hitTolerance: MAP_CONSTANTS.HIT_TOLERANCE, // 10
  filter: (feature) => feature.getProperties()['modelType'] === EntityType.SegmentEntity
});

To clear selection you can use this:

this.selectInstance.getFeatures().clear();

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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