javascript - 在 OpenLayers 中拥有多边形的 removeLastPoint() 函数

Question

我正在尝试使用 OpenLayers 中的 removeLastPoint() 函数修复我的应用程序问题。问题在于，在移动设备上，removeLastPoint() 正在以错误的顺序删除点。在桌面模式下一切正常。

Here是这个问题的解释。

让我用图片展示这个“按错误顺序删除点的问题”在实践中是如何工作的。

我们从绘制一些 LineString 开始:

我们现在有一个 LineString，它是通过连接第 5 个点创建的。现在我尝试通过单击我的 removeButton 来调用 removeLatPoint() 函数，就像那样:

removeButton.on('click', () => {
   draw.removeLastPoint(); // this function comes from ol.integration.Draw class
});

现在我期待得到这样的结果:

但是我得到了什么？我有这样的东西:

下一步我会得到:

接下来:

最后我只会得到第 5 点。

问题在于，在 OpenLayers 中，removeLastPoint() 函数不是移除最后一个点，而是移除它之前的一个点。

这是 OpenLayers 中的当前 removeLastPoint() 函数代码:

对我来说有问题的是这一行:coordinates.splice(-2, 1); 因为它就像我展示的那样工作。

我等不及这个问题的官方解决方案，所以我写了我的临时解决方案。在我的修复中，我在 removeLastPoint() 之前调用了我自己的函数，该函数正在删除最后一个坐标并复制它之前的坐标。就这样:

有一次区别。我正在使用 draw.extend(measureFeature); 函数在最后一个之前复制这个坐标，因为我必须刷新保存在私有(private)变量 this.sketchCoords_ 中的信息在 OpenLayers 网站上。当我尝试以另一种方式进行操作时，this.sketchCoords_ 仍然记得先前保存的绘制几何体状态，而不是为 myArray = 调用 removeLastPoint() ['1','2','3','4','4'] 然后调用 myArray = ['1','2','3','4 ','5']。所以我必须使用 draw.extend() 复制当前的最后一项并更新 this.sketchCoords_。

这是我自己解决这个问题的方法:

removeButton.on('click', () => {
    if (this.isMobileDevice) {
        this.removeLastPoint();
    }
    this.draw.removeLastPoint();
}); 

removeLastPoint() {
    let measureFeature = this.sketch;
    measureFeature = measureFeature.clone();
    const geom = measureFeature.getGeometry();

    if (geom instanceof ol.geom.LineString) {
        const coords = geom.getCoordinates();
        let preparedCoords: [number, number][] = new Array();

        if (coords) {
            preparedCoords = coords;
            preparedCoords.splice(-1, 1);
            geom.setCoordinates(preparedCoords);
            measureFeature.setGeometry(geom);

            if (preparedCoords.length > 0) {
                this.draw.extend(measureFeature);
            }
        }
    } else if (geom instanceof ol.geom.Polygon) {

    }
}

我的修复工作如我所愿。调用 removeLastPoint() 后删除了多余的项目，我得到了正确的集合。

这就是我真正的问题。多边形。在多边形上，removeLastPoint() 函数也不能很好地工作，我们在删除错误点(不是最后一个点，而是之前的点)时遇到了同样的问题。

因此，我将编写一个类似的机制来修改多边形坐标，就像我为 LineString 几何体编写的那样。

但是，如果 draw.extend() 仅适用于 LineString 几何图形，我如何通过注入(inject)修改后的坐标集合来更新 this.sketchCoords_ ？

我不知道我该怎么做。 OpenLayers 中的类 Draw 对多边形没有任何有用的功能，这些多边形将更改或更新当前绘制的多边形。

Here充满了Draw类。

您知道如何更新它并注入(inject)我修改后的坐标集合吗？

Here是我的 fiddle ，也许它会有所帮助。我不知道为什么，但在我的 fiddle 草图上总是空的，所以这个 fiddle 不能正常工作，但它可以稍微显示我的代码。

Answer 1

我又一次解决了我自己放到 StackOverflow 中的问题。太棒了!

那么让我介绍一下解决方案。

我说修改多边形后我需要更新 this.sketchCoords_ 对象，因为没有它，OpenLayers 中的 removeLastPoint() 将起作用在旧坐标集合上。

如果 draw.extend() 仅适用于 LineString 几何图形，那么我必须找到另一种解决方案。

我找到了。

解决方案是:

1. 编写自己的类以从来自 this.sketchCoords_ 对象的 OpenLayers 中扩展类 Draw:

   declare namespace ol { 
      namespace interaction { 
          class ExtendedDrawClass extends ol.interaction.Draw {   
              sketchCoords_?: ol.Coordinate | ol.Coordinate[] | ol.Coordinate[][];
          }
      }
   }
   

2. 然后只需在自己的代码中修改此集合。例如就这样:

   var myNewCoordinates = geometry.getCoordinates();
   myNewCoordinates.split(-1,1);
   (<ol.Coordinate[][]>(<ol.interaction.ExtendedDrawClass>this.draw).sketchCoords_) = [myNewCoordinates];
   

仅此而已。

当代码从 OpenLayers 调用 removeLastPoint() 函数时，它会在 this.sketchCoords_ 中设置一个 myNewCoordinates 集合 对象。

我把这个解决方案留给有类似问题的人。也许它会有所帮助。如果是，请给我的问题和答案投票。