场景
Openlayers中实现地图上添加一条红色直线:
https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/118598962
在上面实现绘制一条红色直线的基础上,怎样对该红线进行清除。
在某些条件下进行绘制和清除直线,下面通过定时器来反复实现绘制和清除效果如下
注:
博客:
https://blog.csdn.net/badao_liumang_qizhi
关注公众号
霸道的程序猿
获取编程相关电子书、教程推送与免费下载。
实现
首先之前已经定义了绘制线的数据源和图层
//线的数据源 var drwaSource = new ol.source.Vector({ wrapX: false }) //线的图层 var lineVector = new ol.layer.Vector({ source: self.drwaSource });
然后要清除直线需要通过如下方法
//清除线的方法 function clearLine() { this.drwaSource.clear(); }
通过定时器实现效果
//设置定时清除线 var isclear = false; setInterval(() => { if(isclear) { this.drawLine(); isclear = false; }else{ this.clearLine(); isclear = true; } },500);
每隔500毫秒执行一次,实现清理和绘制交替进行。