利用百度地圖前端實現矢量縣區地圖下載（json）

咱們在作可視化開發的時候經常須要下載某些地方的適量地圖數據，利用echarts等去渲染相關數據，固然咱們徹底能夠利用GIS技術去實現，可是GIS相對咱們比較簡單的需求成本有點過大，由於你須要製圖、配準、發佈，再到前段開發，這樣有點得不償失。

因此咱們有時候僅僅須要一個縣區的邊界，好比咱們須要展示「鳳翔縣」的行政邊界咱們如今能夠這樣作

Step 1

打開連接：百度地圖API > 覆蓋物示例 > 添加行政區劃 lbsyun.baidu.com/jsdemo.htm#… 看到以下界面：

注意上圖的右邊顯示了一個北京市的邊界。 再看左邊的代碼裏有這麼一段話：

function getBoundary(){       
    var bdary = new BMap.Boundary();
    bdary.get("北京市海淀區", function(rs){ //獲取行政區域
        map.clearOverlays();        //清除地圖覆蓋物 
        var count = rs.boundaries.length; //行政區域的點有多少個
        if (count === 0) {
            alert('未能獲取當前輸入行政區域');
            return ;
        }
    ……
複製代碼

經過一個GET請求去獲取北京市海淀區的邊界，咱們打印出來看看，能夠這樣作：

function getBoundary(){       
    var bdary = new BMap.Boundary();
    bdary.get("北京市海淀區", function(rs){ //獲取行政區域
        //--------------------
        console.log(rs)
        //--------------------
        map.clearOverlays();        //清除地圖覆蓋物 
        var count = rs.boundaries.length; //行政區域的點有多少個
        if (count === 0) {
            alert('未能獲取當前輸入行政區域');
            return ;
        }
    ……
複製代碼

在控制檯看到的結果：

你會發現一個問題：控制檯會輸出一個數組，內部存儲一個字符串，可是太長了無法複製，這裏咱們能夠選擇兩個辦法：

1. 把這個結果存儲到本地Local Storage裏面，而後去那個裏面複製。
2. 請看Step 2

Step 2

改造上面的代碼中getBoundary()函數以下：

function getBoundary(){       
    var bdary = new BMap.Boundary();
    bdary.get("鳳翔縣", function(rs){       //獲取行政區域
        map.clearOverlays();        //清除地圖覆蓋物       
        var count = rs.boundaries.length; //行政區域的點有多少個
            console.log(rs.boundaries);
        var content = rs.boundaries
        var fileName = '鳳翔縣.txt'
        var aLink = document.createElement('a');
        var blob = new Blob([content]);
        var evt = document.createEvent("HTMLEvents");
            evt.initEvent("click", false, false);
            aLink.download = fileName;
            aLink.href = URL.createObjectURL(blob);
            aLink.dispatchEvent(evt);
            aLink.click();
            if (count === 0) {
                alert('未能獲取當前輸入行政區域');
                return ;
            }
        var pointArray = [];
            for (var i = 0; i < count; i++) {
                var ply = new BMap.Polygon(rs.boundaries[i], {strokeWeight: 2, strokeColor: "#ff0000"}); //創建多邊形覆蓋物
                map.addOverlay(ply);  //添加覆蓋物
                pointArray = pointArray.concat(ply.getPath());
            }    
        map.setViewport(pointArray);    //調整視野  
        addlabel();               
    });   
}
複製代碼

點擊運行按鈕等待2s會自動下載一個鳳翔縣.txt文件，打開后里面的內容以下

107.653733, 34.657435;107.648513, 34.661217;107.625176, 34.705117;107.609942, 34.707262;107.594553, 34.736579;107.584968, 34.730437;107.579062, 34.745847;107.573426, 34.745894;……
複製代碼

咱們可使用js的字符串切割方法對其進行以';'切割，以後再轉換成二維數組，而後利用convas、svg技術描點繪製出來，其中相似107.653733就是x座標利用js的經緯度轉墨卡託算法（固然你也能夠直接渲染，但保證地圖上的點也是經緯度）在將其轉換成墨卡託平面直角座標系座標，就能夠了，固然會得出一個很大的值，咱們能夠除與共同係數來改變總體渲染結果的大小，我麼還能夠利用此去綁定鼠標事件。

經緯度轉墨卡託算法

沒接觸過GIS的同窗可能不知道這是什麼意思，大體是這樣的：

你們都知道，地球是個球體，那麼經緯度明顯表達的是一個度數，直接用其繪製出來的圖形不是個平面的會有必定的變形，因此科學家墨卡託假想一個與地軸方向一致的圓柱切或割於地球，按等角條件，將經緯網投影到圓柱面上，將圓柱面展爲平面後，即得投影。墨卡託投影在切圓柱投影與割圓柱投影中，最先也是最經常使用的是切圓柱投影。 算法公式在下面：

function _getMercator(poi) {//[114.32894, 30.585748]
    var mercator = {};
    var earthRad = 6378137.0;//赤道周長
        mercator.x = poi.lng * Math.PI / 180 * earthRad;
    var a = poi.lat * Math.PI / 180;
        mercator.y = earthRad / 2 * Math.log((1.0 + Math.sin(a)) / (1.0 - Math.sin(a)));
    return mercator; //[12727039.383734727, 3579066.6894065146]
}
複製代碼

原文地址