vue2实现离线高德地图 内网离线高德地图_vue2 使用高德离线地图

1.首先使用MapDownloader下载地图瓦片。软件在百度网盘中。
链接：https://pan.baidu.com/s/1r-Nk-DMjuNIqqxa7_B-OoA
提取码：qwlw

点击打开
存储方式选择磁盘，下载位置为D:\GisMap,如需修改，选择MapDownloader.exe.config文件进入修改。

我下载的是上海市的瓦片数据。
瓦片数据太大所以只选择下载了15级。瓦片地址需要放置到一个能访问到的地址，我选择放到本地nginx下。
2.通过https://webapi.amap.com/maps?v=2.0&key=高德key来下载高德地图源码，我试过下载1.4.4版本的源码，但走不通离线，1.4.4版本调用了很多外部的东西改动太大。下载完的js文件放到文件夹public中，并在index.html引入。
3.此时可以打开页面查看接口中有哪些外部请求。这边碰到的有两张图片。

https://vdata.amap.com/style_icon/2.0/icon-biz-big.png
https://vdata.amap.com/style_icon/2.0/icon-normal-big.png

外部请求文件全部下载下来放到nginx下，使其能够访问到。将瓦片地址也全部放到nginx下。
4.修改下载来的maps.js文件。
搜索icon-biz-big和icon-normal-big.png将其全部改成自己配置的nginx文件地址。
5.页面代码

<template>
  <div style="height: 500px;">
    <div ref="wrapRef" id="" style="height: 500px;width:1200px"></div>
  </div>
</template>

<script>
import { AMapManager } from "vue-amap";
let amapManager = new AMapManager();
var AMapSelf;
export default {
  components: {},
  props: {},
  data: function () {
    const self = this;
    return {
      amapManager,
     
    };
  },
  watch: {},
  computed: {},
  created() {},
  mounted() {
    this.$nextTick(()=>{
      this.initMap();
    })
  },
  methods: {
    initMap(){
      const wrapEl = this.$refs.wrapRef;
      if (!wrapEl) return;
      AMapSelf = new AMap.Map(wrapEl, {
        resizeEnable: true,
        zoom: 10, // 初始化缩放级别
        viewMode: '3D',
        center: [121.59996, 31.197646], // 初始化中心点
        // 指定离线地图路径
        layers: [
          new AMap.TileLayer({
            visible: true,
            zIndex: 99,
            opacity: 1,
            getTileUrl: (a, b, c) => {
              //经纬度转换成本地瓦片所在路径
              let flag = '00000000';
              let zz = c;
              let z = 'L' + zz;
              let xx = a.toString(16);
              let x = 'C' + flag.substring(0, 8 - xx.length) + xx;
              let yy = b.toString(16);
              let y = 'R' + flag.substring(0, 8 - yy.length) + yy;
              return 'gaodemap/' + z + '/' + y + '/' + x + '.png';
            },
          }),
        ],
      });

      AMapSelf.setDefaultCursor('pointer');

      AMapSelf.on('click', (e) => {
        AMapSelf.clearMap();
        var marker = new AMap.Marker({
          position: new AMap.LngLat(e.lnglat.getLng(), e.lnglat.getLat()),
          icon: Icon,
          offset: new AMap.Pixel(-13, -30),
        });
        AMapSelf.add(marker);
        var text = '您在 [ ' + e.lnglat.getLng() + ',' + e.lnglat.getLat() + ' ] 的位置双击了地图';
        alert(text);
      });
 
    }
  },
};
</script>
<style lang="scss" scoped></style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77

由于我写的瓦片地址为gaodemap下，为使其能访问到，将gaodemap通过vue代理到之前瓦片放置位置

   '^/gaodemap': {
                target: 'http://10.0.0.xxx:8030', //对应*
                changeOrigin: true,
                ws: false,
                secure: false,
                pathRewrite: {
                    '^/gaodemap': ''
                },
            },
1
2
3
4
5
6
7
8
9

到这里就可以实现地图离线功能。