Web technology sharing | [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