canvas切割地图

利用multipolygon切割前端地图测试，代码如下：

 var map = new ol.Map({
        layers: [
            new ol.layer.Tile({
                source: new ol.source.OSM()
            }),
            new ol.layer.Image({
                source: new ol.source.ImageVector({
                    source: new ol.source.Vector({
                        url: 'https://openlayers.org/en/v4.2.0/examples/data/geojson/countries.geojson',
                        format: new ol.format.GeoJSON()
                    }),
                    style: new ol.style.Style({
                        fill: new ol.style.Fill({
                            color: 'rgba(255, 255, 255, 0.6)'
                        }),
                        stroke: new ol.style.Stroke({
                            color: '#319FD3',
                            width: 1
                        })
                    })
                })
            })
        ],
        target: 'map',
        view: new ol.View({
            center: [0, 0],
            zoom: 1
        })
    });

    var featureOverlay = new ol.layer.Vector({
        source: new ol.source.Vector(),
        map: map,
        style: new ol.style.Style({
            stroke: new ol.style.Stroke({
                color: '#f00',
                width: 1
            }),
            fill: new ol.style.Fill({
                color: 'rgba(255,0,0,0.1)'
            })
        })
    });

    var highlight;

    var displayFeatureInfo = function(pixel) {

        var feature = map.forEachFeatureAtPixel(pixel, function(feature) {
            return feature;
        });

        var info = document.getElementById('info');
        if (feature) {
            info.innerHTML = feature.getId() + ': ' + feature.get('name');
        } else {
            info.innerHTML = ' ';
        }

        if (feature !== highlight) {
            if (highlight) {
                featureOverlay.getSource().removeFeature(highlight);
            }
            if (feature) {
                featureOverlay.getSource().addFeature(feature);
            }
            highlight = feature;
        }

        map.render();
        map.on('precompose',clip)
    };
 var center,pixelScale,offsetX,offsetY,rotation;
 function clip(evt) {
        var canvas=evt.context;
        canvas.save();
        var coords=highlight.getGeometry().getCoordinates();
        var frameState = evt.frameState;
        var pixelRatio = frameState.pixelRatio;
        var viewState = frameState.viewState;
        center = viewState.center;
        var projection = viewState.projection;
        var resolution = viewState.resolution;
        rotation = viewState.rotation;
        var size = frameState.size;
        var size1=map.getSize();
        offsetX = Math.round(pixelRatio * size[0] / 2);
        offsetY = Math.round(pixelRatio * size[1] / 2);
        pixelScale = pixelRatio / resolution;

        canvas.beginPath();
        if(highlight.getGeometry().getType() == 'MultiPolygon'){
            for(var i=0;i

效果：

image.png

image.png