百度地图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>