高德地图轨迹展示

Posted shangendian

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了高德地图轨迹展示相关的知识,希望对你有一定的参考价值。

  最近出了一个新需求,需要把电工的轨迹展示在公司的系统平台上,并且需要里边有动画,还有节点的信息等。

  经过查询阅读高德地图的API文档,找到了高德地图的Polyline类,这个Polyline类是高德地图中用来在地图上根据给的坐标集合画成折线展示的。

  AMap.Polyline(opt:PolylineOptions)

  构造折线对象,通过PolylineOptions指定折线样式 

  绘制轨迹
  var polyline = new AMap.Polyline({
    map: map,
    path: lineArr,
    strokeColor: "#00A", //线颜色
    strokeOpacity: 1, //线透明度
    strokeWeight: 3, //线宽
    strokeStyle: "solid" //线样式
  });

  然而后来发现,这个Polyline类满足不了我现在的需求,于是我又找到了高德地图中ui组件库中关于轨迹展示的组件 PathSimplifier(轨迹展示)。

  下边是关于PathSimplifier的一下介绍(来自官方文档)

  PathSimplifier是一个轨迹展示组件,相比 AMap.Polyline (折线),PathSimplifier更加针对节点数量巨大、排布密集的路径,比如按秒记录位置的车辆行进轨迹,精细的地理边界等等。主要的功能特性包括:

  1. 对需要绘制的轨迹节点,在保留视觉效果的前提下,做一定的简化处理(利用Simplify.js 。举例来说,比如A点和B点,两者距离不到1像素,则可以去掉B点,只留A点;再比如A,B,C三点在一条直线上,或者,B点仅仅稍微偏离A点和C点构成的线段,那么B点就可以去掉),从而减少轨迹绘制时涉及的节点数量,提升绘制性能。
  2. 支持快速识别轨迹上的节点。比如鼠标在轨迹上滑动时,可以显示鼠标位置对应的节点信息。
  3. 内置轨迹巡航器,支持轨迹回放,标识经过路径,以及获取经过距离等等。
  4. 支持丰富的样式配置,覆盖轨迹线、轨迹方向、轨迹节点,以及巡航器等。

  浏览器支持:

  PathSimplifier目前依赖Canvas进行绘制,因此不支持IE9及以下浏览器。

  然后一切都很顺利,在平台上的地图上完美展现了电工的轨迹线,并且利用PathSimplifier提供的巡航器进行循环动画,还根据它的配置项,添加事件展示信息。

  然后,就发现了一个问题,当我点击其他的功能的时候,这个轨迹竟然没消失,是的,我不能把这个东西清除了。

  经过查阅文档和别人的一些经验还有自己的一些测试,发现,现有的Map类里边的方法都清除不了它,即使是最厉害的号称清除一切覆盖物的clearMap()都拿它没办法,着实让人很苦恼,我当初是把new 这个PathSimplifier构造函数的方法封装在一个自定义方法里边,每次调用都会执行一次这个自定义方法,等于每次都会重新new一个PathSimplifier对象,然后每次都会新添加一个图层,(通过map.getLayers()方法可以查询当前地图的图层信息),中间有试过每次调用先清除PathSimplifier对象,然后并没有成功,后来想,既然它是一个图层,那么我每次调用的时候判断如果不是第一次调动那么就利用map.setLayers(arr)清除第一次调用时的图层,这样就可以达到清除上次轨迹的目的。

  var layerNum = 0;//定义成全局变量,这样在平台的其他地方可可以判断然后进行操作  

  var arr = map.getLayers();
    if(layerNum > 1){
    arr.pop();
  }
  map.setLayers(arr);

  经过试验,果然好使。

以上是关于高德地图轨迹展示的主要内容,如果未能解决你的问题,请参考以下文章

高德地图-轨迹回放

高德地图使用-车辆轨迹

百度地图绘制运动轨迹技巧

高德地图API简单使用

高德地图上如何标记多个地

百度地图上如何实现轨迹回放