Animate a point alongside a line from known coordinates

debugcn Published at Dev

Alexandre Dubé

In a JavaScript application that uses OpenLayers 4.5.0, where I have a linestring and a point in a map. The point is located "on" the linestring.

Now, I want to move the point to an other location on the linestring, while animating alongside the line for a given period of time.

This is the information that I have, i.e. that I'm working with:

I have the coordinate of the point
I have the coordinate where to move the point to
I have the geometry of the linestring
I know that both coordinates (start and end) are on the line

I also have a good idea how to implement the animation. What I do not know is how to obtain the location alonside the line while animating.

I'm aware of the method ol.geom.LineString.prototype.getCoordinateAt, which allows you to get a coordinate of a linestring given a fraction. What I think I would need is the opposite: I have the coordinates. I need the fractions of the start and end. If I had those, I would be able to calculate the fraction between the two while animating.

Is there a way to accomplish this with OpenLayers?

Update

Here's a picture that represents what I want to do. More explanation below it.

I have a line string and point only. The point is on the line (not at a vertex)
I get a new location where I want to move the point
I want to move the point alongside the line in an animation. The arrow I drew is the path I want the point to move. In other words, it's a sub-section of the line string from the original location of the point and its destination.

If I know the 2 fractions of the linestring in question (the ones at the start and end), then I could retreive the fraction while animating. If, for example, I know that the start is 0.2 and the end 0.8, then I'd know that if I'm 10% there in the animation, then I'd need to show my point to 0.26.

I hope this helps understand what I'm trying to do.

Alexandre Dubé

I've been able to accomplish what I needed to do using the ol-ext library, more specifically using the splitAt method. Here's the recipe I used:

First, for each coordinated I had, I had to make sure that they "snap" to the line. I did so using the getClosestPoint method in OpenLayers, like so:

// Get "closest" start and end coordinates for segment computing
var closestStartCoordinate = lineString.getClosestPoint(startCoordinate);
var closestEndCoordinate = lineString.getClosestPoint(endCoordinate);

Then, if I use the splitAt method, I get multiple segments. The one I need is the one with start coordinate equal to closestStartCoordinate and end coordinate equal to closestEndCoordinate.

And that's it! I have my segment. While the animation is in progress, I'm able to use the getCoordinateAt method from the segment depending on the elapsed time of the animation to get the location to move my point to while it is in progress.

Thanks to @pavlos for pointing this out. Thanks to the authors of the ol-ext library!

Collected from the Internet

Please contact [email protected] to delete if infringement.

edited at2021-08-7

Comments

0 comments

From Dev

Related Related

Article