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

Question

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

removePoint(){boolean}: Removes the vertex currently being pointed.

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

由于我在移动设备上工作，如果用户单击或悬停在顶点上，我想在顶点旁边显示一个带有删除按钮的弹出窗口。因此我需要这个顶点的坐标。我可以看到地图上指示的顶点具有不同的样式，但是如何获取它或其坐标？它必须在某些选择中的某处，因为自动 "pointing to" 样式和 removePoint 方法本身可以正常工作。

Answer 1

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

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);
}

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

Answer 2

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

它使用：

如果点击附近有一个点，则显示按钮的条件选项
insertVertexCondition选项隐藏按钮（这里没有顶点）
修改开始和修改结束事件以隐藏按钮（我们正在移动，我们不希望按钮可见）
点击按钮时移除点函数

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

您可以看到它的实际效果 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";
}

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

Openlayers 5: Modify interaction, how to get vertex pointed to

javascript

gis

openlayers