最近出了一个新需求,需要把电工的轨迹展示在公司的系统平台上,并且需要里边有动画,还有节点的信息等。
经过查询阅读高德地图的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更加针对节点数量巨大、排布密集的路径,比如按秒记录位置的车辆行进轨迹,精细的地理边界等等。主要的功能特性包括:
- 对需要绘制的轨迹节点,在保留视觉效果的前提下,做一定的简化处理(利用Simplify.js 。举例来说,比如A点和B点,两者距离不到1像素,则可以去掉B点,只留A点;再比如A,B,C三点在一条直线上,或者,B点仅仅稍微偏离A点和C点构成的线段,那么B点就可以去掉),从而减少轨迹绘制时涉及的节点数量,提升绘制性能。
- 支持快速识别轨迹上的节点。比如鼠标在轨迹上滑动时,可以显示鼠标位置对应的节点信息。
- 内置轨迹巡航器,支持轨迹回放,标识经过路径,以及获取经过距离等等。
- 支持丰富的样式配置,覆盖轨迹线、轨迹方向、轨迹节点,以及巡航器等。
浏览器支持:
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);
经过试验,果然好使。