当前位置: 首页 > 工具软件 > Turf > 使用案例 >

mapbox+turf实现轨迹回放组件

符国安
2023-12-01
     **最近项目有个需求需要实现轨迹回放组件的封装,要求轨迹线颜色可配置,轨迹回放速度可调,移动物体可配置,能够获取轨迹进度,拖动轨迹进度实现轨迹移动等等需求**

轨迹组件类

import { point as pointHelper, lineString as lineHelper, featureCollection as featureHelper } from '@turf/helpers'
import bearing from '@turf/bearing'
import lineLength from '@turf/length'
import along from '@turf/along'
import midpoint from '@turf/midpoint'

/**
 * 轨迹回放专题图类(基于 mapbox原生 + turf)
 */
export class TrackPlaybackMap {

    // 动画对象ID
    private animateId = 0;

    // 动态轨迹函数
    private animateFunction: any;

    // 轨迹运行状态
    private animateStatus = '';

    // 初始航线 未打散
    private line: any;

    // 打散后的航线
    private newroute: any;

    // 移动中的航线
    private route: any;

    // 方向点
    private arrow: any = {
        "type": "FeatureCollection",
        "features": [[]]
    };

    
 类似资料: