openlayers：图层裁剪

目的：根据几何要素，对完整的瓦片图层进行裁剪，只显示几何形状内的图层部分。

注意：图层prerender事件的触发条件，图层刚渲染完毕时。

//图层裁剪 只显示geometry几何区域内的范围
    static layerClip(layer, geometry) {
        layer.on('prerender', function (event) {
            //获取上下文
            var ctx = event.context;
            //转为ol的矢量对象
            var vecCtx = getVectorContext(event);
            //这里必须在保存状态之前修改为透明色
            vecCtx.setStyle(new Style({
                fill: new Fill({
                    color: '#ffffff00'
                })
            }))
            //这里的ctx已经被更改 save保存更改的ctx
            ctx.save();
            //绘制之前创建的多边形
            vecCtx.drawGeometry(geometry);
            // ctx.stroke();
            //将当前画布的绘制区域设置为剪切区域，只有位于剪切区域内的图形部分会被显示，超出剪切区域的部分将被隐藏
            ctx.clip();

        });
        //监听渲染完成事件postrender
        layer.on('postrender', function (event) {
            //获取上下文
            var ctx = event.context;
            //恢复之前保存的绘图状态，否则会卡在这里不能进行任何操作
            ctx.restore();
        });
    }

参考：openlayers6/7 行政区划裁剪 只显示某个区域 示例为天地图_天地图单独显示-CSDN博客