百度地图轨迹回放

 百度地图轨迹回放最重要的点在于绘制路线，添加定点（标志点），然后结合计时器完成轨道的绘制，定点位置，播放/结束/暂停/继续

<Map

            ref={mapRef}

            center={center}

            zoom={18}

            tilt={20}

            style={{ height: 512 }}

            enableScrollWheelZoom

        >

            {pathPoints.map((x, index) => {

                if (index === pathPoints.length - 1) {

                    return <Marker key={x.lng} position={x} icon={'loc_red'} isTop={true} title={pointTimestamps[index]} />

                }

                return <Marker key={x.lng} position={x} title={pointTimestamps[index]} icon={new BMapGL.Icon('https://bpciot-public-data.obs.cn-east-3.myhuaweicloud.com/view_in_ar_blue_24dp.svg', new BMapGL.Size(24, 24))} />

            })}

            <Polyline

                path={pathPoints}

                strokeColor='green'

                strokeWeight={1}

                strokeStyle='dashed'

            />

            <ZoomControl />

        </Map>

1.Polyline方法先绘制好路线图

2.Marker添加定点位置

3.利用计时器开始播放

setTrackAni(new BMapGLLib.TrackAnimation()）相关使用方法可以查看百度api

jspopularGL | 百度地图API SDK (baidu.com)

点击后当前按钮的开始/结束/暂停/继续

hanleTbalehandoff=(startTrackAni )={

     if (startTrackAni === CANCEL) {

            trackAni?.cancel();//结束

        } else if (startTrackAni === PLAY) {

            trackAni?.start();//开始

        } else if (startTrackAni === CONTINUE) {

            trackAni?.continue();//继续

        } else if (startTrackAni === PAUSE) {

            trackAni?.pause();//暂停

        }

}

利用计时器完成播放/停止/暂停/继续

setTimeout(() => {

            if (!initialPoint.equals(new BMapGL.Point(0, 0))) {

                setCenter(initialPoint)

            } else {

                setCenter(currentPoint)

            }

        }, 500)