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