百度地图2.0离线版与echarts结合

Crazy_Coder 发布于2019-08-26 12:12 / 3446人阅读

摘要：根据需要对页面的地图进行拖拽和缩放，在调用页面，拿到。最终的目录结构与结合引入两种方法，一种是引入安装包里的文件本文采用这用，另一种是从中直接拿设置中心点设置缩放范围地图层级，这次只需要到级就好，最小能看中国地图级就好。

由于客户需求，之前使用的json形式的可钻取型地图被放弃了，要好看，没有网～，于是开启了打地鼠（bug）模式，总结如下：

网上搜索，百度离线地图资料很有限啊，可以用的几个要么年代久远，要么不能满足需求。不过还是从前辈们那里理清了思路

1.前期准备

需要的东西

百度地图API文件(替代)

getModules.js

地图瓦片

2.百度地图API文件 2.1 下载API主文件

下载最新的api文件，不需要申请ak，地址：http://api.map.baidu.com/api?v=2.0, 打开可以看到：

复制划线部分并打开，拿到主文件，为方便后续查看修改，先格式化一下，工具：http://www.bejson.com/，命名为apiv2.0.min.js

2.2 改造apiv2.0.min.js

去掉ak验证
搜索charset = "utf-8"，添加 if (/^http/.test(a)) return;

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 = "";

加载模块短路处理
搜索 &mod=，替换。那个 console.log(a),是为了给后面创建getModules.js用

3. 创建本地工具资源文件getModules.js

在这里面放API需要调用的模块，上面打印的数组a里面是需要请求的模块，打印出来，通过下面方式获取，放到getmodules2.0.js,例如 canvablepath_lf2t4w, 通过
http://api0.map.bdimg.com/getmodules?v=2.0&t=20140707&mod=canvablepath_lf2t4w
下载。

这个时候已经可以用了：

  
  
      
          
          
        Hello, World

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);

私有云混合云百度地图离线导航 l离线版语音识别离线地图功能离线地图java开发

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/108207.html

百度地图 osm地图 leaflet echarts webapck的组合使用时的踩坑记录

摘要：百度地图创建标签进行加载使用百度地图需要百度地图添加扩展，用于让百度地图支持地图可能会遇见两个问题地图图片错位忘记加载中使用的一个主要问题是默认图标的加载问题，详见另外也可以考虑使用动态创建标签的方法，类似百度地图加载百度地图因为本身支持的 webpack+百度地图创建 script标签进行加载 export function MP(ak){ return new Prom...

G9YH 2019-08-23 15:31 评论0 收藏0
echarts 与 highcharts

摘要：渲染能力采用渲染除了对使用，一般来说，更适合绘制图形元素数量非常大这一般是由数据量大导致的图表如热力图地理坐标系或平行坐标系上的大规模线图或散点图等，也利于实现某些视觉特效如交通图。一．简介 echartsecharts是百度公司前端开发的一个图表库，2013年发布第一版，主要采用canvas画图，目前版本3.8.4；完全免费； highcharthighcharts是国外的一家公司...

王笑朝 2019-08-22 17:35 评论0 收藏0
对web数据可视化的一些理解

摘要：本人也做过一些数据可视化相关的产品，下面聊聊对数据可视化的一些思考。这也是数据可视化最麻烦的一直，一般我们借助的地图，或者百度地图，高德地图等来开发，其实百度地图也出了个地图可视化的库，展示效果没有好。。。。最近几年随着大数据的兴起，以及浏览器性能的提升，数据可视化成为了一个热点，前端也冒出来了很多数据可视化的岗位。本人也做过一些数据可视化相关的产品，下面聊聊对数据可视化的一些思考。...

channg 2019-08-05 11:14 评论0 收藏0
对web数据可视化的一些理解

摘要：本人也做过一些数据可视化相关的产品，下面聊聊对数据可视化的一些思考。这也是数据可视化最麻烦的一直，一般我们借助的地图，或者百度地图，高德地图等来开发，其实百度地图也出了个地图可视化的库，展示效果没有好。。。。最近几年随着大数据的兴起，以及浏览器性能的提升，数据可视化成为了一个热点，前端也冒出来了很多数据可视化的岗位。本人也做过一些数据可视化相关的产品，下面聊聊对数据可视化的一些思考。...

andong777 2019-08-20 16:28 评论0 收藏0
对web数据可视化的一些理解

摘要：本人也做过一些数据可视化相关的产品，下面聊聊对数据可视化的一些思考。这也是数据可视化最麻烦的一直，一般我们借助的地图，或者百度地图，高德地图等来开发，其实百度地图也出了个地图可视化的库，展示效果没有好。。。。最近几年随着大数据的兴起，以及浏览器性能的提升，数据可视化成为了一个热点，前端也冒出来了很多数据可视化的岗位。本人也做过一些数据可视化相关的产品，下面聊聊对数据可视化的一些思考。...

gotham 2019-08-01 16:48 评论0 收藏0