javascript - Openlayers 5 : Modify interaction, 如何让顶点指向

Question

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

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

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

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

Answer 1

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

它使用:

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

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

您可以在实际中看到它 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";
}