轨迹播放.
npm i @bdh-gis/mapbox-gl-trackplay
import Trackplay from '@bdh-gis/mapbox-gl-trackplay';
let trackplay = new Trackplay({
map: map,
points: [[125.230, 48.941]],
iconImg: '农机',
iconSize: 1,
isLocated: false,
hasBearing: false,
isAlignMap: false,
beforeIds: ['3049'],
isRealTime: true,
});
export type TooltipControlOptions = {
getContent: (event: MapLayerMouseEvent) => string;
layer?: string | undefined;
};
Trackplay类基于mapbox地图,实现特定轨迹的渲染以及小车图标按照特定轨迹运行的功能。
轨迹支持多段不连续路线运行,小车根据轨迹的运行路线动态的摆动小车朝向。
支持小车图标自定义传入。
支持轨迹路线颜色、粗细设置,可设置是否显示轨迹,可设置初始化后是否定位到轨迹处。
支持小车运行速度设置,动态变化。
支持设置轨迹在地图上的层级,避免遮挡。
支持动态实时轨迹。
支持选择使用2d图标或者3d小车模型播放。
传入参数对象进行实例化。
// 历史轨迹初始化
let trackplayInstance = new Trackplay({map, points, ...});
// 历史轨迹播放
trackplayInstance.start();
// 历史轨迹暂停
trackplayInstance.stop();
// 历史轨迹重置
trackplayInstance.reset();
// 历史轨迹清除
trackplayInstance.clearTrail();
// 历史轨迹加速
trackplayInstance.speedUp();
// 历史轨迹清除
trackplayInstance.speedDown();
// 实时轨迹初始化
let trackplay = new Trackplay({
map: map,
points: [[125.230, 48.941]],
iconImg: '农机',
iconSize: 1,
isLocated: false,
hasBearing: false,
isAlignMap: false,
beforeIds: ['3049'],
isRealTime: true,
})
// 实时轨迹更新
let pointInfo = {
position: [125.430, 48.241],
speed: 25
}
trackplay.updateRealPoints(pointInfo)
// 实时轨迹清除
trackplay.clearTrail();
let trackplay = new Trackplay(params); // 初始化
**必传,object。**轨迹播放组件实例化入参。
**必传。**mapbox地图实例。
必传。轨迹点位数据。
注意:历史轨迹和实时轨迹点位集合格式不一致;历史轨迹存在多段不连续轨迹的情况。
格式如下:
// 历史轨迹
let points1 = [
[
[x1, y1],
[x2, y2],
],
]; // 单条轨迹单段连续
let points2 = [
[
[x1, y1],
[x2, y2],
],
[
[x3, y3],
[x4, y4],
],
]; // 单条轨迹多段不连续
// 实时轨迹则在初始化时传入第一个点位
let points_real = [[x1, y1]];
选传,string。轨迹播放中小车的图层id,不传则默认为"trackPointId"。
选传,string。轨迹图层id,不传默认为"trackLineId"。
选传,boolean。是否为实时轨迹,默认false。
选传,number。小车在轨迹上播放的速度,不传默认为100。可根据实际需求传入。
选传,string。小车图标图片在mapbox中导入时的名称,不传默认为"car"。"car"为农机管理系统默认图标,其他系统根据项目实际情况传入,确保小车图标在mapbox地图中已加载。
选传,number。小车图标的大小,不传默认为0.15。
选传,string。轨迹线颜色,不传默认为'#00FA9A'。
选传,number。轨迹线宽度,不传默认为2。
选传,boolean。实例初始化后,是否将地图定位到轨迹处,不传默认为false。
选传,boolean。是否隐藏轨迹图层,不传默认为false。
选传,array。其他需要在轨迹图层上方展示的图层id集合,确保其他图层不被轨迹线遮挡。
选传,function。轨迹线点击回调函数,抛出轨迹feature。
选传,function。小车点击回调函数,抛出小车当前feature。
选传,boolean。是否图标贴在地图上,默认false。
选传,boolean。是否对图标做朝向角度处理,默认false。
选传,boolean。是否使用3d模型小车播放轨迹,默认为false。
选传,is3d为true时必传。3d模型小车的url地址。
let trackplayInstance = new Trackplay({map, points, ...});
开始/继续播放。(历史轨迹专用,实时轨迹调用无效)
暂停播放。(历史轨迹专用,实时轨迹调用无效)
重置轨迹播放状态。小车回到起点,速度恢复到默认值,进度重置为0。(历史轨迹专用,实时轨迹调用无效)
清除所有轨迹。清除后需要重新实例化对象。
小车速度加倍。 速度 x2。最大为默认速度的16倍。(历史轨迹专用,实时轨迹调用无效)
小车速度减半。 速度 x1/2。最小为默认速度的1/16。(历史轨迹专用,实时轨迹调用无效)
const { position, speed } = pointInfo;
实时轨迹更新,每次传入更新的点位信息,包含position:坐标经纬度,speed:实时速度。(实时轨迹专用,历史轨迹调用无效)