openlayers 实现底图切割

定义需要被切割的图层：

const base = new Tile({
	source: new XYZ({
		url: 'xxx' //地图服务地址
	}),
})

定义执行切割的图层：
（cutGeoJson为边界线geojson）

const clipLayer = new VectorLayer({
	style: null,
		source: new VectorSource({
		features: new GeoJSON().readFeatures(cutGeoJson)
	})
});

在地图初始化时，将图层添加进去。

在初始化完成后执行以下方法：

// 给被剪切的图层设定范围，避免渲染时在视口之外
clipLayer.getSource().on('addfeature', function () {
  base.setExtent(clipLayer.getSource().getExtent());
});

// 执行切割方法
const style = new Style({
  fill: new Fill({
    color: 'black',
  }),
});
base.on('postrender', function (e) {
  const vectorContext = getVectorContext(e);
  e.context.globalCompositeOperation = 'destination-in';
  clipLayer.getSource().forEachFeature(function (feature) {
    vectorContext.drawFeature(feature, style);
  });
  e.context.globalCompositeOperation = 'source-over';
});

官方示例：
https://openlayers.org/en/latest/examples/layer-clipping-vector.html