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

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

一、先封装一个添加遮罩方法

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());//调整视野
    });
}

先看看效果，如下图：

缩小后效果：

很明显，这并不是真正的河北地图！！

二、为什么会是这种效果呢 ？

经过各种尝试，终于还是找到了原因：其他省/市在地图板块中都是独立的一个板块，可以正常展示，但河北省在地图版块中，被分为两个板块，通过以上方法无法完全展示，这是最根本的原因。

这里，我们以北京市为对比对象，来看看究竟与河北省有啥区别:

如图，通过对比可以发现，河北省的覆盖物边框点，有两部分。
第一次只展示河北省内部，因为我们只获取了rs.boundaries[0]，这部分仅仅表示河北省内部，此时，我们需要获取rs.boundaries[1]河北省外部，将这部分与外围自定义东南西北形成一个环形遮罩层，再分别为外部、内部区域添加边框和填充色。

话不多说，上修改后的代码：

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(即河北外部)的视野, 这样河北省才会充满屏幕,
    });
}

修改后的效果图：


这样就解决啦 ~

三、缺陷

细心的小伙伴会发现，河北省(内部)那部分区域，与最外层遮罩颜色一致(都是白色半透明)，原因是为外部添加遮罩时，也会将内部区域计算进来。

如何解决该问题 ？欢迎大家留言提供思路或解决办法 。

福利：上述 表情包gif动图获取地址：qq新版&旧版&搞笑版_gif_表情包 评论留言即可免费领取 ~