Web technology sharing | [Gaode map] to realize customized track playback

Realization ( Track playback ) There are two ways ：

• The first is to use  
  JS API
    and  
  AMap.PolyLine
  （ Broken line ） And so on .

• The second is to use  
  JS API
    and  
  AMapUI  Component library
    In combination with , utilize  
  PathSimplifier
  （
  Trajectory display
  Components ） Draw the trajectory of action .

Options

We can implement the above two methods according to two

factors

  To decide which one is more suitable for you ：

Number of nodes

  The amount of 、

The density of the arrangement

 .

The former is suitable for less nodes , The arrangement is sparse , for example , Taxi track playback , Taxis are fast , The periodic reporting time will also be relatively long . The latter is more specific to the large number of nodes 、 Arrange dense paths , Record the aircraft track of the position in seconds , Fine geographical boundaries, etc .

Implementation process

Either way , We all need to collect the information reported by the client first , This information can be customized , Usually we will include ：

Longitude and latitude 、 Speed 、 The geographical location after inverse coding 、 Direction 、 At an altitude of

  And other basic geographic information , We can also add some

Customize

  Information about , for example ： Personnel information （ Avatar nickname, etc ）、 Travel information （ Orders, etc ）.

The process of implementation ：

• The client presses （ Time ） Periodically report geographic information and customized information .

• The server stores the information reported by the customer according to the time axis .

• Press （ Time and so on ） Query the user's track by conditions , And some nodes are removed by simplified algorithm （ for example , The node distance is very small 、 Or multiple points are in the same straight line 、3 Between points , There is a slight deviation in one point, which can not be drawn into a straight line, etc ）, Finally, the path suitable for drawing （ Array ）.

• Draw the user's action track according to the path .

Path simplification algorithm （ Optional ）

The data reported by the client is reported according to the time cycle , That is to say, each time corresponds to a longitude and latitude , Longitude and latitude are one point after another on the map , When connecting these points , We will get  N  Multiple broken lines , In order to draw a more beautiful trajectory , The course of action is clearer and smoother , Usually we need an algorithm to simplify the polyline .

for example ：

• A
    Point and  
  B
    spot , The distance between the two is less than  
  1
    Pixels , You can get rid of  
  B
    spot , Just stay  
  A
    spot .

• A
  ,
  B
  ,
  C
    Three points in a straight line , perhaps ,
  B
    The point deviates only slightly  
  A
    Point and  
  C
    A line segment composed of points , that  
  B
    Point can be removed .

An algorithm library is also recommended here  

simplify.js

For your reference , I don't want to elaborate too much here .

Implementation example

Vehicle track playback

Here we use the first method to realize  -  utilize  

JS API

  and  

AMap.PolyLine

.

Realization principle ：

• Draw... On a map
  Vehicle markings
  （
  AMap.Marker
  ）.

• utilize  
  AMap.PolyLine
    Draw two tracks ：
  The track of history
  and
  Track of driving path
  , Distinguish by color .

• Drive the vehicle forward at a certain speed , And monitor  
  Maker
    Mobile Events , In event callback , Put the vehicle （
  Marker
  ） The location is set as the center point of the map , Give the user a subjective visual sense that the vehicle is moving forward , At the same time, extend
  Track of driving path
  .

• For complex implementation scenarios , For example ：

• View the data of each node
  , We can plot each node , When a node is clicked, the data of the node will be displayed .

• Mobile multipliers
  , First, play according to the reported time interval , After selecting double speed , change  
  MarKer
    The mobile  
  duration
  .

• Other customizations .

Customize  API

We can make the vehicle ：

• Start moving

• Pause move

• Resume move

• Stop moving

Code example

AMap.plugin('AMap.MoveAnimation', function(){
 var marker, lineArr = [[116.478935,39.997761],[116.478939,39.997825],[116.478912,39.998549],[116.478912,39.998549],[116.478998,39.998555],[116.478998,39.998555],[116.479282,39.99856],[116.479658,39.998528],[116.480151,39.998453],[116.480784,39.998302],[116.480784,39.998302],[116.481149,39.998184],[116.481573,39.997997],[116.481863,39.997846],[116.482072,39.997718],[116.482362,39.997718],[116.483633,39.998935],[116.48367,39.998968],[116.484648,39.999861]];

 var map = new AMap.Map("container", {
 resizeEnable: true,
 center: [116.397428, 39.90923],
 zoom: 17
 });

 marker = new AMap.Marker({
 map: map,
 position: [116.478935,39.997761],
 icon: "https://a.amap.com/jsapi_demos/static/demo-center-v2/car.png",
 offset: new AMap.Pixel(-13, -26),
 });

 //  Draw historical tracks
 var polyline = new AMap.Polyline({
 map: map,
 path: lineArr,
 showDir:true,
 strokeColor: "#28F", // Line color
 // strokeOpacity: 1, // Line transparency
 strokeWeight: 6, // Line width
 // strokeStyle: "solid" // Line style
 }); 
 //  Track of driving path
 var passedPolyline = new AMap.Polyline({
 map: map,
 strokeColor: "#AF5", // Line color
 strokeWeight: 6, // Line width
 });

 //  Listen for vehicle movement events
 marker.on('moving', function (e) {
 //  Extend the track of the driving path
 passedPolyline.setPath(e.passedPath);
 //  Set the vehicle position as the center point of the map
 map.setCenter(e.target.getPosition(),true)
 });

 map.setFitView();
 
 //  Start moving
 window.startAnimation = function startAnimation () {
 marker.moveAlong(lineArr, {
 //  The length of each segment
 duration: 500,// It can be set according to the actual acquisition time interval
 // JSAPI2.0  Whether to automatically set the angle along the road  moveAlong  Set in the
 autoRotation: true,
 });
 };
 //  Pause move
 window.pauseAnimation = function () {
 marker.pauseMove();
 };
 //  Resume move
 window.resumeAnimation = function () {
 marker.resumeMove();
 };
 //  Stop moving
 window.stopAnimation = function () {
 marker.stopMove();
 };
});


Reference link ：

https://lbs.amap.com/demo/jsapi-v2/example/marker/replaying-historical-running-data

Playback of flight track

Use  

JS API

  and  

AMapUI  Component library

  In combination with , utilize  

PathSimplifier

（

Trajectory display

Components ） Draw the trajectory of action , This scheme is relatively simple , Only some configuration is required , For example, the double speed playback in scheme 1 needs to be calculated , At the same time, it also has the disadvantage of not dynamically changing the multiple speed , But scheme two will not exist .

Realization principle ：

• Draw... On a map
  Aircraft marking
  （
  AMap.Marker
  ）.

• utilize  
  AMap.PolyLine
    Draw two tracks ：
  The track of history
  and
  Track of driving path
  , Distinguish by color .

• Configure the color of the track , Animation speed and so on .

• For complex implementation scenarios , Which need to be customized , Can be in
  PathSimplifier
    Configuration and processing in the callback provided .

Sample code

// load PathSimplifier,loadUI The path parameter of is in the module name  'ui/'  The next part  
AMapUI.load(['ui/misc/PathSimplifier'], function(PathSimplifier) {

 if (!PathSimplifier.supportCanvas) {
 alert(' The current environment does not support  Canvas！');
 return;
 }

 // Launch page
 initPage(PathSimplifier);
});

function initPage(PathSimplifier) {
 // Create a component instance
 var pathSimplifierIns = new PathSimplifier({
 zIndex: 100,
 map: map, // The map instance to which it belongs
 getPath: function(pathData, pathIndex) {
 // Returns the node coordinate information in the track data ,[AMap.LngLat, AMap.LngLat...]  perhaps  [[lng|number,lat|number],...]
 return pathData.path;
 },
 getHoverTitle: function(pathData, pathIndex, pointIndex) {
 // Returns the information displayed when the mouse hovers
 if (pointIndex >= 0) {
 // Hover over a track node
 return pathData.name + ', spot :' + pointIndex + '/' + pathData.path.length;
 }
 // Hover over the connection between nodes
 return pathData.name + ', Number of points ' + pathData.path.length;
 },
 renderOptions: {
 // Track line style
 pathLineStyle: {
 strokeStyle: 'red',
 lineWidth: 6,
 dirArrowStyle: true
 }
 }
 });

 // Here we build two simple tracks , For example only
 pathSimplifierIns.setData([{
 name: ' The trajectory 0',
 path: [
 [100.340417, 27.376994],
 [108.426354, 37.827452],
 [113.392174, 31.208439],
 [124.905846, 42.232876]
 ]
 }, {
 name: ' Ground wire ',
 // Create a message that includes 500 A geodesic line of interpolation points
 path: PathSimplifier.getGeodesicPath([116.405289, 39.904987], [87.61792, 43.793308], 500)
 }]);

 // Create a cruiser
 var navg0 = pathSimplifierIns.createPathNavigator(0, // Related to chapter 1 Tracks
 {
 loop: true, // Loop Playback
 speed: 1000000
 });

 navg0.start();
}


Reference link ：

https://lbs.amap.com/demo/amap-ui/demos/amap-ui-pathsimplifier/index