openlayers根据feature进行裁切（低版本）

该种方法针对的是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])