MapBoxMap 之 轨迹回放

最新推荐文章于 2024-03-12 15:56:50 发布
最新推荐文章于 2024-03-12 15:56:50 发布
阅读量2.4k 收藏 4
点赞数
分类专栏： MapBoxMap 地图使用指南 文章标签： mapbox 轨迹 轨迹回放
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Mr_theSun/article/details/108733037
版权

轨迹回放功能主要使用ValueAnimator对轨迹动态绘制。

view on github

本篇是基于LineLayer的实际使用，开发当中也确实会遇到这样的需求。

先上图

                          

                        图一                                                                     图二

可以看出主要的3个元素。
1.运动的点
2.轨迹路线
3.轨迹线灰色背景（单纯的为了更好的显示效果存在）

总体思路:

一、图一实现

 1.首先获取List<Point> point （轨迹点数据源）。

 2.绘制红色路线与灰色背景路线。

 3. 使用ValueAnimator动画遍历取出，动态更新点的位置。

二、图二实现

 与图一的区别在于红色路线也是动态绘制的。

 1.首先获取List<Point> point （轨迹点数据源）。

 2.绘制灰色背景路线。

 3. 使用ValueAnimator动画遍历取出，动态更新点的位置同时动态绘制红色路线。

直接上代码:

代码中已经尽量添加了详细的注释。

MarkerFollowingRouteActivity:
package com.ming.androidmapbox.layers;

import android.animation.ObjectAnimator;
import android.animation.ValueAnimator;
import android.graphics.Color;
import android.os.Bundle;
import android.os.Handler;
import android.view.View;
import android.view.animation.LinearInterpolator;

import androidx.annotation.NonNull;
import androidx.appcompat.app.AppCompatActivity;

import com.mapbox.geojson.Feature;
import com.mapbox.geojson.FeatureCollection;
import com.mapbox.geojson.LineString;
import com.mapbox.geojson.Point;
import com.mapbox.mapboxsdk.Mapbox;
import com.mapbox.mapboxsdk.geometry.LatLng;
import com.mapbox.mapboxsdk.maps.MapView;
import com.mapbox.mapboxsdk.maps.MapboxMap;
import com.mapbox.mapboxsdk.maps.OnMapReadyCallback;
import com.mapbox.mapboxsdk.maps.Style;
import com.mapbox.mapboxsdk.style.layers.LineLayer;
import com.mapbox.mapboxsdk.style.layers.SymbolLayer;
import com.mapbox.mapboxsdk.style.sources.GeoJsonSource;
import com.ming.androidmapbox.R;

import java.util.ArrayList;
import java.util.List;

import static com.mapbox.mapboxsdk.style.layers.PropertyFactory.iconAllowOverlap;
import static com.mapbox.mapboxsdk.style.layers.PropertyFactory.iconIgnorePlacement;
import static com.mapbox.mapboxsdk.style.layers.PropertyFactory.iconImage;
import static com.mapbox.mapboxsdk.style.layers.PropertyFactory.iconSize;
import static com.mapbox.mapboxsdk.style.layers.PropertyFactory.lineColor;
import static com.mapbox.mapboxsdk.style.layers.PropertyFactory.lineWidth;

/**
 * 标记沿GeoJSON路线行驶
 */
public class MarkerFollowingRouteActivity extends AppCompatActivity implements View.OnClickListener {

    private static final String TAG = "MarkerFollowingRoute";
    private static final String DOT_SOURCE_ID = "dot-source-id";
    private static final String DOT_LAYER_ID = "dot-layer-id";
    private static final String DOT_IMAGE_ID = "dot-image-id";
    private static final String LINE_SOURCE_ID = "line-source-id";
    private static final String LINE_LAYER_ID = "line-layer-id";
    private static final String LINE_BG_SOURCE_ID = "line-bg-source-id";
    private static final String LINE_BG_LAYER_ID = "line-bg-layer-id";

    private MapView mapView;

    private int count = 0;
    private Handler handler;
    private Runnable runnable;
    private GeoJsonSource dotGeoJsonSource;
    private ValueAnimator markerIconAnimator;
    private LatLng markerIconCurrentLocation;
    private List<Point> routeCoordinates;

    private boolean isFollowMode;
    private GeoJsonSource lineGeoJsonSource;
    private List<Point> followRouteCoordinates = new ArrayList<>();

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        Mapbox.getInstance(this, getString(R.string.mapbox_access_token));

        setContentView(R.layout.activity_lab_marker_following_route);

        mapView = findViewById(R.id.mapView);
        mapView.onCreate(savedInstanceState);
        mapView.getMapAsync(new OnMapReadyCallback() {
            @Override
            public void onMapReady(@NonNull MapboxMap mapboxMap) {
                mapboxMap.setStyle(Style.LIGHT, new Style.OnStyleLoaded() {
                    @Override
                    public void onStyleLoaded(@NonNull Style style) {
                        initCoordinates();
                        initSources(style);
                        initBgDotLinePath(style);
                        initDotLinePath(style);
                        initDotLayer(style);
                        //按钮监听
                        findViewById(R.id.btn_route).setOnClickListener(MarkerFollowingRouteActivity.this);
                        findViewById(R.id.btn_route_follow).setOnClickListener(MarkerFollowingRouteActivity.this);
                    }
                });
            }
        });
    }

    /**
     * 创造轨迹点数据源，手动添加一组点
     */
    private void initCoordinates() {
        routeCoordinates = new ArrayList<>();
        routeCoordinates.add(Point.fromLngLat(-77.044211, 38.852924));
        routeCoordinates.add(Point.fromLngLat(-77.045659, 38.860158));
        routeCoordinates.add(Point.fromLngLat(-77.044232, 38.862326));
        routeCoordinates.add(Point.fromLngLat(-77.040879, 38.865454));
        routeCoordinates.add(Point.fromLngLat(-77.039936, 38.867698));
        routeCoordinates.add(Point.fromLngLat(-77.040338, 38.86943));
        routeCoordinates.add(Point.fromLngLat(-77.04264, 38.872528));
        routeCoordinates.add(Point.fromLngLat(-77.03696, 38.878424));
        routeCoordinates.add(Point.fromLngLat(-77.032309, 38.87937));
        routeCoordinates.add(Point.fromLngLat(-77.030056, 38.880945));
        routeCoordinates.add(Point.fromLngLat(-77.027645, 38.881779));
        routeCoordinates.add(Point.fromLngLat(-77.026946, 38.882645));
        routeCoordinates.add(Point.fromLngLat(-77.026942, 38.885502));
        routeCoordinates.add(Point.fromLngLat(-77.028054, 38.887449));
        routeCoordinates.add(Point.fromLngLat(-77.02806, 38.892088));
        routeCoordinates.add(Point.fromLngLat(-77.03364, 38.892108));
        routeCoordinates.add(Point.fromLngLat(-77.033643, 38.899926));
    }

    /**
     * 初始化各个源
     * @param loadedMapStyle 
     */
    private void initSources(@NonNull Style loadedMapStyle) {
        //根据轨迹点数据源构建FeatureCollection
        FeatureCollection featureCollection = FeatureCollection.fromFeatures(
                new Feature[]{Feature.fromGeometry(LineString.fromLngLats(routeCoordinates))});
        //添加点的源
        dotGeoJsonSource = new GeoJsonSource(DOT_SOURCE_ID, featureCollection);
        loadedMapStyle.addSource(dotGeoJsonSource);
        //添加红色的线的源
        lineGeoJsonSource = new GeoJsonSource(LINE_SOURCE_ID, featureCollection);
        loadedMapStyle.addSource(lineGeoJsonSource);
        //添加灰色背景线的源
        GeoJsonSource lineBgGeoJsonSource = new GeoJsonSource(LINE_BG_SOURCE_ID, featureCollection);
        loadedMapStyle.addSource(lineBgGeoJsonSource);
    }

    /**
     * 添加灰色背景线
     *
     * @param loadedMapStyle
     */
    private void initBgDotLinePath(@NonNull Style loadedMapStyle) {
        //添加灰色背景线的layer
        loadedMapStyle.addLayer(new LineLayer(LINE_BG_LAYER_ID, LINE_BG_SOURCE_ID).withProperties(
                lineColor(Color.GRAY),
                lineWidth(10f)
        ));
    }

    /**
     * 添加红色的线
     *
     * @param loadedMapStyle
     */
    private void initDotLinePath(@NonNull Style loadedMapStyle) {
        //添加红色的线的layer
        loadedMapStyle.addLayer(new LineLayer(LINE_LAYER_ID, LINE_SOURCE_ID).withProperties(
                lineColor(Color.parseColor("#F13C6E")),
                lineWidth(4f)
        ));
    }

    /**
     * 添加运动的点
     *
     * @param loadedMapStyle
     */
    private void initDotLayer(@NonNull Style loadedMapStyle) {
        //添加点的图片资源
        loadedMapStyle.addImage(DOT_IMAGE_ID, getResources().getDrawable(R.drawable.pink_dot));
        //添加点的layer
        loadedMapStyle.addLayer(new SymbolLayer(DOT_LAYER_ID, DOT_SOURCE_ID).withProperties(
                iconImage(DOT_IMAGE_ID),
                iconSize(1f),
                iconIgnorePlacement(true),
                iconAllowOverlap(true)
        ));
    }

    @Override
    public void onResume() {
        super.onResume();
        mapView.onResume();
        // 恢复活动后，我们将重新启动标记动画。
        if (handler != null && runnable != null) {
            handler.post(runnable);
        }
    }

    @Override
    public void onPause() {
        super.onPause();
        mapView.onPause();
        //检查标记当前是否正在设置动画，如果是，则我们暂停动画，以便当活动不在视图中时不使用资源。
        if (handler != null && runnable != null) {
            handler.removeCallbacksAndMessages(null);
        }
        if (markerIconAnimator != null) {
            markerIconAnimator.cancel();
        }
    }

    @Override
    protected void onStart() {
        super.onStart();
        mapView.onStart();
    }

    @Override
    protected void onStop() {
        super.onStop();
        mapView.onStop();
    }

    @Override
    public void onLowMemory() {
        super.onLowMemory();
        mapView.onLowMemory();
    }

    @Override
    protected void onDestroy() {
        super.onDestroy();
        mapView.onDestroy();
    }

    @Override
    protected void onSaveInstanceState(@NonNull Bundle outState) {
        super.onSaveInstanceState(outState);
        mapView.onSaveInstanceState(outState);
    }

    @Override
    public void onClick(View v) {
        //动画执行过程中不允许点击
        if (markerIconAnimator != null && markerIconAnimator.isRunning()) {
            return;
        }
        resetParams();
        switch (v.getId()) {
            case R.id.btn_route:
                initRunnable(false);
                break;

            case R.id.btn_route_follow:
                initRunnable(true);
                break;

            default:
                break;
        }
    }

    /**
     * 设置重复逻辑以沿路径移动图标。
     */
    private void initRunnable(final boolean isFollow) {
        isFollowMode = isFollow;
       // ValueAnimator用于在GeoJSON点之间移动标记，是线性完成的。该处理程序用于沿着GeoJSON点移动标记。
        handler = new Handler();
        runnable = new Runnable() {
            @Override
            public void run() {
                //检查是否在列表的末尾，如果是停止处理程序。
                if ((routeCoordinates.size() - 1 > count)) {
                    //下一个要移动的点的位置
                    Point nextLocation = routeCoordinates.get(count + 1);
                    //如果动画已开始就取消
                    if (markerIconAnimator != null && markerIconAnimator.isStarted()) {
                        markerIconCurrentLocation = (LatLng) markerIconAnimator.getAnimatedValue();
                        markerIconAnimator.cancel();
                    }
                    //取出第一个点
                    LatLng firstLocation = new LatLng(routeCoordinates.get(0).latitude(), routeCoordinates.get(0).longitude());
                    //构建markerIconAnimator
                    markerIconAnimator = ObjectAnimator
                            .ofObject(AnimalCons.LATLNG_EVALUATOR, count == 0 || markerIconCurrentLocation == null
                                            ? firstLocation
                                            : markerIconCurrentLocation,
                                    new LatLng(nextLocation.latitude(), nextLocation.longitude()))
                            .setDuration(500);
                    markerIconAnimator.setInterpolator(new LinearInterpolator());

                    markerIconAnimator.addUpdateListener(animatorUpdateListener);
                   
                    markerIconAnimator.start();

                    //逻辑后再自增，保持当前点数不变。
                    count++;

                    //一旦完成，我们就需要在ValueAnimator完成后再次执行处理程序来重复整个过程。
                    handler.postDelayed(this, 500);
                } else {
                    //复位
                    resetParams();
                }
            }
        };
        handler.post(runnable);
    }

    /**
     * 重置参数
     */
    private void resetParams() {
        count = 0;
        markerIconCurrentLocation = null;
        isFollowMode = false;
        followRouteCoordinates.clear();
    }

    /**
     * ValueAnimator提供更新值时的监听
     */
    private final ValueAnimator.AnimatorUpdateListener animatorUpdateListener =
            new ValueAnimator.AnimatorUpdateListener() {
                @Override
                public void onAnimationUpdate(ValueAnimator valueAnimator) {
                    LatLng animatedPosition = (LatLng) valueAnimator.getAnimatedValue();
                    Point point = Point.fromLngLat(
                            animatedPosition.getLongitude(), animatedPosition.getLatitude());
                    //动态更新点的位置
                    if (dotGeoJsonSource != null) {
                        dotGeoJsonSource.setGeoJson(point);
                    }
                    //如果是跟随模式，动态绘制红色路线
                    if (isFollowMode) {
                        if (lineGeoJsonSource != null) {
                            followRouteCoordinates.add(point);
                            FeatureCollection featureCollection = FeatureCollection.fromFeatures(
                                    new Feature[]{Feature.fromGeometry(LineString.fromLngLats(followRouteCoordinates))});
                            lineGeoJsonSource.setGeoJson(featureCollection);
                        }
                    }
                }
            };
}

布局文件：

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:mapbox="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".layers.MarkerFollowingRouteActivity">

    <com.mapbox.mapboxsdk.maps.MapView
        android:id="@+id/mapView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        mapbox:mapbox_cameraTargetLat="38.875"
        mapbox:mapbox_cameraTargetLng="-77.035"
        mapbox:mapbox_cameraZoom="13">

        <Button
            android:id="@+id/btn_route"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="标记沿路线行驶" />

        <Button
            android:id="@+id/btn_route_follow"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="end"
            android:text="标记沿路线跟随" />
    </com.mapbox.mapboxsdk.maps.MapView>

</FrameLayout>

圆点图片：

mr_sunming
关注
  • 0
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
百度地图API实现轨迹回放
09-23
使用百度地图API实现轨迹回放
mapbox+turf实现轨迹回放组件
nswdbb520的博客
03-10 937
**最近项目有个需求需要实现轨迹回放组件的封装，要求轨迹线颜色可配置，轨迹回放速度可调，移动物体可配置，能够获取轨迹进度，拖动轨迹进度实现轨迹移动等等需求** 轨迹组件类 import { point as pointHelper, lineString as lineHelper, featureCollection as featureHelper } from '@turf/helpers' import bearing from '@turf/bearing' import lineLe...
MapBox添加带箭头的轨迹线
最新发布
Mozifei73的博客
03-12 470
【代码】MapBox添加带箭头的轨迹线。
canvas轨迹回放功能实现
08-28
主要介绍了canvas轨迹回放功能实现过程以及相关的代码整理，跟着小编一起学习下吧。
轨迹球回放
04-15
用android studio简单实现轨迹回放功能，亲测可用，一般需要配置gradle环境
arcgis轨迹回放
07-27
基于arcgis for js 下的轨迹回放。如需人员定位 插旗督导等功能可联系本人。
echarts+mapbox 轨迹热力图
11-14
echarts+mapbox渲染实现轨迹热力图的可视化展示，数据均为模拟数据。
Mapbox轨迹回放
weixin_34128839的博客
06-09 797
    轨迹回放是webgis中的常见功能，是一种被客户喜闻乐见的GIS动画。     动画是一种短时间内不停重绘达到不断运动的效果。本文中轨迹回放就是事先计算好所需要的点，后面再进行播放。     整体的思路也不复杂，设定总共有一千个点插入，计算出来每个点间隔的步长，我们只要往大于步长的每条线段中插入需要点就好，小于等于步长的线段则取用它的尾部节点。 只有两点的线段进行增密就很简单了，求出线段长...
mapboxGL轨迹展示与播放
LZUGIS
12-20 2923
历史轨迹回放是GIS很常见的一个功能，本文结合turf.js实现轨迹的展示与播放动画。
16.gis车辆轨迹回放之mapbox-gl
yaojindou0的博客
08-24 526
基于mapboxgl的车辆轨迹回放
SuperMap IClient车辆轨迹回放
08-21
根据点生成线，车辆根据轨迹进行动画播放效果，涉及animatorVector
Leaflet实现路径轨迹回放
11-07
基于Leaflet实现路径轨迹回放功能，另外对Leaflet.Marker类进行扩展，支持设置图标旋转角度
MapBox GL JS动态空间数据渲染策略
ScapeD的博客
03-05 2498
动态空间数据是指面向主题的、集成的、动态更新的、持久的空间数据集合。 在开发过程中经常用到动态数据：数据某个属性需要实时更新。例如：全省各地区的污染值数据，污染值数据是实时更新的。 如果我们想按照污染值对地区渲染不同的颜色，并可以在前端查询历史数据，我们无法按照传统的方法，将污染值信息作为一个字段将其发布成服务，因为这个字段实时更新，如果要实时更新修改数据服务，会非常麻烦，如果还想查询历史数据...
轨迹回放与echarts图表响应变化（基于mapbox/mineMap）此方式适用于目前绝大部分地图服务
qq_873366938的博客
05-14 1911
一：需求分析 1.场景：多数道路车辆信息都会设计到历史轨迹回放，包含当前车辆信息，道路信息，已经随之变化的响应数据变更，常采用图表形式展现 2：效果展示静态： 二 核心分析 轨迹 要素：点[经纬度]，车头的方向（保证车的反向是当前的行进方向），速度(车的行驶速度) 2.图表联动时数据的传输：当前点位与之对应的变化图表的数据应该时同步的 三 解决方案 1.了解可以实时播放的数据处理方式： 1-1:后端提供接口，按照约定的时间间隔实时获取 1-2：前端一次获取，使用定时器触发 利弊分析：后端实时获取可以省去
运动APP视频轨迹回放分享实现
m0_56146626的博客
01-05 392
喜欢户外运动的朋友一般都应该使用过运动APP(keep, 咕咚，悦跑圈，国外的Strava等)的一项功能，就是运动轨迹视频分享，分享到朋友圈或是运动群的圈子里。笔者本身平常也是喜欢户外跑、骑行、爬山等户外运动，也跑过半马、全马，疫情原因之前报的杭州的全马也延期了好几次了。回归正题，本文笔者基于自己的思想实现运动轨迹回放的一套算法策略，实现本身是基于Mapbox地图的，但是其实可以套用在任何地图都可以实现，基本可以脱离地图SDK的API。Mapbox 10 版本之后的官方给出的Demo里已经有类似轨迹回放的C
Mapbox实现动态轨迹
qq_44741716的博客
11-10 2067
基于Mapbox实现动态轨迹
Mapbox 添加标记点（一）
不同场景下的水平居中
10-08 2684
效果图： 实现： map组件： <template> <div style="height: 100%; width: 100%; text-align: left"> <div ref="basicMapbox" :style="mapSize" class="mapClass"></div> </div> </template> <script> import mapboxgl from 'mapbox
mapbox-gl封装轨迹动画图层
qq_37987033的博客
10-28 1506
mapbox轨迹回放图层封装
vue leaflet轨迹回放
02-22
而轨迹回放是指在地图上展示某个物体或者人员的历史轨迹。 要实现Vue Leaflet轨迹回放，可以按照以下步骤进行： 1. 安装Vue Leaflet：使用npm或者yarn安装Vue Leaflet库。 2. 创建地图组件：在Vue.js应用程序中...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值