百度地图 对省份/城市边界描边处理，省市外添加半透明遮罩

项目中有这样一个需求，使用百度地图，对河北省省边界进行描边，省份以外添加半透明遮罩。

一、先封装一个通用方法

setTimeout(function(){
    // 省/市外 添加遮罩
    getBoundary('河北省');
}, 1000);
//指定省市进行描边处理，省市外进行半透明遮盖。
function getBoundary(city){
    var bdary = new BMap.Boundary();
    bdary.get(city, function(rs){//获取行政区域
        map.clearOverlays();//清除地图覆盖物
        //思路：利用行政区划点的集合与外围自定义东南西北形成一个环形遮罩层
        //1.获取选中行政区划边框点的集合rs.boundaries[0]
        var strs = new Array();
        strs = rs.boundaries[0].split(";");
        var ENWS = "";
        for (var i=0;i<strs.length;i++) {
            ENWS += strs[i] + ";"
        }
        //2.自定义外围边框点的集合
        var E_JW = "170.672126, 39.623555;";        //东
        var EN_JW = "170.672126, 81.291804;";       //东北角
        var N_JW = "105.913641, 81.291804;";        //北
        var NW_JW = "-169.604276,  81.291804;";     //西北角
        var W_JW = "-169.604276, 38.244136;";       //西
        var WS_JW = "-169.604276, -68.045308;";     //西南角
        var S_JW = "114.15563, -68.045308;";        //南
        var SE_JW = "170.672126, -68.045308 ;";     //东南角
        //3.添加环形遮罩层
        var ply1 = new BMap.Polygon(ENWS + E_JW + SE_JW + S_JW + WS_JW + W_JW + NW_JW + N_JW + EN_JW + E_JW, {
        strokeColor:"none",strokeOpacity:0,fillColor:"#fff",fillOpacity:"0.8"
        }); //建立多边形覆盖物
        map.addOverlay(ply1);//遮罩物是半透明的，如果需要纯色可以多添加几层
        //4. 给目标行政区划添加边框，其实就是给目标行政区划添加一个没有填充物的遮罩层
        var ply = new BMap.Polygon(rs.boundaries[0], {strokeWeight:3,strokeColor:"#114bf3",fillColor:""});
        map.addOverlay(ply);
        map.setViewport(ply.getPath());//调整视野
    });
}

试试效果，效果图如下：

缩小看下效果：

很明显，这并不是真正的河北地图！！
为什么会是这种效果呢 ？
经过各种尝试，终于还是找到了原因：
这里，我们以北京为对比对象，来看看和河北有啥区别:

如图，通过对比可以发现，河北省的覆盖物边框点，有两部分
话不多说，上修改后的代码：

setTimeout(function(){
    // 省/市外 添加遮罩
    getBoundary('河北');
}, 1000);
//指定省市进行描边处理，省市外进行半透明遮盖。
function getBoundary(city){
    var bdary = new BMap.Boundary();
    bdary.get(city, function(rs){//获取行政区域
        map.clearOverlays();//清除地图覆盖物
        //思路：获取湖北省(除了中心部分)划点的集合与外围自定义东南西北形成一个环形遮罩层，再分别为外部、内部区域添加边框和填充色
        // ps: 外部 -> 湖北省(除了中心部分);  内部 -> 湖北省(中心部分)
        //1.获取湖北省外部边框点的集合rs.boundaries[1]
        var strs = new Array();
        strs = rs.boundaries[1].split(";");
        var ENWS = "";
        for (var i=0;i<strs.length;i++) {
            ENWS += strs[i] + ";"
        }
        //2.自定义外围边框点的集合
        var E_JW = "170.672126, 39.623555;";        //东
        var EN_JW = "170.672126, 81.291804;";       //东北角
        var N_JW = "105.913641, 81.291804;";        //北
        var NW_JW = "-169.604276,  81.291804;";     //西北角
        var W_JW = "-169.604276, 38.244136;";       //西
        var WS_JW = "-169.604276, -68.045308;";     //西南角
        var S_JW = "114.15563, -68.045308;";        //南
        var SE_JW = "170.672126, -68.045308 ;";     //东南角
        //3.添加环形遮罩层
        var ply = new BMap.Polygon(ENWS + E_JW + SE_JW + S_JW + WS_JW + W_JW + NW_JW + N_JW + EN_JW + E_JW, {
            strokeColor:"none",strokeOpacity:0,fillColor:"#fff",fillOpacity:"0.8"
        }); //建立多边形覆盖物
        map.addOverlay(ply);
        //4.给河北省外部添加边框和填充色
        var ply1 = new BMap.Polygon(rs.boundaries[1], {strokeWeight:3,strokeColor:"#114bf3",fillColor:""});
        map.addOverlay(ply1);
        //5.为河北省内部添加边框和填充色
        var ply0 = new BMap.Polygon(rs.boundaries[0], {strokeWeight:3,strokeColor:"#114bf3",fillColor:"transparent",fillOpacity:"0"});
        map.addOverlay(ply0);

        map.setViewport(ply1.getPath());//调整视野  这里需要注意, 调整为ply1(即河北外部)的视野, 这样河北省才会充满屏幕,
    });
}