Openlayers 5：修改交互，如何让顶点指向答案

【问题标题】：Openlayers 5: Modify interaction, how to get vertex pointed toOpenlayers 5：修改交互，如何让顶点指向
【发布时间】：2018-06-06 17:05:46
【问题描述】：

修改特征时，可以选择删除单个顶点。根据文档，它说：

removePoint(){布尔值}：移除当前指向的顶点。

(https://openlayers.org/en/latest/apidoc/ol.interaction.Modify.html)

由于我在移动设备上工作，如果用户单击或悬停在顶点上，我想在顶点旁边显示一个带有删除按钮的弹出窗口。因此我需要这个顶点的坐标。我可以看到地图上以不同样式指示的顶点，但我怎样才能得到它或它的坐标？它必须在某个选择中的某个位置，因为自动“指向”样式和 removePoint 方法本身就可以正常工作。

【问题讨论】：

标签： javascript gis openlayers

【解决方案1】：

这是一个使用按钮删除顶点的解决方案。如果有要删除的顶点（可能是弹出窗口），按钮会显示或隐藏。

它使用：

在点击附近有一个点时显示按钮的条件选项
insertVertexCondition 选项隐藏按钮（这里没有顶点）
modifystart 和 modifyend 事件隐藏按钮（我们正在移动，我们不希望按钮可见）
点击按钮时的removePoint函数

如果您正在移动或没有删除点，则不会显示该按钮。它不依赖于未记录或私有的功能。

你可以在here看到它。

var btElt = document.getElementById("delete");

// Modify interaction
var mod = new ol.interaction.Modify({
  source: vector.getSource(),
  // Show on select
  condition: function(e){
    // Check if there is a feature to select
    var f = this.getMap().getFeaturesAtPixel(e.pixel,{
      hitTolerance:5
    });
    if (f) {
      var p0 = e.pixel;
      var p1 = f[0].getGeometry().getClosestPoint(e.coordinate);
      p1 = this.getMap().getPixelFromCoordinate(p1);
      var dx = p0[0]-p1[0];
      var dy = p0[1]-p1[1];
      if (Math.sqrt(dx*dx+dy*dy) > 8) {
        f = null;
      }
    }
    if (f) btElt.style.display = "inline-block";
    else btElt.style.display = "none";

    return true;
  },
  // Hide on insert
  insertVertexCondition: function(e) {
    btElt.style.display = "none";
    return true;
  }
});
// Hide on modifying
mod.on(['modifystart','modifyend'], function(){
  btElt.style.display = "none";
});
map.addInteraction (mod);

// Delete vertex when click the button
function deleteVertex() {
  mod.removePoint();
  btElt.style.display = "none";
}

【讨论】：

啊，我不知道 getFeaturesAtPixel 方法。我对其进行了一些修改，它在触摸设备上工作得非常好和流畅。非常感谢。
我在这里放了一个带有弹出窗口和/或菜单的工作示例：viglino.github.io/ol-ext/examples/interaction/…

【解决方案2】：

好吧，深入研究源代码，我想出了一个有点丑陋但到目前为止有效的解决方案。为了记录，这是代码。

this.modify = new Modify({
    features: new Collection([this.selectedFeature]),
    pixelTolerance:30,
    condition: (event)=>{
        if(this.modify["lastPointerEvent_"] && this.modify["vertexFeature_"])
            this.removePointPopup.setPosition(this.modify["lastPointerEvent_"].coordinate);
        else
            this.removePointPopup.setPosition(undefined);
        return true;
    }
});
this.modify.on("modifyend",ev=>{
   this.removePointPopup.setPosition(ev.target["lastPointerEvent_"].coordinate);
})

[...]

removePoint(){
     this.modify.removePoint()
     this.removePointPopup.setPosition(undefined);
}

如果有人知道更好的解决方案，请随时发布。

【讨论】：