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

Question

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

Here就是这个问题的解释。

让我用图片展示这个 "problem with removing points on wrong order" 它在实践中是如何工作的。

我们从画一些开始 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() 正在删除多余的项目，我得到了正确的 collection.

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

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

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

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

Here满满的Drawclass.

你知道我如何更新它并注入我修改后的坐标吗collection？

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

Answer 1

又一次解决了我自己放到Whosebug上的问题。太棒了！

所以让我介绍解决方案。

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

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

我找到了。

解决方案是：

编写自己的 class 以扩展 class 从 OpenLayers 中绘制来自 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() 函数时，它有一个 myNewCoordinates 集合设置到 this.sketchCoords_ 对象中。

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

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

Own removeLastPoint() function for Polygons in OpenLayers

javascript

gis

jquery

openlayers