百度地圖api-在中國範圍內的多行政區選擇與反選（增加屏蔽層）

標籤：

這兩天在實驗百度地圖的api，老實說做的還蠻好使的，不過我這需要的行政區選擇和反選功能還是不怎麼好實現，實踐了一下總算找到了一個比較好一點的解決辦法。
行政區選擇其實沒啥好說的，就是直接拿出行政區名字來調用BMap.Boundary().get(districtName,callback)就可以了
反選尤其是不確定多少個行政區時候的反選才是個麻煩。
我自己選擇的方式是找出咱國家四個角端點的經緯度，然後以此畫一個閉合折線，再串連選中的地區，再串連四角端點，依次類推
優點是省事&節省資源（我懶_(:з」∠)_）
缺點是不能開描邊，不然你就會看到一堆額外的連向西北（左上）的線。
具體代碼直接扔到下面了（包括選區&綁定事件&畫屏蔽層）
第一次寫寫的有點亂……反正也是拿來當備忘的所以隨意了。
另外有一點想吐槽的……為啥設透明度為0的話無效呢

源碼：

//百度地圖apivar 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);

 

百度地圖api-在中國範圍內的多行政區選擇與反選（增加屏蔽層）