地图权限控制——美化完善

https://blog.csdn.net/chaoyang89111/article/details/89471123中介绍了地图遮罩即地图权限控制的方法，但是比较粗糙，本文讲下美化过程。

先上结果：

 

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

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();
    }         
}