React使用百度地图实现轨迹动画

最新推荐文章于 2024-04-16 15:46:57 发布

sg_knight

最新推荐文章于 2024-04-16 15:46:57 发布

阅读量1.5k

点赞数

分类专栏：前端 # react 文章标签： react 百度地图轨迹动画前端

本文链接：https://blog.csdn.net/sg_knight/article/details/121158764

版权

前端同时被 2 个专栏收录

82 篇文章 7 订阅

订阅专栏

react

14 篇文章 0 订阅

订阅专栏

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

2、创建基本地图

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

3、自定义一个折线轨迹

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

4、创建个轨迹动画对象，并配置参数

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

5、启动动画

trackAni.start();

6、停止动画

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

7、重复进行动画渲染

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

新时代农民工