高德地图轨迹展示

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

　　经过查询阅读高德地图的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);

　　经过试验，果然好使。

转载于:https://www.cnblogs.com/shangendian/p/8533358.html