vue2实现百度地图离线（通过下载地图瓦片实现）

请叫我欧皇i

已于 2024-06-06 17:25:26 修改

阅读量3.1k

点赞数 16

分类专栏： vue2 Element vue-插件文章标签： vue.js 前端

于 2024-06-04 14:56:11 首次发布

本文链接：https://blog.csdn.net/qq_44278289/article/details/139267267

版权

vue2 Element 同时被 2 个专栏收录

82 篇文章

订阅专栏

vue-插件

30 篇文章

订阅专栏

需求：因为需要部署到内网，只能使用离线地图，找了很多方法最终实现，文章包含如下

1.使用工具下载所需地区瓦片

2.使用echarts实现地图

3.断网测试

4.图片太多打包太大解决方法

完整代码以及需要的工具都放在最后了~

1.效果

下载瓦片地图

我这边是通过全能地图下载器下载的，只能下载标准的地图，如果要个性化地图可以去望远网，但是要钱，一个月50，看自己的需求吧，如果下载完成之后说还有多少的没有下载，再重新下载一次就行。

双击imaps.exe打开

2. 主要代码讲解

2.1 主要文件

必须要放在打包的入口文件内，tiles文件里面是瓦片的图片，打包的太大，需要先删除，之后打包完毕后放在public下。

2.2 map_load.js文件

瓦片图片编译路径

var bmapcfg = {
  'imgext': '.png',   //瓦片图的后缀  根据需要修改，一般是 .png .jpg
  'tiles_dir': '',       //普通瓦片图的地址，为空默认在tiles/ 目录
};

var scripts = document.getElementsByTagName("script");
var JS__FILE__ = scripts[scripts.length - 1].getAttribute("src");  //获得当前js文件路径
bmapcfg.home = JS__FILE__.substr(0, JS__FILE__.lastIndexOf("/") + 1); //地图API主目录
(function () {
  window.BMap_loadScriptTime = (new Date).getTime();
  //加载地图API主文件
  document.write('<script type="text/javascript" src="' + bmapcfg.home + 'bmap_offline_api_v3.0_min.js"></script>');
})();

2.3 需要下载echarts，之后引入下载的echarts的bmap

import echarts from "echarts";
require("echarts/extension/bmap/bmap");

2.4 需要在public下index.html引入 map_load.js

3.页面引入地图

<template>
  <div class="container">
    <div id="mapbox"></div>
  </div>
</template>

<script>
import echarts from "echarts";
require("echarts/extension/bmap/bmap");
export default {
  data() {
    return {};
  },
  created() {
    this.$nextTick(() => {
      this.intMap();
    });
  },
  mounted() {
    let myChart = echarts.init(document.getElementById("mapbox"));
    let option;
    myChart.setOption(
      (option = {
        animation: false,
        bmap: {
          // center: [120.13066322374, 30.240018034923],
          center: [100.9668, 22.8252],
          zoom: 11,
          roam: true,
          // mapStyle: {style:'midnight'}
        },
        visualMap: {
          show: false,
          top: "top",
          min: 0,
          max: 5,
          seriesIndex: 0,
          calculable: true,
          inRange: {
            color: ["blue", "blue", "green", "yellow", "red"],
          },
        },
        // ... 其他配置项
        // series: [
        //   {
        //     type: "scatter",
        //     coordinateSystem: "bmap",
        //     data: pointsData,
        //     symbolSize: 20, // 设置标记点的大小
        //     label: {
        //       show: true,
        //       formatter: "{b}",
        //       position: "right"
        //     },
        //     itemStyle: {
        //       color: "#FF5733" // 设置标记点的颜色为透明
        //     }
        //   }
        // ]
      })
    );
    var bmap = myChart.getModel().getComponent("bmap").getBMap();

    // 设置最小缩放值
    bmap.setMinZoom(11);
    // 设置最大缩放值
    bmap.setMaxZoom(12);
  },
  methods: {
  },
};
</script>

<style lang="scss" scoped>
.container {
  width: 100%;
  height: 100%;
  #mapbox {
    height: 700px;
    width: 700px;
  }
}
</style>

4.图片太多放在入口文件夹打包/运行失败解决方案

4.1 解决方案1

在全局下载serve包，win+r-打开cmd-npm全局安装serve

npm install -g serve

之后把public下的titles文件移除在其他文件夹下，随便，d盘，e盘都可以，之后点开titles文件夹cmd打开命令窗口，之后serve启动

回到项目public下的map_load.js文件，代码改为如下即可实现

let bmapcfg = {
  'imgext'      : '.png',   //瓦片图的后缀 ------ 根据需要修改，一般是 .png .jpg
  'tiles_dir'   : 'tiles',       //普通瓦片图的地址，为空默认在同级别/tiles/ 目录
  'tiles_path'  : 'http://localhost:3000/',
  'tiles_hybrid': '',       //卫星瓦片图的地址，为空默认在同级别/tiles_hybrid/ 目录
  'tiles_self'  : ''        //自定义图层的地址，为空默认在同级别/tiles_self/ 目录
};

//下面的保持不动///
var scripts = document.getElementsByTagName("script");
var JS__FILE__ = scripts[scripts.length - 1].getAttribute("src");  //获得当前js文件路径
bmapcfg.home = JS__FILE__.substr(0, JS__FILE__.lastIndexOf("/")+1); //地图API主目录
(function(){
  window.BMap_loadScriptTime = (new Date).getTime();
  //加载地图API主文件
  document.write('<script type="text/javascript" src="'+bmapcfg.home+'bmap_offline_api_v3.0_min.js"></script>')
})();
///