vue+openlayers6实现卷帘功能

1.思路

实现卷帘功能，主要是对图层进行实时擦除和绘制，要做到实时，需要用到map中的几个事件，openlayers官网关于事件的文档如下 postcompose:在呈现所有层之后触发。事件对象将没有上下文集。 postrender:在地图框架呈现后触发 precompose：在呈现层之前触发。事件对象将没有上下文集。 rendercomplete：所有的瓦片和资源都已加载完成，事件对象将没有上下文集。 ###绘制和擦除关键代码如下：

this.layer2.on('prerender',(event)=>{
                          let ctx = event.context;
                            //获得canvas渲染上下文
                            let width = ctx.canvas.width * (this.value / 100);  // 用于保存卷帘的位置
                            ctx.save();                 // 保存canvas设置
                            ctx.beginPath();            // 开始绘制路径

                            ctx.rect(width, 0, ctx.canvas.width - width, ctx.canvas.height);    // 绘制矩形
                            ctx.clip();
                        })

                        this.layer2.on('postrender', (event)=>{     // 在Bing地图渲染之后触发
                            let ctx = event.context;
                            ctx.restore();              // 恢复canvas设置
                        });

上面需要注意的是vue中用箭头函数，之前复制其他人实现的openlayers4的代码，忘了改，结果出现各种问题，使用的函数是prerender和postrender ###创建一个滑动条并绑定数据

<input type="range" style="width: 100%;position: absolute;top:50%;-webkit-appearance: none;" v-model="value"/>

<style lang="scss" scoped>
 input[type=range]::-webkit-slider-runnable-track {
        height: 0px;//设置不显示滑动条
    }
    input[type=range]:focus {
        outline: none;
    }
    input[type=range]::-webkit-slider-thumb {
        -webkit-appearance: none;
        height: 30px;
        width: 40px;
        background-color: #ff0000;
        background: url(../../assets/img/jl3.png);
        background-size: 100% 100%;
        /*border-radius: 50%; !*外观设置为圆形*!*/
        /*border: solid 0.125em #ff0e0b; !*设置边框*!*/
        /* box-shadow: 0 .125em .125em #3b4547; /*添加底部阴影*/
    }
</style>

组件更新时渲染地图(或者监视滑动块的位置的值)

 updated() {
            this.map0.render()
        },

实现效果如下

pre