本文介绍如何在react中使用百度地图实现轨迹动画。
1、使用百度地图实现轨迹动画
在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);
本文介绍如何在react中使用百度地图实现轨迹动画。
1、使用百度地图实现轨迹动画
在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();
}
};
