OpenLayers 中多边形的自己的 removeLastPoint() 函数答案

【问题标题】：Own removeLastPoint() function for Polygons in OpenLayersOpenLayers 中多边形的自己的 removeLastPoint() 函数
【发布时间】：2019-03-04 14:33:26
【问题描述】：

我正在尝试使用 OpenLayers 的 removeLastPoint() 函数解决我的应用程序问题。问题是在移动设备上@987654345@ 正在删除错误顺序的点。在桌面模式下一切正常。

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); 函数在最后一个之前复制这个坐标，因为我必须刷新保存在OpenLayers 站点上的私有变量this.sketchCoords_ 中的信息。当我试图以另一种方式进行时，this.sketchCoords_ 仍然记得以前保存的绘制几何图形的状态，而不是为myArray = ['1','2','3','4','4'] 调用removeLastPoint()，然后它正在调用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 几何图形，我如何通过注入我修改后的坐标集合来更新this.sketchCoords_？

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

Here 充满了Draw 类。

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

Here 是我的小提琴，也许会有所帮助。我不知道为什么，但在我的小提琴草图上总是为空，所以这个小提琴不能很好地工作，但它能够显示我的代码一点点。

【问题讨论】：

您是否在官方 OpenLayers github 存储库中为此问题开过票？

标签： javascript jquery gis openlayers

【解决方案1】：

我又一次解决了我自己放入 StackOverflow 的问题。太棒了！

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

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

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

我找到了。

解决办法是：

编写自己的类来扩展来自 OpenLayers 的类 Draw 来自 this.sketchCoords_ 对象：

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

然后在自己的代码中修改这个集合。比如这样：

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

仅此而已。

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

我将此解决方案留给有类似问题的人。也许会有所帮助。如果是，请支持我的提问和回答。

【讨论】：