当前位置：网站首页>Web technology sharing | [Gaode map] to realize customized track playback

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

2022-06-22 20:18:00 【51CTO】

web Technology sharing | 【 Gould map 】 Realize customized track playback _ Talk to each other

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.

web Technology sharing | 【 Gould map 】 Realize customized track playback _ front end _02

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();
  };
});

     
      1.
      2.
      3.
      4.
      5.
      6.
      7.
      8.
      9.
      10.
      11.
      12.
      13.
      14.
      15.
      16.
      17.
      18.
      19.
      20.
      21.
      22.
      23.
      24.
      25.
      26.
      27.
      28.
      29.
      30.
      31.
      32.
      33.
      34.
      35.
      36.
      37.
      38.
      39.
      40.
      41.
      42.
      43.
      44.
      45.
      46.
      47.
      48.
      49.
      50.
      51.
      52.
      53.
      54.
      55.
      56.
      57.
      58.
      59.
      60.
      61.
      62.
      63.
      64.
      65.

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();
}

     
      1.
      2.
      3.
      4.
      5.
      6.
      7.
      8.
      9.
      10.
      11.
      12.
      13.
      14.
      15.
      16.
      17.
      18.
      19.
      20.
      21.
      22.
      23.
      24.
      25.
      26.
      27.
      28.
      29.
      30.
      31.
      32.
      33.
      34.
      35.
      36.
      37.
      38.
      39.
      40.
      41.
      42.
      43.
      44.
      45.
      46.
      47.
      48.
      49.
      50.
      51.
      52.
      53.
      54.
      55.
      56.
      57.
      58.
      59.
      60.
      61.
      62.
      63.
      64.