百度地图api-在中国范围内的多行政区选择与反选（增加屏蔽层）

Posted 2020-06-27 魔术wonder

这两天在实验百度地图的api，老实说做的还蛮好使的，不过我这需要的行政区选择和反选功能还是不怎么好实现，实践了一下总算找到了一个比较好一点的解决办法。
行政区选择其实没啥好说的，就是直接拿出行政区名字来调用BMap.Boundary().get(districtName,callback)就可以了
反选尤其是不确定多少个行政区时候的反选才是个麻烦。
我自己选择的方式是找出咱国家四个角端点的经纬度，然后以此画一个闭合折线，再连接选中的区域，再连接四角端点，依次类推
优点是省事&节省资源（我懒_(:з」∠)_）
缺点是不能开描边，不然你就会看到一堆额外的连向西北（左上）的线。
具体代码直接扔到下面了（包括选区&绑定事件&画屏蔽层）
第一次写写的有点乱……反正也是拿来当备忘的所以随意了。
另外有一点想吐槽的……为啥设透明度为0的话无效呢

源码：

//百度地图api
var map = new BMap.Map("container", { enableMapClick: false }); // 创建地图实例，禁止点击地图底图
//设置样式
map.setMapStyle({
    styleJson: [
        {//不显示点信息
            "featureType": "poi",
            "elementType": "all",
            "stylers": {
                "color": "#ffffff",
                "visibility": "off"
            }
        }
    ]
});

map.disableDragging();//禁止拖动
map.disableDoubleClickZoom();//禁止双击缩放
var blist = [];
var districtLoading = 0;

function getBoundary() {
    addDistrict("市北区");
    addDistrict("市南区");
    addDistrict("李沧区");
    addDistrict("四方区");
}

/**
 * 添加行政区划
 * @param {} districtName 行政区划名
 * @returns  无返回值
 */
function addDistrict(districtName) {
    //使用计数器来控制加载过程
    districtLoading++;
    var bdary = new BMap.Boundary();
    bdary.get(districtName, function (rs) {       //获取行政区域
        var count = rs.boundaries.length; //行政区域的点有多少个
        if (count === 0) {
            alert(‘未能获取当前输入行政区域‘);
            return;
        }
        for (var i = 0; i < count; i++) {
            blist.push({ points: rs.boundaries[i], name: districtName });
        };
        //加载完成区域点后计数器-1
        districtLoading--;
        if (districtLoading == 0) {
            //全加载完成后画端点
            drawBoundary();
        }
    });
}


/**
 * 各种鼠标事件绑定
 */
function click(evt) {
    alert(evt.target.name);
}

function mouseover(evt) {
    evt.target.label.setZIndex(99);
    evt.target.label.setPosition(evt.point);
    evt.target.label.show();
}

function mousemove(evt) {
    evt.target.label.setPosition(evt.point);
}

function mouseout(evt) {
    evt.target.label.hide();
}



function drawBoundary() {
    var pointArray = [];
    //画遮蔽层
    //定义中国东南西北端点，作为第一层
    var pNW = { lat: 53.0, lng: 73.0 }
    var pNE = { lat: 53.0, lng: 136.0 }
    var pSE = { lat: 3.0, lng: 136.0 }
    var pSW = { lat: 3.0, lng: 73.0 }
    var pArray = [];
    pArray.push(pNW);
    pArray.push(pSW);
    pArray.push(pSE);
    pArray.push(pNE);
    pArray.push(pNW);



    for (var i = 0; i < blist.length; i++) {
        //添加显示用标签层
        var label = new BMap.Label(blist[i].name, { offset: new BMap.Size(20, -10) });
        label.hide();
        map.addOverlay(label);

        //添加多边形层
        var ply = new BMap.Polygon(blist[i].points, { strokeWeight: 2, strokeColor: "#000000", fillOpacity: 0.01, fillColor: " #FFFFFF" }); //建立多边形覆盖物
        ply.name = blist[i].name;
        ply.label = label;
        ply.addEventListener("click", click);
        ply.addEventListener("mouseover", mouseover);
        ply.addEventListener("mouseout", mouseout);
        ply.addEventListener("mousemove", mousemove);
        map.addOverlay(ply);

        //添加名称标签层
        var centerlabel = new BMap.Label(blist[i].name, { offset: new BMap.Size(0, 0) });
        centerlabel.setPosition(ply.getBounds().getCenter());
        map.addOverlay(centerlabel);

        //将点增加到视野范围内
        pointArray = pointArray.concat(ply.getPath());


        pArray = pArray.concat(ply.getPath());
        pArray.push(ply.getPath()[0]);
        pArray.push(pNW);
        pArray.push(pSW);
        pArray.push(pSE);
        pArray.push(pNE);
        pArray.push(pNW);
    }
    map.setViewport(pointArray);    //调整视野 

    //添加遮蔽层
    var plyall = new BMap.Polygon(pArray, { strokeOpacity: 0.0000001, strokeColor: "#000000", strokeWeight: 0.00001, fillColor: "#000000" ,fillOpacity: 0.8}); //建立多边形覆盖物
    map.addOverlay(plyall);
}


setTimeout(function () {
    getBoundary();
}, 100);