2

We use Vue.js and OpenLayers 4.6.5 in our project. I've noticed the following behavior - when I have two intersected polygons with some styles and click first time inside the intersection area (look at the arrow pointer), the first polygon is selected. When I click second time in the same area, the other polygon is selected.

I've checked the official documentation and found nothing about this. Is this default behavior? I've also checked my code and I can't see that I did something that could produce it.

My code is as following:

markObject (mark) {
  if (!mark) {
    if (this.lastSelectedFeature) {
      const style = this.lastSelectedFeature.get('originalStyle')
      this.lastSelectedFeature.setStyle(style)
    }
    this.map.un('select', this.onMarkObject)
    if (this.markSelection) {
      this.markSelection.getFeatures().remove(this.lastSelectedFeature)
      this.map.removeInteraction(this.markSelection)
    }
    return
  }

  if (!this.markSelection) {
    this.markSelection = new Select({
      condition: condition.click,
      layers: [this.vectorLayer]
    })
    this.markSelection.on('select', this.onMarkObject)
  }

  this.map.addInteraction(this.markSelection)
},
onMarkObject (event) {
  if (event.selected.length === 0) {
    if (this.lastSelectedFeature) {
      const style = this.lastSelectedFeature.get('originalStyle')
      this.lastSelectedFeature.setStyle(style)
      return
    }
  } else {
    const clickCoordinates = event.mapBrowserEvent.coordinate
    const allFeatures = this.vectorLayer.getSource().getFeatures()
    const drawnFeatures = allFeatures.filter(x => x.get('graphics'))

    for (const feature of drawnFeatures) {
      if (feature.id_ !== event.selected[0].id_) {
        const isIntersects = feature.getGeometry().intersectsCoordinate(clickCoordinates)
        if (isIntersects) {
          console.log('yes')
        } else {
          console.log('no')
        }
      }
    }

    if (event.selected[0] === this.lastSelectedFeature) {
      console.log('click the same')
    } else {
      console.log('click another')
    }
  }

  if (event.selected && event.selected[0].get('graphics') && event.selected.length > 0) {
    if (this.lastSelectedFeature) {
      const style = this.lastSelectedFeature.get('originalStyle')
      this.lastSelectedFeature.setStyle(style)
    }

    this.lastSelectedFeature = event.selected[0]
    // Highlight currently selected feature
    if (event.selected[0].getGeometry().getType() === 'Point') {
      event.selected[0].setStyle(markPointStyle)
    } else {
      event.selected[0].setStyle(markStyle)
    }
  }
},

The screen shots:

enter image description here

enter image description here

How can I disable this behavior and write custom code?

  • 3
    I think it is because before OpenLayers 6 the select interaction moved selected features into an overlay layer. Instead of using the select interaction you could select simply by using the map click event codepen.io/mike-000/pen/KKpNpPM – Mike Feb 21 at 10:06
  • Does it mean it is a bug in versions <6? – tesicg Feb 21 at 11:13

Your Answer

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

Browse other questions tagged or ask your own question.