轨迹动画

功能场景

可用于运动健康、出行轨迹回放等场景，支持3D模型、发光线等效果。

//mapopen-website-wiki.bj.bcebos.com/demos/VID_20230329_173236.mp4

1590746640|//mapopen-website-wiki.bj.bcebos.com/demos/newqrcodes/轨迹动画.png

扫码体验

使用产品

Android定位SDK

>

绘制动态轨迹

下载源码

//mapopen-website-wiki.bj.bcebos.com/demos/%E8%BD%A8%E8%BF%B9%E5%8A%A8%E7%94%BB/BaiduMapsApiASDemo.zip

核心接口

类

接口

描述

points(List<LatLng> points)

设置轨迹点

TraceOptions

color(int color)

设置轨迹覆盖物的颜色，颜色格式 0xAARRGGBB

colors(int[] colors)

设置渐变轨迹颜色，需要通过useColorArray(boolean use)开启

animationTime(int animationTime)

设置轨迹动画的时长

setTrackBloom(boolean isTrackBloom)

设置轨迹线的发光效果，通过setBloomSpeed(float bloomSpeed)设置发光参数，bloomSpeed （1.0f~5.0f 默认5.0f）

icon(BitmapDescriptor icon)

设置轨迹线的2D图标，需要通过setPointMove(boolean isPointMove)开启

icon3D(BM3DModelOptions bm3DModelOptions)

设置轨迹线的3D图标，需要通过setPointMove(boolean isPointMove)开启，bm3DModelOptions参考3D模型进行设置

TraceAnimationListener

onTraceAnimationUpdate(int percent)

轨迹动画更新进度回调（进度 0～100）

onTraceUpdatePosition(LatLng position)

轨迹动画更新的当前位置点回调

onTraceAnimationFinish()

轨迹动画结束回调

核心代码

JAVA

TraceOptions traceOptions = initTraceOptions();
        traceOptions.setPointMove(true);
        traceOptions.icon3D(init3DModelOptions());
        traceOptions.setTrackBloom(true);
        traceOptions.setBloomSpeed(10.0f);

// 添加轨迹动画
mTraceOverlay = mBaiDuMap.addTraceOverlay(traceOptions, traceAnimationListener);

复制

深色

复制成功

配置轨迹线信息

JAVA

/**
* 配置轨迹参数
*/
private TraceOptions initTraceOptions() {
    TraceOptions traceOptions = new TraceOptions();
    traceOptions.animationTime(4000);
    traceOptions.animate(true);
    traceOptions.animationType(TraceOptions.TraceAnimateType.TraceOverlayAnimationEasingCurveLinear);
    traceOptions.color(0xAA0000FF);
    traceOptions.setTrackMove(true);
    traceOptions.width(10);
    traceOptions.setRotateWhenTrack(false);
    traceOptions.points(getTraceLocation());
    return traceOptions;
}

复制

深色

复制成功

添加3D模型

JAVA

    /**
    * 配置3D模型参数.暂时只支持.obj/.gltf格式
    */
    private BM3DModelOptions init3DModelOptions(){
        //3d模型轨迹点只支持如下设置
        BM3DModelOptions bm3DModelOptions = new BM3DModelOptions();
        ///路径和名称为必填项
        bm3DModelOptions.setModelPath(parentPath + "/model3D");
        bm3DModelOptions.setScale(20.0f);
//        bm3DModelOptions.setZoomFixed(false);
        //文件后缀名也需要一起传入
        bm3DModelOptions.setModelName("CesiumMan");
        bm3DModelOptions.setBM3DModelType(BM3DModelOptions.BM3DModelType.BM3DModelTypeglTF);
        bm3DModelOptions.setSkeletonAnimationEnable(true);
        bm3DModelOptions.animationSpeed(2.0f);
        bm3DModelOptions.animationRepeatCount(0);

        bm3DModelOptions.setRotate(0.0f,0.0f,0.0f);
        bm3DModelOptions.setOffset(0.0f,0.0f,-100.0f);
        return bm3DModelOptions;
    }

复制

深色

复制成功

添加途径点

JAVA

/**
* @param position 轨迹动画更新的当前位置点
*/
@Override
public void onTraceUpdatePosition(LatLng position) {
    Log.i("TAG==", "onTraceUpdatePosition: " + position.toString());
    if(position == markerPosition){
        buildMarker(position);
    }
}


    public void buildMarker(LatLng position) {
    // add marker overlay
    MarkerOptions markerOptionsA = new MarkerOptions()
            .position(position)
            .icon(bitmapA)// 设置 Marker 覆盖物的图标
            .zIndex(9)// 设置 marker 覆盖物的 zIndex
            ;
    if(mMarkerA==null)
    mMarkerA = (Marker) (mBaiDuMap.addOverlay(markerOptionsA));
    ScaleAnimation scaleAnimation = new ScaleAnimation(0f,1f);
    scaleAnimation.setDuration(1500);
    if(mMarkerA != null) {
        mMarkerA.setAnimation(scaleAnimation);
        mMarkerA.startAnimation();
    }

}

复制

深色

复制成功

文档全面上新