2D · TrailMap 轨迹地图

2D 文档 · Leaflet 组件

TrailMap 是轨迹场景的开箱即用封装，内部创建 TMap、轨迹线、起终点和循环移动 Marker。

使用示例

vue

<TrailMap
  ref="trailRef"
  :points="trackPoints"
  provider="osm"
  :duration-sec="8"
  car-icon-url="/trail-car.svg"
  :car-icon-size="[64, 32]"
  start-icon-url="/trail-start.svg"
  end-icon-url="/trail-end.svg"
  @progress="onProgress"
/>

trailRef.value?.play(); // 开始播放
trailRef.value?.pause(); // 暂停在当前位置
trailRef.value?.resume(); // 从暂停位置继续
trailRef.value?.stop(); // 停止并回到起点
trailRef.value?.reset(); // 重置到起点
trailRef.value?.setProgress(0.5); // 跳到 50% 进度

Props

名称	类型	默认值	说明
`points`	`TrackPoint[]`	必填	经度和纬度可为数字或数字字符串
`durationSec`	`number`	`5`	完整播放一轮的秒数
`autoPlay`	`boolean`	`true`	轨迹渲染完成后是否自动播放
`loop`	`boolean`	`true`	播放到终点后是否循环
`fitBoundsOnLoad`	`boolean`	`true`	渲染后是否自动缩放到完整轨迹范围
`followMarker`	`boolean`	`false`	播放过程中地图是否跟随移动点平移
`provider`	`TMapProvider`	`tianditu`	地图源
`url`	`string`	—	自定义 XYZ 地址
`apiKey`	`string`	空字符串	天地图 Key
`carIconUrl`	`string`	—	移动点图标，不传则使用圆点
`carIconSize`	`[number, number]`	`[52, 26]`	移动图标尺寸
`carIconAnchor`	`[number, number]`	图标中心	移动图标锚点
`carTitle`	`string`	`移动点位`	移动点鼠标悬停标题
`lineColor`	`string`	`#2563eb`	轨迹线颜色
`lineWeight`	`number`	`4`	轨迹线宽度
`lineOpacity`	`number`	`0.9`	轨迹线透明度
`startIconUrl`	`string`	—	起点图标，不传则使用圆点
`startIconSize`	`[number, number]`	`[28, 36]`	起点图标尺寸
`startIconAnchor`	`[number, number]`	底部中心	起点图标锚点
`startColor`	`string`	`#67c23a`	起点颜色
`startTitle`	`string`	`起点`	起点 Tooltip 文案
`endIconUrl`	`string`	—	终点图标，不传则使用圆点
`endIconSize`	`[number, number]`	`[28, 36]`	终点图标尺寸
`endIconAnchor`	`[number, number]`	底部中心	终点图标锚点
`endColor`	`string`	`#f56c6c`	终点颜色
`endTitle`	`string`	`终点`	终点 Tooltip 文案
`defaultCenter`	`[number, number]`	`[116.33393, 34.51837]`	无数据中心点
`defaultZoom`	`number`	`16`	无数据缩放

组件会过滤无法转换为有限数字的坐标；零个有效点显示“暂无轨迹数据”，单点只显示起终位置，两个及以上点自动适配范围并播放。

事件

事件	说明
`load(map)`	内部 Leaflet Map 加载完成时触发
`play`	开始播放时触发
`pause`	暂停播放时触发
`resume`	继续播放时触发
`stop`	停止播放时触发
`reset`	重置进度时触发
`finish`	`loop=false` 且播放到终点时触发
`progress(event)`	播放进度变化时触发，返回 `progress`、`point` 和 `index`

暴露方法

方法	说明
`play()`	开始播放；如果已经到终点，会从起点重新开始
`pause()`	暂停播放，移动点停留在当前位置
`resume()`	从暂停位置继续播放
`stop()`	停止播放并把移动点放回起点
`reset()`	重置播放进度到起点
`setProgress(progress)`	设置播放进度，`0` 表示起点，`1` 表示终点
`getStatus()`	获取当前播放状态
`getProgress()`	获取当前播放进度
`getMap()`	获取内部 Leaflet 地图实例

2D · TrailMap 轨迹地图 ​

使用示例 ​

Props ​

事件 ​

暴露方法 ​

2D · TrailMap 轨迹地图

使用示例

Props

事件

暴露方法