Openlayers中设置定时绘制和清理直线图层

场景

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毫秒执行一次，实现清理和绘制交替进行。