Track.js

import React, { PureComponent, Fragment } from 'react';
import { connect } from 'dva';
import { Button, Modal, message, Row, Col} from 'antd';
import moment from 'moment';
import AMap, { Map, Polyline } from 'react-amap';
import { amapJskey } from '@/utils/common';

let myMap, wAmap, passedPolyline, carPoint;
let polylines = [];

@connect(({ personnels, loading }) => ({
  personnels,
  loading: loading.models.personnels,
}))
class Track extends PureComponent {
  state = {
    today: new Date(),
    day: ['日', '一', '二', '三', '四', '五', '六'],
    currentDay: 0,
  }
  constructor(props) {
    super(props);
  }

  resetData = (n = 0, uid = this.props.uid) => {
    this.props.dispatch({
      type: 'personnels/admin_sys_trajectoryPosition_listByVO_post',
      payload: {
        uid,
        date: this.state.today.getTime() - 86400000 * n
      },
    });
    this.setState({
      currentDay: n,
    })
  }

  componentDidMount() {
   
  }

  startAnimation = (lineArr) => {
    const that = this;
    let track = lineArr.length - 1;
    myMap && myMap.setFitView();

    if (lineArr.length === 0) {
      message.info('此用户没有轨迹数据！');
      return false;
    }

    passedPolyline && myMap.remove(polylines);

    that.drawPassedPolyline(lineArr[0]);
    
    carPoint.on('movealong', function (e) {
      if (track > 0) {
        setTimeout(function() {
          that.drawPassedPolyline(lineArr[track]);
          track--;
        }, 500);
      }
    });
  }

  drawPassedPolyline = (lineArr) => {
    passedPolyline = new wAmap.Polyline({
      map: myMap,
      path: lineArr,
      strokeColor: "#AF5",  //线颜色
      strokeWeight: 6,      //线宽
    });
    polylines.push(passedPolyline);
    carPoint && carPoint.moveAlong(lineArr, 200);
  }

  componentWillReceiveProps(nextProps) {
    const newVisible =  nextProps.visible;
    if (this.props.visible !== newVisible) {
      if (newVisible) {
        this.resetData(null, nextProps.uid);
      }
    }
    if (nextProps.personnels.trajectoryPosition.length !== this.props.personnels.trajectoryPosition.length || 
      (nextProps.personnels.trajectoryPosition[0] && (nextProps.personnels.trajectoryPosition[0].startDateTime !== this.props.personnels.trajectoryPosition[0].startDateTime))) {
        this.props.onChange(nextProps.personnels.trajectoryPosition);
      }
  }

  mapEvents = {
    created: mapInstance => {
      myMap = mapInstance;
      wAmap = window.AMap;
      carPoint = new wAmap.Marker({
        map: mapInstance,
        icon: "/img/person-mini.png", size: new wAmap.Size(20, 40), offset: new wAmap.Pixel(-16, -13), autoRotation: true, angle: 0,
      });

      mapInstance.setFitView();

      carPoint.on('moving', function (e) {
        passedPolyline.setPath(e.passedPath);
      });

    },
  };

  resetTrack = (lineArr, trajectoryPosition) => {
    carPoint.setPosition(new wAmap.LngLat(lineArr[0][0][0],lineArr[0][0][1]));
    carPoint.stopMove();
    myMap.setFitView();
    passedPolyline && myMap.remove(polylines);
  }

  render() {
    const {
      personnels: {
        trajectoryPosition,
      }
    } = this.props;

    

    const lineArr = trajectoryPosition.map(item => {
      return item.trajectoryPositionList.map(element => {
        return [element.longitude, element.latitude]
      })
    });
    const modalFooter = { onOk: () => this.startAnimation(lineArr), onCancel: () => this.props.handleCancel(), okText: '播放轨迹' };

    if (lineArr && lineArr[0] && carPoint) {
      this.resetTrack(lineArr, trajectoryPosition);
    }

    return <Modal
              visible={this.props.visible}
              title="查看轨迹"
              {...modalFooter}
            >
        <Row style={{ textAlign: 'center'}}>
          <Col span={8} onClick={() => this.resetData()} style={{ cursor: 'pointer', backgroundColor: !this.state.currentDay ? '#def' : 'transparent' }}>
            今天
            <div style={{ fontSize: 12}}>{moment().format("YYYY-MM-DD")}/星期{this.state.day[new Date().getDay()]}</div>
          </Col>
          <Col span={8} onClick={() => this.resetData(1)} style={{ cursor: 'pointer', backgroundColor: this.state.currentDay === 1 ? '#def' : 'transparent' }}>
            昨天
            <div style={{ fontSize: 12}}>{moment(this.state.today.getTime() - 86400000).format("YYYY-MM-DD")}/星期{this.state.day[new Date(this.state.today.getTime() - 86400000).getDay()]}</div>
          </Col>
          <Col span={8} onClick={() => this.resetData(7)} style={{ cursor: 'pointer', backgroundColor: this.state.currentDay === 7 ? '#def' : 'transparent' }}>
            前天
            <div style={{ fontSize: 12}}>{moment(this.state.today.getTime() - 86400000 * 2).format("YYYY-MM-DD")}/星期{this.state.day[new Date(this.state.today.getTime() - 86400000 * 2).getDay()]}</div>
          </Col>
        </Row>

       { this.props.children }
        
        <div style={{ height: '360px' }}>
          <Map
            zoom={15}
            amapkey={amapJskey}
            events={this.mapEvents}
            plugins={['ToolBar']}
          >
            {lineArr.map((item, index) => item.length > 1 && <AMap.Polyline key={index} path={item} showDir={true} style={{strokeColor: '#28F', strokeWeight: 6 }} strokeColor />)}

          </Map>

        </div>
        </Modal>;
  }
}

export default Track;