<< all controls

🏷️ @bdh-gis/mapbox-gl-trackplay

轨迹播放.

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

Options

export type TooltipControlOptions = {
  getContent: (event: MapLayerMouseEvent) => string;
  layer?: string | undefined;
};

轨迹播放类 Trackplay

描述

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); // 初始化

params

**必传，object。**轨迹播放组件实例化入参。

params.map

**必传。**mapbox地图实例。

params.points

必传。轨迹点位数据。

注意：历史轨迹和实时轨迹点位集合格式不一致；历史轨迹存在多段不连续轨迹的情况。

格式如下：

// 历史轨迹
let points1 = [
  [
    [x1, y1],
    [x2, y2],
  ],
]; // 单条轨迹单段连续
let points2 = [
  [
    [x1, y1],
    [x2, y2],
  ],
  [
    [x3, y3],
    [x4, y4],
  ],
]; // 单条轨迹多段不连续

// 实时轨迹则在初始化时传入第一个点位
let points_real = [[x1, y1]];

params.trackPointId

选传，string。轨迹播放中小车的图层id，不传则默认为"trackPointId"。

params.trackLineId

选传，string。轨迹图层id，不传默认为"trackLineId"。

params.isRealTime

选传，boolean。是否为实时轨迹，默认false。

params.speed

选传，number。小车在轨迹上播放的速度，不传默认为100。可根据实际需求传入。

params.iconImg

选传，string。小车图标图片在mapbox中导入时的名称，不传默认为"car"。"car"为农机管理系统默认图标，其他系统根据项目实际情况传入，确保小车图标在mapbox地图中已加载。

params.iconSize

选传，number。小车图标的大小，不传默认为0.15。

params.lineColor

选传，string。轨迹线颜色，不传默认为'#00FA9A'。

params.lineWidth

选传，number。轨迹线宽度，不传默认为2。

params.isLocated

选传，boolean。实例初始化后，是否将地图定位到轨迹处，不传默认为false。

params.isHideHistoryTrack

选传，boolean。是否隐藏轨迹图层，不传默认为false。

params.beforeIds

选传，array。其他需要在轨迹图层上方展示的图层id集合，确保其他图层不被轨迹线遮挡。

params.lineClickHandle

选传，function。轨迹线点击回调函数，抛出轨迹feature。

params.pointClickHandle

选传，function。小车点击回调函数，抛出小车当前feature。

params.isAlignMap

选传，boolean。是否图标贴在地图上，默认false。

params.hasBearing

选传，boolean。是否对图标做朝向角度处理，默认false。

params.is3d

选传，boolean。是否使用3d模型小车播放轨迹，默认为false。

params.modelUrl3d

选传，is3d为true时必传。3d模型小车的url地址。

方法调用

let trackplayInstance = new Trackplay({map, points, ...});

trackplayInstance.start()

开始/继续播放。(历史轨迹专用，实时轨迹调用无效)

trackplayInstance.stop()

暂停播放。(历史轨迹专用，实时轨迹调用无效)

trackplayInstance.reset()

重置轨迹播放状态。小车回到起点，速度恢复到默认值，进度重置为0。(历史轨迹专用，实时轨迹调用无效)

trackplayInstance.clearTrail()

清除所有轨迹。清除后需要重新实例化对象。

trackplayInstance.speedUp()

小车速度加倍。 速度 x2。最大为默认速度的16倍。(历史轨迹专用，实时轨迹调用无效)

trackplayInstance.speedDown()

小车速度减半。 速度 x1/2。最小为默认速度的1/16。(历史轨迹专用，实时轨迹调用无效)

trackplayInstance.updateRealPoints(pointInfo)

const { position, speed } = pointInfo;

实时轨迹更新，每次传入更新的点位信息，包含position：坐标经纬度，speed：实时速度。(实时轨迹专用，历史轨迹调用无效)