该种方法针对的是openlayers3低版本的裁切方法，高版本的比较简单 （后面有时间再补充吧）
裁切代码
//
clip(evt,highlight) {
var canvas=evt.context;
canvas.save();
var coords=highlight.getGeometry().getCoordinates();
var frameState = evt.frameState;
canvas.beginPath();
if(highlight.getGeometry().getType() == 'MultiPolygon'){
for(var i=0;i<coords.length;i++){
this.createClip(coords[i][0], canvas, frameState);
}
}
else if(highlight.getGeometry().getType() == 'Polygon'){
this.createClip(coords[0], canvas, frameState);
}
canvas.clip();
},
createClip(coords, canvas, frameState) {
var viewState = frameState.viewState;
var center = viewState.center;
var resolution = viewState.resolution;
var rotation = viewState.rotation;
var pixelRatio = frameState.pixelRatio;
var size = frameState.size;
var size1=this.map.getSize();
var offsetX = Math.round(pixelRatio * size[0] / 2);
var offsetY = Math.round(pixelRatio * size[1] / 2);
var pixelScale = pixelRatio / resolution;
for (var i = 0, cout = coords.length; i < cout; i++) {
var xLen = Math.round((coords[i][0] - center[0]) * pixelScale);
var yLen = Math.round((center[1] - coords[i][1]) * pixelScale);
var x = offsetX;
var y = offsetY;
if (rotation) {
x = xLen * Math.cos(rotation) - yLen * Math.sin(rotation) + offsetX;
y = xLen * Math.sin(rotation) + yLen * Math.cos(rotation) + offsetY;
} else {
x = xLen + offsetX;
y = yLen + offsetY;
}
if (i == 0) {
canvas.moveTo(x, y);
} else {
canvas.lineTo(x, y);
}
}
canvas.closePath();
},
// 裁切
cavasLayer(layer,fea){
let _this = this
layer.on("precompose",(e)=>_this.clip(e, fea))
layer.on("postcompose", (event) => {
let ctx = event.context;
ctx.restore();
})
},
使用
this.cavasLayer(layer, fea)
比如根据行政区划对地图进行裁切
let res = require('./zhangjiagang.geojson');
let feas = new znxdmap.format.GeoJSON().readFeatures(res);
//layer 可以是任意图层，比如天地图、wms\wmts图层
this.cavasLayer(layer, feas[0])
