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<coords.length;i++){
                createClip(coords[i][0], canvas);
            }
        }
        else if(highlight.getGeometry().getType() == 'Polygon'){
            createClip(coords[0], canvas);
        }
        canvas.clip();

    }

    function createClip(coords, canvas) {
        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();
    }

    map.on('singleclick', function(evt) {
        if (evt.dragging) {
            return;
        }
        var pixel = map.getEventPixel(evt.originalEvent);
        displayFeatureInfo(pixel);
    });

    map.on('postcompose', function(event) {
        var ctx = event.context;
        ctx.restore();
    });

效果：

image.png image.png