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

時間 2019-12-17

標籤百度地圖 api 範圍內行政區選擇增長屏蔽简体版

原文原文鏈接

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

補個效果圖吧（css

更正：發現原來的思路想錯了一點，每次加完新的點數組後只要再加一下初始點就能夠閉合了html

源碼（更新1.1版本，直接給了可使用的demo，copy出來改爲.html便可看效果，不過請不要忘了改ak）：前端

<!DOCTYPE html><html><head>    <meta name="viewport" content="width=device-width" />    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />    <title></title>    <script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=請將這裏替換成你的ak值"></script>    <script type="text/javascript" src="http://api.map.baidu.com/library/AreaRestriction/1.2/src/AreaRestriction_min.js"></script>        <style type="text/css">        html {            height: 100%;        }        body {            height: 100%;            margin: 0px;            padding: 0px;        }        #container {            height: 100%;        }    </style></head><body>    <div id="container"></div><script type='text/javascript'>   //提示：下面的代碼用jquery，因此若是有不能運行的狀況請引用後嘗試//百度地圖api container對應前端div名稱 前端要引用2.0版本的百度地圖api//需引用api.map.baidu.com/library/AreaRestriction/1.2/src/AreaRestriction_min.jsvar 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: 59.0, lng: 73.0 }    var pNE = { lat: 59.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: 5, strokeColor: "#FF0000", 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);        //將點增長到視野範圍內        var path = ply.getPath();        pointArray = pointArray.concat(path);        //將閉合區域加到遮蔽層上，每次添加完後要再加一次西北角做爲下次添加的起點和最後一次的終點        pArray = pArray.concat(path);        pArray.push(pArray[0]);    }    //限定顯示區域，須要引用api庫    var boundply = new BMap.Polygon(pointArray);    BMapLib.AreaRestriction.setBounds(map, boundply.getBounds());    map.setViewport(pointArray);    //調整視野     //添加遮蔽層    var plyall = new BMap.Polygon(pArray, { strokeOpacity: 0.0000001, strokeColor: "#000000", strokeWeight: 0.00001, fillColor: "#000000", fillOpacity: 0.4 }); //創建多邊形覆蓋物    map.addOverlay(plyall);}setTimeout(function () {    getBoundary();}, 100);</script></body>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。