1. 程式人生 > >百度地圖api(javascript)--高亮顯示所選行政區劃

百度地圖api(javascript)--高亮顯示所選行政區劃

var map = new BMap.Map("map_container");

function initMap(map, "長沙市") {
    var point = new BMap.Point(112.987402, 28.201509);  // 建立點座標  112.987402, 28.201509
    map.centerAndZoom(point, 8);                     // 初始化地圖,設定中心點座標和地圖級別。
    map.addControl(new BMap.ScaleControl());                    // 新增比例尺控制元件


    map.addControl(new BMap.OverviewMapControl());              //新增縮略地圖控制元件
    map.setCenter(cityName);     // 設定地圖顯示的城市 此項是必須設定的
    map.enableScrollWheelZoom();
    map.addControl(new BMap.NavigationControl({ type: BMAP_NAVIGATION_CONTROL_LARGE ,anchor: BMAP_ANCHOR_TOP_LEFT, offset: new BMap.Size(40, 250)}));
    var bdary = new BMap.Boundary();
    bdary.get(cityName, function (rs) {       //獲取行政區域       

        map.clearOverlays();        //清除地圖覆蓋物  

        //新增遮罩層
        //思路:利用行政區劃點的集合與外圍自定義東南西北形成一個環形遮罩層
        //1.獲取選中行政區劃邊框點的集合  rs.boundaries[0]
        var strs = new Array();
        strs = rs.boundaries[0].split(";");
        var EN = "";    //行政區劃東北段點的集合
        var NW = ""; //行政區劃西北段點的集合
        var WS = ""; //行政區劃西南段點的集合


        var SE = ""; //行政區劃東南段點的集合
        var pt_e = strs[0]; //行政區劃最東邊點的經緯度
        var pt_n = strs[0]; //行政區劃最北邊點的經緯度
        var pt_w = strs[0]; //行政區劃最西邊點的經緯度
        var pt_s = strs[0]; //行政區劃最南邊點的經緯度
        var n1 = ""; //行政區劃最東邊點在點集合中的索引位置
        var n2 = ""; //行政區劃最北邊點在點集合中的索引位置
        var n3 = ""; //行政區劃最西邊點在點集合中的索引位置
        var n4 = ""; //行政區劃最南邊點在點集合中的索引位置

        //2.迴圈行政區劃邊框點集合找出最東南西北四個點的經緯度以及索引位置
        for (var n = 0; n < strs.length; n++) {
            var pt_e_f = parseFloat(pt_e.split(",")[0]);
            var pt_n_f = parseFloat(pt_n.split(",")[1]);
            var pt_w_f = parseFloat(pt_w.split(",")[0]);
            var pt_s_f = parseFloat(pt_s.split(",")[1]);

            var sPt = new Array();
            try {
                sPt = strs[n].split(",");
                var spt_j = parseFloat(sPt[0]);
                var spt_w = parseFloat(sPt[1]);
                if (pt_e_f < spt_j) { //東
                    pt_e = strs[n];
                    pt_e_f = spt_j;
                    n1 = n;
                }
                if (pt_n_f < spt_w) {  //北
                    pt_n_f = spt_w;
                    pt_n = strs[n];
                    n2 = n;
                }

                if (pt_w_f > spt_j) {   //西
                    pt_w_f = spt_j;
                    pt_w = strs[n];
                    n3 = n;
                }
                if (pt_s_f > spt_w) {   //南
                    pt_s_f = spt_w;
                    pt_s = strs[n];
                    n4 = n;
                }
            }
            catch (err) {
                alert(err);
            }
        }
        //3.得出東北、西北、西南、東南四段行政區劃的邊框點的集合
        if (n1 < n2) {     //第一種情況 最東邊點在索引前面
            for (var o = n1; o <= n2; o++) {
                EN += strs[o] + ";"
            }
            for (var o = n2; o <= n3; o++) {
                NW += strs[o] + ";"
            }
            for (var o = n3; o <= n4; o++) {
                WS += strs[o] + ";"
            }
            for (var o = n4; o < strs.length; o++) {
                SE += strs[o] + ";"
            }
            for (var o = 0; o <= n1; o++) {
                SE += strs[o] + ";"
            }
        }
        else {   //第二種情況 最東邊點在索引後面
            for (var o = n1; o < strs.length; o++) {
                EN += strs[o] + ";"
            }
            for (var o = 0; o <= n2; o++) {
                EN += strs[o] + ";"
            }
            for (var o = n2; o <= n3; o++) {
                NW += strs[o] + ";"
            }
            for (var o = n3; o <= n4; o++) {
                WS += strs[o] + ";"
            }
            for (var o = n4; o <= n1; o++) {
                SE += strs[o] + ";"
            }
        }
        //4.自定義外圍邊框點的集合
        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 ;";         //東南角
        //4.新增環形遮罩層
        var ply1 = new BMap.Polygon(EN + NW + WS + SE + E_JW + SE_JW + S_JW + WS_JW + W_JW + NW_JW + EN_JW + E_JW, { strokeColor: "none", fillColor: "rgb(246,246,246)", strokeOpacity: 0 }); //建立多邊形覆蓋物
        map.addOverlay(ply1);  //遮罩物是半透明的,如果需要純色可以多新增幾層
        //5. 給目標行政區劃新增邊框,其實就是給目標行政區劃新增一個沒有填充物的遮罩層
        var ply = new BMap.Polygon(rs.boundaries[0], { strokeWeight: 2, strokeColor: "#ff0000",fillColor: "" });
        map.addOverlay(ply); 
        map.setViewport(ply.getPath());    //調整視野
        loadCityMapInfo(map);
    });

    return map;

}

效果圖如下: