高德地图实现对应车辆的轨迹回放与轨迹的清除重绘制(浏览器支持： PathSimplifier目前依赖Canvas进行绘制，因此不支持IE9及以下浏览器)

最新推荐文章于 2024-06-04 18:06:30 发布

ProgrammarQin

最新推荐文章于 2024-06-04 18:06:30 发布

阅读量1.8w

点赞数 12

分类专栏：高德地图，JavaScript 轨迹回放文章标签：高德地图轨迹绘制清除轨迹

本文链接：https://blog.csdn.net/ProgramarQin/article/details/79506214

版权

高德地图，JavaScript 同时被 2 个专栏收录

3 篇文章 0 订阅

订阅专栏

轨迹回放

1 篇文章 0 订阅

订阅专栏

最近项目实践中接触高德地图比较多，也发现高德地图新增了一系列的UI组件库，因此遇到一些新问题也只能自己琢磨。

页面需求：查询输入框实现车辆的对应轨迹，在地图上显示相应的轨迹（此处，上一辆车的轨迹必须清除才能绘制下一辆车的运动轨迹）

自己写了个类似功能的demo效果如下：

项目中一般是通过输入车牌号并通过查询按钮请求接口得到数据并进行渲染（效果图如下）

此处直接用静态数据+两个车辆按钮查询，直接贴入代码：

<!doctype html>
<html lang="zh-CN">

<head>
    <!-- 原始地址：//webapi.amap.com/ui/1.0/ui/misc/PathSimplifier/examples/simple-demo.html -->
    <base href="//webapi.amap.com/ui/1.0/ui/misc/PathSimplifier/examples/" />
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
    <title>简单路径</title>
    <style>
    html,
    body,
    #container {
        width: 100%;
        height: 100%;
        margin: 0px;
    }
    .btn-group{
      position:absolute;
      z-index: 10;
      right: 10px;
      bottom:50px;
    }
    .btn-group button{
      background-color:cornflowerblue;
      color:#fff;
    }
    </style>
</head>

<body>
    <div id="container"></div>
    <div class="btn-group">
      <button class="btn-car1">车辆一模拟</button>    
      <button class="btn-car2">车辆二模拟</button>  
    </div>
    <script type="text/javascript" src='https://webapi.amap.com/maps?v=1.4.4&key=您申请的key值'></script>
    <!-- UI组件库 1.0 -->
    <script src="https://webapi.amap.com/ui/1.0/main.js?v=1.0.11"></script>
    <script type="text/javascript">
    //创建地图
    var map = new AMap.Map('container', {
        zoom: 4
    });
    //此处静态模拟两辆车数据：
    var Path={"car1": [
                [116.405289, 39.904987],
                [113.964458, 40.54664],
                [111.47836, 41.135964],
                [108.949297, 41.670904],
                [106.380111, 42.149509],
                [103.774185, 42.56996],
                [101.135432, 42.930601],
                [98.46826, 43.229964],
                [95.777529, 43.466798],
                [93.068486, 43.64009],
                [90.34669, 43.749086],
                [87.61792, 43.793308]
            ],
            "car2":[
            [113.964458, 40.54664],
            [98.46826, 43.229964],
            [116.405289, 39.904987],
            [103.774185, 42.56996],
            ]},navg1;
    //轨迹渲染函数，参数（Path:对应车辆的经纬度数组即轨迹相关数据）
    function renderTrace(Path){
      AMapUI.load(['ui/misc/PathSimplifier', 'lib/$'], function(PathSimplifier, $) {
        if (!PathSimplifier.supportCanvas) {
            alert('当前环境不支持 Canvas！');
            return;
        }
        var pathSimplifierIns = new PathSimplifier({
            zIndex: 100,
            //autoSetFitView:false,
            map: map, //所属的地图实例

            getPath: function(pathData, pathIndex) {

                return pathData.path;
            },
            getHoverTitle: function(pathData, pathIndex, pointIndex) {

                if (pointIndex >= 0) {
                    //point 
                    return pathData.name + '，点：' + pointIndex + '/' + pathData.path.length;
                }

                return pathData.name + '，点数量' + pathData.path.length;
            },
            renderOptions: {

                renderAllPointsIfNumberBelow: 100 //绘制路线节点，如不需要可设置为-1
            }
        });
        window.pathSimplifierIns = pathSimplifierIns;
        //设置数据
        pathSimplifierIns.setData([{
            name: '路线0',
            path:Path//传入的轨迹数据
        }]);

        //对第一条线路（即索引 0）创建一个巡航器
        navg1 = pathSimplifierIns.createPathNavigator(0, {
            loop: false, //循环播放
            speed: 1000000 //巡航速度，单位千米/小时
        });
        navg1.start();
        map.setFitView();//根据地图上添加的覆盖物分布情况，自动缩放地图到合适的视野级别，参数overlayList默认为当前地图上添加的所有覆盖物图层
    });
    }
    document.getElementsByClassName("btn-car1")[0].addEventListener("click",function(){
      renderTrace(Path.car1);
    });
    document.getElementsByClassName("btn-car2")[0].addEventListener("click",function(){
      renderTrace(Path.car2);
    });
    </script>
</body>
</html>

运行上述代码你会发现出现两条轨迹，然而，我们是想要实现将上一条轨迹清除然后重新绘制新的车辆的运动轨迹，在经过百度一系列说没办法实现轨迹清除，和通过下面两个方法都没办法清除之后

clearMap( )

删除地图上所有的覆盖物

remove(overlayers:Array)

删除地图覆盖物数组，数组为一个或多个覆盖物。

本着任何事情都能有对应的解决方法的想法，还是让自己找到了实现轨迹清除的方法，就是下面这段代码，完美的清除了上一条轨迹：

if (window.pathSimplifierIns) {
						//通过该方法清空上次传入的轨迹
						pathSimplifierIns.setData([]);
					}

首先判断是否存在对应的轨迹组件示例，如果已经存在，则将该轨迹示例进行清空（此处曾尝试设置pathSimplifierIns=null也无法清除轨迹），清空的方法为通过setData传入空数组的轨迹数据。

setData(data:Array)

设定数据源数组，并触发重新绘制。data为空时将清除显示内容。

在本例demo中，只需将setData加入renderTrace方法开头处，即可每次进行重绘~

在此，也给下导航器事件触发方法：

`start(pointIndex:number)`		开始路径巡航。 `pointIndex`用于指定巡航的起始节点索引，默认为节点索引范围（`range`）的最小值如果是浮点类型，则整数部分表示起始点索引，小数部分表示起始点和下一节点间的比例位置。比如`7.5`就表示`7~8`的中间位置
`pause()`		暂停巡航
`resume()`		恢复巡航
`stop()`		停止巡航，同时清除已经过路径（这一点不同于pause）
`destroy()`		销毁巡航器。巡航作为动画过程是非常耗费性能的，因此不再需要时应及时销毁

项目中往往还要对轨迹播放速度进行调整，只需通过如navg.setSpeed(num)进行设置即可

setSpeed(speed:number)

设定巡航器的速度，单位千米/小时

鉴于有好多朋友反馈说加上没有。因此附上最终的demo代码

<!doctype html>
<html lang="zh-CN">
 
<head>
    <!-- 原始地址：//webapi.amap.com/ui/1.0/ui/misc/PathSimplifier/examples/simple-demo.html -->
    <base href="//webapi.amap.com/ui/1.0/ui/misc/PathSimplifier/examples/" />
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
    <title>简单路径</title>
    <style>
    html,
    body,
    #container {
        width: 100%;
        height: 100%;
        margin: 0px;
    }
    .btn-group{
      position:absolute;
      z-index: 10;
      right: 10px;
      bottom:50px;
    }
    .btn-group button{
      background-color:cornflowerblue;
      color:#fff;
    }
    </style>
</head>
 
<body>
    <div id="container"></div>
    <div class="btn-group">
      <button class="btn-car1">车辆一模拟</button>    
      <button class="btn-car2">车辆二模拟</button>  
    </div>
    <script type="text/javascript" src='https://webapi.amap.com/maps?v=1.4.4&key=您申请的key值'></script>
    <!-- UI组件库 1.0 -->
    <script src="https://webapi.amap.com/ui/1.0/main.js?v=1.0.11"></script>
    <script type="text/javascript">
    //创建地图
    var map = new AMap.Map('container', {
        zoom: 4
    });
    //此处静态模拟两辆车数据：
    var Path={"car1": [
                [116.405289, 39.904987],
                [113.964458, 40.54664],
                [111.47836, 41.135964],
                [108.949297, 41.670904],
                [106.380111, 42.149509],
                [103.774185, 42.56996],
                [101.135432, 42.930601],
                [98.46826, 43.229964],
                [95.777529, 43.466798],
                [93.068486, 43.64009],
                [90.34669, 43.749086],
                [87.61792, 43.793308]
            ],
            "car2":[
            [113.964458, 40.54664],
            [98.46826, 43.229964],
            [116.405289, 39.904987],
            [103.774185, 42.56996],
            ]},navg1;
    //轨迹渲染函数，参数（Path:对应车辆的经纬度数组即轨迹相关数据）
    function renderTrace(Path){
        //判断是否已有轨迹，进行清除!!!注意，就是在此处清除了轨迹
        if(window.pathSimplifierIns){
            pathSimplifierIns.setData([]);
        }
      AMapUI.load(['ui/misc/PathSimplifier', 'lib/$'], function(PathSimplifier, $) {
        if (!PathSimplifier.supportCanvas) {
            alert('当前环境不支持 Canvas！');
            return;
        }
        var pathSimplifierIns = new PathSimplifier({
            zIndex: 100,
            //autoSetFitView:false,
            map: map, //所属的地图实例
 
            getPath: function(pathData, pathIndex) {
 
                return pathData.path;
            },
            getHoverTitle: function(pathData, pathIndex, pointIndex) {
 
                if (pointIndex >= 0) {
                    //point 
                    return pathData.name + '，点：' + pointIndex + '/' + pathData.path.length;
                }
 
                return pathData.name + '，点数量' + pathData.path.length;
            },
            renderOptions: {
 
                renderAllPointsIfNumberBelow: 100 //绘制路线节点，如不需要可设置为-1
            }
        });
        window.pathSimplifierIns = pathSimplifierIns;
        //设置数据
        pathSimplifierIns.setData([{
            name: '路线0',
            path:Path//传入的轨迹数据
        }]);
 
        //对第一条线路（即索引 0）创建一个巡航器
        navg1 = pathSimplifierIns.createPathNavigator(0, {
            loop: false, //循环播放
            speed: 1000000 //巡航速度，单位千米/小时
        });
        navg1.start();
        map.setFitView();//根据地图上添加的覆盖物分布情况，自动缩放地图到合适的视野级别，参数overlayList默认为当前地图上添加的所有覆盖物图层
    });
    }
    document.getElementsByClassName("btn-car1")[0].addEventListener("click",function(){
      renderTrace(Path.car1);
    });
    document.getElementsByClassName("btn-car2")[0].addEventListener("click",function(){
      renderTrace(Path.car2);
    });
    </script>
</body>
</html>

ProgrammarQin

关注

12
点赞
踩
24

收藏

觉得还不错? 一键收藏
7
评论
高德地图实现对应车辆的轨迹回放与轨迹的清除重绘制(浏览器支持： PathSimplifier目前依赖Canvas进行绘制，因此不支持IE9及以下浏览器)

最近项目实践中接触高德地图比较多，也发现高德地图新增了一系列的UI组件库，因此遇到一些新问题也只能自己琢磨。页面需求：查询输入框实现车辆的对应轨迹，在地图上显示相应的轨迹（此处，上一辆车的轨迹必须清除才能绘制下一辆车的运动轨迹）自己写了个类似功能的demo效果如下：项目中一般是通过输入车牌号并通过查询按钮请求接口得到数据并进行渲染（效果图如下）此处直接用静态数据+两个车辆按...
复制链接

扫一扫