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

Here是此问题的解释。

让我在图像上介绍一下这种“以错误的顺序消除点的问题”在实践中是如何工作的。

我们从画一些LineString开始:

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

现在我们得到了一个LineString,它是通过连接第5个点而创建的。
现在,我试图通过单击我的removeLatPoint()来调用removeButton函数,就像这样:

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


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

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

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

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

在下一步中,我将获得:

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

接下来:

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

最后,我只会得到第5点。

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

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

这是来自removeLastPoint()的当前OpenLayers功能代码:

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

问题在于这行对我来说:coordinates.splice(-2, 1);,因为它的工作方式与我展示的一样。

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

我迫不及待要解决这个问题,所以我写了我的临时解决方案。在我的解决方案上,我在removeLastPoint()之前调用自己的函数,该函数将删除最后一个坐标并复制此坐标之前的坐标。就像这样:

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

曾经有一次区别。我正在使用draw.extend(measureFeature);函数在最后一次之前复制此坐标,因为我必须刷新保存在this.sketchCoords_站点上的私有变量OpenLayers中的信息。当我尝试以另一种方式进行操作时,this.sketchCoords_仍会记住以前保存的绘制几何图形的状态,而不是为removeLastPoint()调用myArray = ['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几何编写的那样。

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

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

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

Here充满了Draw类。

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

Here是我的小提琴,也许会有所帮助。我不知道为什么,但是我的小提琴草图上始终为null,因此该小提琴无法正常工作,但可以显示一些代码。

最佳答案

我再次解决了我自己放入StackOverflow的问题。太棒了!

因此,让我介绍解决方案。

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

如果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];



就这样。

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

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

09-20 07:30