百度地圖2.0離線版與echarts結合

時間 2019-11-07

標籤百度地圖 2.0 離線 echarts 結合简体版

原文原文鏈接

因爲客戶需求，以前使用的json形式的可鑽取型地圖被放棄了，要好看，沒有網～，因而開啓了打地鼠（bug）模式，總結以下：javascript

網上搜索，百度離線地圖資料頗有限啊，能夠用的幾個要麼年代久遠，要麼不能知足需求。不過仍是從前輩們那裏理清了思路css

1.前期準備

須要的東西html

百度地圖API文件(替代<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=#"></script>)
getModules.js
地圖瓦片

2.百度地圖API文件

2.1 下載API主文件

下載最新的api文件，不須要申請ak，地址：http://api.map.baidu.com/api?v=2.0, 打開能夠看到：java

複製劃線部分並打開，拿到主文件，爲方便後續查看修改，先格式化一下，工具：http://www.bejson.com/，命名爲apiv2.0.min.jsnode

2.2 改造apiv2.0.min.js

去掉ak驗證
搜索charset = 'utf-8'，添加 if (/^http/.test(a)) return;ios

function oa(a, b) {
      if (/^http/.test(a)) return;  // 若是是調用外部資源就退出去
      if (b) {
          var c = (1E5 * Math.random()).toFixed(0);
          z._rd['_cbk' + c] = function(a) {
              b && b(a);
              delete z._rd['_cbk' + c]
          };
          a += '&callback=BMap._rd._cbk' + c
      }
      var d = K('script', {
          type: 'text/javascript'
      });
      d.charset = 'utf-8';
      d.src = a;
      d.addEventListener ? d.addEventListener('load',
      function(a) {
          a = a.target;
          a.parentNode.removeChild(a)
      },
      q) : d.attachEvent && d.attachEvent('onreadystatechange',
      function() {
          var a = window.event.srcElement;
          a && ('loaded' == a.readyState || 'complete' == a.readyState) && a.parentNode.removeChild(a)
      });
      setTimeout(function() {
          document.getElementsByTagName('head')[0].appendChild(d);
          d = p
      },
      1)
  };

引用本地工具資源
搜索 domain.main_domain_cdn.baidu[0]，找到使用它定義的z.ma，修改成z.ma = '';json

加載模塊短路處理
搜索 &mod=，替換。那個 console.log(a),是爲了給後面建立getModules.js用axios

3. 建立本地工具資源文件getModules.js

在這裏面放API須要調用的模塊，上面打印的數組a裏面是須要請求的模塊，打印出來，經過下面方式獲取，放到getmodules2.0.js,例如 canvablepath_lf2t4w, 經過
http://api0.map.bdimg.com/getmodules?v=2.0&t=20140707&mod=canvablepath_lf2t4w
下載。windows

這個時候已經能夠用了：api

<!DOCTYPE html>  
<html>  
    <head>  
        <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />  
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
        <title>Hello, World</title>  
        <style type="text/css">  
        html{height:100%}  
        body{height:100%;margin:0px;padding:0px}  
        #main{height:100%}  
        </style>  
        <script type="text/javascript" src="js/apiv2.0.min.js">
        </script>
    </head>  

    <body>  
        <div id="main"></div> 
        <script type="text/javascript"> 
            var map = new BMap.Map("main");          // 建立地圖實例  
            var point = new BMap.Point(116.404, 39.915);  // 建立點座標  
            map.centerAndZoom(point, 15);                 // 初始化地圖，設置中心點座標和地圖級別  
        </script>  
    </body>  
</html>

4.獲取地圖瓦片

不少人推薦了諸如太樂地圖下載器、全能地圖下載器、水經注地圖下載等等，無奈都要花錢購買，再加上用的mac,各類不方便。最後用node本身寫的。新建文件夾tiles,放圖片，最終目標造成按級分類（百度地圖瓦片層級分爲16級，可根據須要選擇）的文件夾：

下面分步講解：

4.1 獲取地圖圖片請求地址

查看請求圖片的地址，

在apiv2.0.min.js中找到相關代碼，搜索 getTilesUrl，有好幾個，對照URL地址的構成，能夠找到

方框內是獲取圖片地址，url是原始地址，nname是即將存入的本地地址。根據須要對頁面的地圖進行拖拽和縮放，在調用頁面，拿到xxxUrls。

先對地圖進行拖拽（加載圖片），確保想要的省市（好比我要江浙滬）都出如今但是範圍內，每縮放到一個等級，都要把江浙滬拖到可視區域溜一圈。

4.2 下載圖片

nodejs的主要代碼貼上：

const imgArr = xxxUrls;

const newArr = new Set(imgArr); //去重
const finalArr = Array.from(newArr); 
//建立目錄
const fs = require('fs');
const axios = require('axios');

const request = require('request');
const path = require('path')

const hostdir = "./";
function mkdirSync(dirname) {
    if (fs.existsSync(dirname)) {
        return true;
    } else {
        if (mkdirSync(path.dirname(dirname))) {   
            fs.mkdirSync(dirname);
            return true;
        }
    }
    return false
}
const n = 0;
for (const item of finalArr) {
  const last = item.name.lastIndexOf('/')
  if (last > 0) {
    const name = item.name.substr(last + 1)
    const dir = item.name.substr(0, last)
    const dstpath = hostdir + dir + '/' + name
    if (name.length && dir.length && !fs.existsSync(dstpath)) {
      if (mkdirSync(hostdir + dir)) {
        ++n;
        request(item.url).pipe(fs.createWriteStream(dstpath))
      }
    }
  }
}

長這樣

4.3 修改獲取圖片地址

在apiv2.0.min.js中找到相關代碼，搜索 getTilesUrl，同上, 找到後修改。

開始的時候我把這api,getModues的文件都放在調用頁面那邊，圖片加載報錯，後來移到項目最外層的static中才解決。最終的目錄結構：

5.與echarts結合

引入BMap,兩種方法，一種是引入echarts安裝包裏的bmap.js文件（本文采用這用），另外一種是從windows中直接拿

const newMap = echarts.init(document.getElementById('newMap'));
newMap.setOption(this.newOption);

// bmap
const bmap = newMap.getModel().getComponent('bmap').getBMap();
const point = new BMap.Point(118.78, 31.04); // 設置中心點
// 設置縮放範圍（地圖層級），此次只須要到10級就好，最小能看中國地圖5級就好。
bmap.setMaxZoom(10);
bmap.setMinZoom(5);
// 限制拖拽範圍，就是限制拖拽的邊界，圖片沒那麼多，一直拖，等圖片用完，就出現空白。
const b = new BMap.Bounds(new BMap.Point(111.64, 26.40), new BMap.Point(125.95, 35.28)); // 左下角，右上角
try {
  BMapLib.AreaRestriction.setBounds(bmap, b);
} catch (e) {
  alert(e);
};

bmap.centerAndZoom(point, 7);

相關標籤/搜索

每日一句

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