本文介绍如何通过React使用百度地图实现轨迹动画

1、引入开源文件TrackAnimation_min.js

在react中使用react-load-script加载scrip文件

1.1 在package.json文件中引入react-load-scrip

"react-load-script": "^0.0.6",

1.2 在文件中导入react-load-scrip

import Script from 'react-load-script';

1.3 加载rackAnimation_min.js文件

render() {    return(      <div>        <Script          url="//api.map.baidu.com/library/TrackAnimation/src/TrackAnimation_min.js"          onCreate={() => this.handleScriptCreate()}          onError={() => this.handleScriptError()}          onLoad={() => this.handleScriptLoad()}        />      </div>    );}

<Map     center={{ lng, lat }}     zoom="17"     style={{ height: '50vh' }}     enableScrollWheelZoom     ref={this.myRef} >  <NavigationControl />  <ScaleControl /></Map>

const path = [{    'lng': 116.297611,    'lat': 40.047363}, {    'lng': 116.302839,    'lat': 40.048219}, {    'lng': 116.308301,    'lat': 40.050566}, {    'lng': 116.305732,    'lat': 40.054957}, {    'lng': 116.304754,    'lat': 40.057953}, {    'lng': 116.306487,    'lat': 40.058312}, {    'lng': 116.307223,    'lat': 40.056379}];const point = [];for (let i: any = 0; i <path?.length; i++) {    point.push(new BMapGL.Point(path[i].lon, path[i].lat));}const draw = new BMapGL.Polyline(point);

const trackAni = new BMapGLLib.TrackAnimation(this?.myRef?.current?.map, draw, {     overallView: true, // 动画完成后自动调整视野到总览     tilt: 30,          // 轨迹播放的角度，默认为55     duration: 10000,   // 动画持续时长，默认为10000，单位ms     delay: 1000        // 动画开始的延迟，默认0，单位ms});

trackAni.start();

trackAni.cancel();         // 强制停止动画

//轨迹  track = () => {    const { carList, trackAnimation } = this.state;    const path = carList;    const point = [];    for (let i: any = 0; i <path?.length; i++) {      point.push(new BMapGL.Point(path[i].lon, path[i].lat));    }    const draw = new BMapGL.Polyline(point);    if(isEmptyObject(trackAnimation)){      const trackAni = new BMapGLLib.TrackAnimation(this?.myRef?.current?.map, draw, {        overallView: true, // 动画完成后自动调整视野到总览        tilt: 30,          // 轨迹播放的角度，默认为55        duration: 10000,   // 动画持续时长，默认为10000，单位ms        delay: 1000        // 动画开始的延迟，默认0，单位ms      });      trackAni.start();      this.setState({ trackAnimation: trackAni });    } else {      trackAnimation.start();    }  };