How to realize the vehicle running trajectory conveniently in gmap.net

first, the simple idea

To achieve the vehicle trajectory, we may need a timing trigger mechanism to update the location of the marker, in addition to the position movement, we may also need to dynamically change the direction of the vehicle, such as:

first, position Movement is the simplest, the key is the direction of the dynamic change how to achieve, a little observation can be seen, the direction of the car is always parallel to the tangent line, it seems we have to write a method to find any point on the line Tangent. This may not be a tricky thing for some of the great gods, but it's just a matter of taking a moment to write an algorithm, but I don't think I can do it on my own, so I'm going to use the existing code base to implement the above Functionality. in wpf, the path animation is very common, and it coincides with the requirements here, we can not use it to achieve the above function?

second, The Path animation demo

Blog Park There are a lot of essays on the WPF path animation, if you have not known, you can look at one of the article: http://www.cnblogs.com/zhouyinhui/archive/2007/07/31/837893.html, There is a detailed introduction of the use of path animation, and with the demo can be downloaded, I suggest to read this essay before reading Down. For the convenience of getting the position coordinates and rotation angle of the moving object during the execution of the animation, I chose the Doubleanimationusingpath method described in this essay, and we need to subscribe to the changed event of any transform instance on this Basis. So that the vehicle can notify us when it changes position:

var New TranslateTransform (); var New RotateTransform (); var New  + = (s, E) = ={
Here to get the position of the car coordinates and rotation angle};

In the code above, I subscribed to an event for Translatetransfor's instance, and now the Car's location is the new point (translate. X, Translate. Y), the angle of rotation of the trolley is Rotate. Angle, All right, We have all the things we need, and we're going to make it in gmap.

third, Custom Marker

first, You see this essay on behalf of you to gmap or have a certain understanding of, then naturally also know marker is a what, do not know can use the search engine to understand, or reference this essay: http://www.cnblogs.com/luxiaoxun/p/ 3475355.html, I'm Not going to introduce you here. The car on the map is actually a custom marker, we call it cargmapmarker, in the cargmapmarker we need to maintain a canvas subclass (because it inherits the canvas), the canvas is the container of path, Then we need a border to act as a moving object, in fact these processes are designed to simulate the situation created in http://www.cnblogs.com/zhouyinhui/archive/2007/07/31/837893.html, Then we also need an event public events eventhandler<tuple<double, point>> positionchanged, to notify us of the custom marker: hey! The border position and angle of my internal maintenance changed, and they were xxxxxxxx. The Code of the notification is written in the changed event triggering method that is discussed in Two:

var New TranslateTransform (); var New RotateTransform (); var New  + = (s, E) = ={    onpositionchanged (new tuple<doubleNew point (translate. X, Translate. Y));};

Then we just subscribe to the positionchanged event of the canvas subclass in the custom marker, and get a tuple from e, the Item1 of the tuple is the angle, Item2 is the coordinates, we can use the angle to change the direction of the marker picture, Use coordinates to change the value of the Markerposition.

however, before the path in our canvas subclass has not assigned a value to its data property, generating this data is actually very simple, that is, the key point that the car needs to pass through the line to connect up, directly on the method:

 public  void  setpoints (list<point > list) { var  geometry = new   pathgeometry ();  var  fi = new  pathfigure {StartPoint =  List.    First ()};  foreach  (var  item in  List. Skip (1   new  linesegment (item, false     

It is important to note that the first coordinate of the list needs to be assigned to the StartPoint attribute of the pathfigure, and the remaining coordinates are connected one by One. finally, as long as you assign this geometry to the data property of path in the canvas subclass, you can assign a value by using a method, or you can write a property assignment in the canvas subclass, as you would do with the Latter.

four, image Processing

The following is to say is the picture of the rotating car, marker in the picture with the bitmap, the method of rotation bitmap online There are many, we can sometimes pursue take doctrine, search a take to use it. It should be noted that the Car's initial state of the front is to face up, because the upward is 0 degrees, and coordinate system.

besides, There's A pit. note that in gmap, the marker default is above the target point, not the center point, which can be understood by the following images:

　　

, the anchor point will be on the route, not the center of the anchor on the route, what if the image of the anchor is replaced directly with the car? This is true:

　　

You asked why the car didn't spin? ok, so i'll let her spin, and the point tangent parallel, bitmap rotation is around the center point rotation, then the rotation effect is like this:

　　

Although parallel to the tangent line, but the car completely out of the way, how to do? Move down! How much to move? Half the height! Light is not enough, we also need to ensure that the height and width of the car picture is equal, that is, if a square can, as for why, Bo friends can think for Themselves.

The final results are as follows:

　　

How to realize the vehicle running trajectory conveniently in gmap.net