Own removeLastPoint() function for Polygons in OpenLayers

Question

I'm trying to fix on my application problem with removeLastPoint() function from OpenLayers. The problem is that on mobile devices removeLastPoint() is removing points on wrong order. On desktop mode everything is working well.

Here is the explain of this problem.

Let's me present on images how this "problem with removing points on wrong order" it works in practice.

We're starting from draw some LineString:

We've got now a LineString which has been created from connecting of 5th points. Now I'm trying to call removeLatPoint() function by click on my removeButton, just like that:

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

And now I'm expecting to get result like that:

but what did I get? I got something like that:

On the next step I'll get:

On the next:

And on the end I'll have got only point number 5.

The problem is fact that in OpenLayers removeLastPoint() function is removing not last point but one of before it.

Here is current removeLastPoint() function code from OpenLayers:

The problematic is this line for me: coordinates.splice(-2, 1); because it is working just like I showed.

I couldn't wait for official solution of this problem so I wrote my temporary fix of that. On my fix I call before removeLastPoint() my own function which is removing last coordinate and is duplicating this coordinate which was before it. Just like that:

There is once difference. I'm using draw.extend(measureFeature); function to duplicate this coordinate before this last, because I have to refresh information which have been saved in private variable this.sketchCoords_ on the OpenLayers site. When I was trying to do it on the other way then this.sketchCoords_ still remembered previously saved state of drawed geometry and instead of call removeLastPoint() for myArray = ['1','2','3','4','4'] then it was calling for myArray = ['1','2','3','4','5']. So I have to use draw.extend() to duplicate current last item and update this.sketchCoords_.

Here is my own fix on this problem:

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) {

    }
}

My fix is working as I exected. After call removeLastPoint() is removing redundant item and I've got a correct collection.

And here is starting my real problem. Polygons. On polygons removeLastPoint() function doesn't work well too and there we've got this same problem with removing wrong point (not last but before it).

So I'm going to write a similar mechanism to modify polygon coordinates as I wrote for LineString geometries.

But how can I update this.sketchCoords_ by inject my modified coordinates collection if draw.extend() is working only for LineString geometries?

I haven't idea how can I do it. Class Draw from OpenLayers hasn't any helpful function for polygons which will be change or update current drawing polygon.

Here is full of Draw class.

Have you got any idea how can I update it and inject my modified coordinate collection?

Here is my fiddle, Maybe it'll helpful. I don't know why but on my fiddle sketch is always null so this fiddle is not working well but it able to show my code a little bit.

Did you open a ticket for this issue in the official OpenLayers github repo? — Dennis Bauszus, Sep 24 '19 at 15:53

score 1 · Accepted Answer · answered Mar 07 '19 at 15:34

Once again I solved the problem which I put by myself into StackOverflow. Awesome!

So let me present the solution.

I said that after modify a polygon I need update this.sketchCoords_ object because without it the removeLastPoint() from OpenLayers will be working on the old coordinates collection.

If draw.extend() is working only for LineString geometries then I had to find another solution how to do it.

And I found it.

The solution was:

writing own class to extend class Draw from OpenLayers from comes this.sketchCoords_ object:

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

and after that just modify this collection in own code. For example just like that:

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

And that's all.

When the code was calling removeLastPoint() function from OpenLayers then it had a myNewCoordinates collection set up into this.sketchCoords_ object.

I left this solution for people with similar problem. Maybe it'll help. If yes then upvote my ask and answer, please.

Own removeLastPoint() function for Polygons in OpenLayers

1 Answers1