javascript - 如何避免 OpenLayers 中的双重选择？

Question

我们有使用 OpenLayers 的 Vue.js 应用程序。我们绘制了一些图形对象，但我遇到了选择问题。我们使用 OpenLayers 的 Select 和 Modify 交互来选择和移动点状对象，并使用 ol-ext 的扩展包来移动其他类型的图形对象，例如线、多边形等。问题是当我们选择点状对象时，一切正常是否只有蓝点，我们用它来单击和拖动它们，但是当我们选择非点状对象时，既有 OpenLayers 也有 ol-ext 交互。应该只有ol-ext的交互。它看起来如下：

如您所见，所选多边形具有蓝色 OpenLayers 框架和 ol-ext 红色框架。只有当我们选择多边形时，我们才需要有红色的框架。

代码如下所示：

editGeometry (edit) {
  if (!edit) {
    this.modifyNonPoint.un('select', this.onModifyNonPoint)
    this.selectedFeatures.un('add', this.onSelectPoint)
    this.selectedPointFeature.un('change', this.onChangePoint)
    this.devDocMap.removeInteraction(this.modifyNonPoint)
    this.devDocMap.removeInteraction(this.selectPoint)
    this.devDocMap.removeInteraction(this.modifyPoint)
    return
  }
  if (!this.vectorLayer.getSource()) {
    return
  }

  // ol-ext's Transform interaction
  this.modifyNonPoint = new Transform({
    features: this.vectorLayer.getSource().getFeatures().filter(x => x.get('graphics') && x.get('movable') && !this.isPoint(x))
  })
  this.modifyNonPoint.on('select', this.onModifyNonPoint)
  this.devDocMap.addInteraction(this.modifyNonPoint)

  // OpenLayers' Select interaction
  this.selectPoint = new Select()
  this.selectedFeatures = this.selectPoint.getFeatures()
  this.selectedFeatures.on('add', this.onSelectPoint)
  this.devDocMap.addInteraction(this.selectPoint)

  // OpenLayers' Modify interaction
  this.modifyPoint = new Modify({
    features: this.selectedFeatures
  })
  this.devDocMap.addInteraction(this.modifyPoint)
},
onModifyNonPoint (event) {
  if (event.feature) {
    this.devDocMap.removeInteraction(this.select)
  }
  developedDocumentsApi.saveDrawingGraphics(this.document.id, this.updateGraphicsObjList())
},
onSelectPoint (event) {
  this.selectedPointFeature = event.element
  this.selectedPointFeature.on('change', this.onChangePoint)
},
onChangePoint (event) {
  developedDocumentsApi.saveDrawingGraphics(this.document.id, this.updateGraphicsObjList())
},
isPoint (feature) {
  if (!feature) {
    return false
  }
  const featureGeometry = feature.getGeometry()
  const featureGeometryType = featureGeometry.getType()
  if (featureGeometryType === 'Point') {
    return true
  }
  return false
},

如何克服这个问题？

标签： javascriptvuejs2openlayers

Answer 1

如果您只想选择积分，请使用

this.selectPoint = new Select({
  filter: function(feature) { return feature.getGeometry().getType() == 'Point' }
})