遮罩层

项目中有时候需要突出显示（或者只显示）需要的区域，遮罩其他不需要的区域，这就是经常遇到的地图权限问题，如下图所示：

只用openlayers是无法解决的，需要配合H5中的canvas来实现。

var bianjieSource=new ol.source.Vector({
                 features: (new ol.format.GeoJSON({featureProjection: 'EPSG:4326'})).readFeatures(data),
            })

vec_c.on('precompose', clip);
cva_c.on('precompose', clip);

function clip(evt) {
	var canvas=evt.context;
	canvas.save();
	var coords = bianjieSource.getFeatures()[0].getGeometry().getCoordinates();
	canvas.beginPath();
	createClip(coords[0], canvas);
	canvas.clip();
}

function createClip(coords, canvas) {
	for (var i = 0, cout = coords.length; i < cout; i++) {
		//获取屏幕坐标
		var screenCoord = map.getPixelFromCoordinate(coords[i]);
		var x = screenCoord[0],
			y = screenCoord[1];
		if (i === 0) {
			canvas.moveTo(x, y);
		} else {
			canvas.lineTo(x, y);
		}
	}
	canvas.closePath();
	//设置边框
	canvas.strokeStyle = "#dedede";
	canvas.lineWidth = 2;
	canvas.stroke();
}
vec_c.on('postcompose', function(event) {
	var ctx = event.context;
	ctx.restore();
});
cva_c.on('postcompose', function(event) {
	var ctx = event.context;
	ctx.restore();
});

其中的data是边界数据。

介绍了地图遮罩即地图权限控制的方法，但是比较粗糙，本文讲下美化过程。

先上结果：

主要是对边界线进行了美化及平滑，达到这种悬浮的效果。主要修改的代码如下：

function createClip(coords, canvas,type) {
    for (var i = 0, cout = coords.length; i < cout; i++) {
        //获取屏幕坐标
        var screenCoord = map.getPixelFromCoordinate(coords[i]);
        var x = screenCoord[0],
        y = screenCoord[1];
        if (i === 0) {
            canvas.moveTo(x, y);
        } else if(i<coords.length-1){
            var screenCoord1 = map.getPixelFromCoordinate(coords[i+1]);
            var x1 = screenCoord1[0],
            y1 = screenCoord1[1];
            //canvas.lineTo(x, y);   lineTo是画直线；quadraticCurveTo是画贝塞尔曲线
            canvas.quadraticCurveTo(x, y,(x+x1)/2,(y+y1)/2);
        }else{
            canvas.quadraticCurveTo(x-1, y-1,x,y);
        }
    }
    if(type=='ditu'){
        canvas.closePath();
        //设置边框
        canvas.shadowColor = "#000000";     
        canvas.shadowOffsetX = 4;     
        canvas.shadowOffsetY = 4;     
        canvas.shadowBlur = 10;     
        canvas.strokeStyle = "#dedede";     
        canvas.lineWidth = 4;     
        canvas.stroke();
    }         
}