Question

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

removePoint（）{}布尔：删除当前指向的顶点。

（https://openlayers.org/en/latest/apidoc/ol.interaction.Modify.html）

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

Answer 1

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

它使用：

条件选项，用于在点击附近有一个点时显示按钮
insertVertexCondition选项隐藏按钮（此处没有顶点）
modifystart和modifyend事件隐藏按钮（我们正在移动，我们不希望按钮可见）
点击按钮时删除点功能

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

您可以在行动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";
}

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

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

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

2 个答案: