Vue + gaude map to realize track playback and play progress bar / multiple / time

Time:2020-8-13

Demand:
1: Track playback: play, pause, resume
2: Progress bar, track playback, progress bar should also play, track stop playing, progress bar should be suspended.
3: Multiple: not playing selection multiple, playing selection multiple, pause selection multiple.
4: Play time

In the Gaode API example, only the simplest play, pause and continue to play is required.
Therefore, it is necessary to implement the functions according to the existing classes and methods given in the Gode map reference manual

Don’t talk much nonsense.

1: Introduction of Gaud map

<script
      type="text/javascript"
     
    >
</script>

Template

<template>
  <div>
   // map
    <div id="container"></div>
    //Multiple
    <div class="speed">
      <span
        :class="{multiple: true, milActive: muiltipleIndex == index}"
        v-for="(item,index)  in speedList"
        @click="selectMultiple(index, item)"
      >{{item}}X</span>
      <span class="bs_ Title "> multiple playback</span>
    </div>
    
    <div class="input-card">
      <div class="plar-cnp">
      //Progress bar
        <van-slider
          class="slider-i"
          v-model="value"
          @change="onChange"
          :button-size="15"
          :step="step"
        />
        //Time
        <span class="progress_time">{{progressTime}}</span>
        //Play, pause, continue button
        <div class="p_icon">
          <van-icon v-if="palyStayus == 0" @click="startAnimation(0, [])" name="play-circle-o" />
          <van-icon v-if="palyStayus == 1" @click="pauseAnimation()" name="pause-circle-o" />
          <van-icon v-if="palyStayus == 2" @click="resumeAnimation()" name="play-circle-o" />
        </div>
      </div>
  </div>
</template>

variable

let TIME_VARIABLE;




data() {
    return {
      Progresstime: 0, // time
      Palystayus: 0, // 0 - > not started 1 - > driving 2 - > pause
      Value: 0, // initialization of progress bar
      Speedlist: [1, 2, 3, 4, 5], // multiple data
      Markerspeed: 100, // initialization speed
      Marker: null, // marker point
      Linearr: [], // track point array
      passedPolyline: null, 
      Positionindex: [], // starting point of track -- location of vehicle
      Speedcount: 1, // the multiple currently selected
      Passedpath: 0, // store (click multiple when playing) the captured position
      Int: null, // timer -- progress bar
      Timeint: null // timer -- time
      Curregdpath: null, // store the longitude and latitude captured by (click multiple when playing)
      Polyaline: null, // trace line
      Map: null // Map
    };
  },

2: Get data (this step will not be written, the data quantity field is simplified)

this.lineArr = [
{"gpsTime":"2020-02-06 14:37:56","longitude":109.07048","latitude":34.405327},

{"gpsTime":"2020-02-06 14:37:58","longitude":109.07059,"latitude":34.4055,},

{"gpsTime":"2020-02-06 14:38:00","longitude":109.07078,"latitude":34.40565},

{"gpsTime":"2020-02-06 14:38:02","longitude":109.07087,"latitude":34.405704},

{"gpsTime":"2020-02-06 14:38:06","longitude":109.07122,"latitude":34.40582},

{"gpsTime":"2020-02-06 14:38:07","longitude":109.0714,"latitude":34.405876},]

//Back up a group of original data, and initialize it later
this.standLineArr = this.lineArr

Display map (call back to display map after data request arrives)

this.map = new AMap.Map("container", {
    center: [116.478935, 39.997761],
    zoom: 20
});
this.marker = new AMap.Marker({
    map: this.map,
    //The first point of the locus point
    //this.positionIndex = new AMap.LngLat(
        //this.lineArr[0].longitude,
        //this.lineArr[0].latitude
    //);
    position: this.positionIndex, 
    icon: new AMap.Icon({
      size: new  AMap.Size (40, 40), // icon size
      Image: huache, // absolute path
      imageSize: new AMap.Size(40, 40)
    }),
    offset: new AMap.Pixel(-26, -13),
    autoRotation: true,
    angle: 90
 });
 //Initialize playback route
 this.initPolyline();
 
 //Key: the time required to complete the playback of track point (unit: s)
 // this.polyline.getLength () / 1000 --- is the total distance (km)
 // this.markerSpeed  * this.speedCount  ---Speed
 TIME_VARIABLE =
        (this.polyline.getLength() /
          1000 /
          (this.markerSpeed * this.speedCount)) *
        60 *
        60; // travel time (s)
 
 this.marker.on("moving", e => {
    this.passedPolyline.setPath(e.passedPath);
 });
 
 this.map.setFitView();
 
 
//What's inside is Gaud's analysis of more detailed longitude and latitude points
 AMap.event.addListener(this.marker, "moving", e => {
    // console.log ("currently played back: + e.passedpath)";
    //Here is the key. When the vehicle is playing, grab every point (more detailed point of Golder's analysis) so as to update the unfinished data in time when updating multiple, which will be used later
    this.curreGDPath = new AMap.LngLat(
      e.passedPath[e.passedPath.length - 1].lng,
      e.passedPath[e.passedPath.length - 1].lat
    );
    //Go to the specific point
    this.passedPath = e.passedPath.length;
 });

Call back after playback — initialization variable

//Call back after playing -- initialize all kinds of data
 this.marker.on("movealong", e => {
    this.palyStayus  =0; // the play / pause button displays the status change
    this.speedCount  =1; // the playback multiple is initialized to 1
    this.markerSpeed  =100; // the playback speed is initialized to 100
    //Cancel timer (time, progress bar)
    clearInterval(this.int); 
    clearInterval(this.timeInt);
    this.lineArr  = this.standLineArr ; // data initialization
    this.initPolyline (); // the data is updated to the line again.
  });

Initialize playback route

//Initialize playback route
    initPolyline() {
      this.polyline = new AMap.Polyline({
        map: this.map,
        path: this.lineArr,
        showDir: true,
        Strokecolor: "ා28f", // line color
        Strokeweight: 6 // line width
      });
      this.passedPolyline = new AMap.Polyline({
        map: this.map,
        Strokecolor: "#af5", // line color
        Strokeweight: 6 // line width
      });
    },

Click the start play button

startAnimation(status, arr) {
      //Speed = multiple of initial speed
      let markerSpeed = this.markerSpeed * this.speedCount;
      
      if (status == 0) {
        //The initial time is 00:00
        this.progressTime = formatSeconds(0); 
        this.value  =0; // the progress bar returns to 0
        this.palyStayus  =1; // the icon status is play
        arr = this.lineArr; 
        //Timer - start monitoring time and progress bar
        this.monitorInterval(); 
      }
      //Or play? Please check the Gode map API
      this.marker.moveAlong(arr, markerSpeed);
    },
    
    formatSeconds(value) {
        Var secondtime = parseInt (value); // sec
        Var minutetime = 0; // min
        Var hourtime = 0; // hour
        if(secondTime > 60) {
            minuteTime = parseInt(secondTime / 60);
            secondTime = parseInt(secondTime % 60);
            if(minuteTime > 60) {
                hourTime = parseInt(minuteTime / 60);
                minuteTime = parseInt(minuteTime % 60);
            }
        }
        var result = parseInt(secondTime)< 10?("0" + parseInt(secondTime)): ("" + parseInt(secondTime));
        result =parseInt(minuteTime)< 10?("0" + parseInt(minuteTime))+ ":" + result : ("" + parseInt(minuteTime)) + ":" + result;
        return result;
    }

Monitor progress bar and time

monitorInterval() {
  //Progress bar
  When (time_ Variable / 100) * 1000 time each cycle, the progress bar goes a multiple, and after playing, the progress bar is just finished
  this.int = setInterval(() => {
    this.value += 1 * this.speedCount;
  }, (TIME_VARIABLE / 100) * 1000);
  
  //Time
  this.timeInt = setInterval(() => {
    this.ptm += 1;
    this.progressTime = formatSeconds(this.ptm);
  }, 1000);
},

Click multiple

selectMultiple(e, data) {
  this.muiltipleIndex = e;
  this.speedCount  =Data; // multiple
  //If you are driving, click multiple
  if (this.palyStayus == 1) { 
    this.marker.pauseMove (); // stop temporarily first
    //Intercept the longitude and latitude array of the vehicle that has not been moved
    this.lineArr = this.lineArr.slice(this.passedPath); 
    
    //When the vehicle is temporarily stopped, the longitude and latitude where the vehicle is just located is spliced into the longitude and latitude array that has not been played back currently
    // this.curreGDPath This is the key -- it was explained in the previous code
    // this.lineArr Now this data intercepts the distance not traveled when you click multiple
    this.lineArr.unshift(this.curreGDPath);
    //And put this.lineArr Update to the line, or the line color is not synchronized
    this.initPolyline();
    //I just stopped for a moment. I'm going to start playing again
    this.startAnimation(1, this.lineArr);
  }
},

Pause. continue. stop it

//Pause
pauseAnimation() {
  this.palyStayus  =2; // the icon status is 2
  //Stop timer
  clearInterval(this.int); 
  clearInterval(this.timeInt);
  this.marker.pauseMove();
},
//Continue
resumeAnimation() {
  this.palyStayus  =1; // the icon status is 2
  this.monitorInterval();
  this.marker.resumeMove();
},
//Stop
stopAnimation() {
  this.marker.stopMove();
},