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

今天药忘吃喽~ 2022-10-19 04:13 370阅读 0赞

# 场景 #

Openlayers中实现地图上添加一条红色直线：

[https://blog.csdn.net/BADAO\_LIUMANG\_QIZHI/article/details/118598962][https_blog.csdn.net_BADAO_LIUMANG_QIZHI_article_details_118598962]

在上面实现绘制一条红色直线的基础上，怎样对该红线进行清除。

在某些条件下进行绘制和清除直线，下面通过定时器来反复实现绘制和清除效果如下

![20210709103052307.gif][]

注：

博客：  
[https://blog.csdn.net/badao\_liumang\_qizhi][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毫秒执行一次，实现清理和绘制交替进行。

[https_blog.csdn.net_BADAO_LIUMANG_QIZHI_article_details_118598962]: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/118598962
[20210709103052307.gif]: /images/20221005/36e82e5eef404ea08374492193158bd3.png
[https_blog.csdn.net_badao_liumang_qizhi]: https://blog.csdn.net/badao_liumang_qizhi