Vue3集成高德离线地图实践

news2024/11/15 11:48:47

1. 离线地图效果预览

在这里插入图片描述

2. 地图下载器下载离线地图

根据需要选择地图，我这边选择高德地图，层级选择0-15级别即可，进行下载
在这里插入图片描述

3. 放到nginx内网服务器

注意配置允许跨域

4. Vue3核心代码

// main.js
// 初始化vue-amap
initAMapApiLoader({
  offline: true, // 主要开启离线地图
  plugins: [
    'AMap.Marker',
    'AMap.MassMarks', // 海量点
    'AMap.MouseTool', // 画图工具
    'AMap.Circle',
    'AMap.Bounds',
    'AMap.Icon',
    'AMap.Size',
    'AMap.Polygon',
    'AMap.Rectangle',
    'AMap.OverLayGroup',
    'AMap.GeoJSON',
    'AMap.LabelMarker',
    'AMap.HeatMap', // 热力图
    'AMap.ElasticMarker', // 灵活点标记
    'AMap.Autocomplete', // 输入提示插件
    'AMap.PlaceSearch', //  POI搜索插件
    'AMap.Scale', //  右下角缩略图插件 比例尺
    'AMap.OverView', // 地图鹰眼插件
    'AMap.ToolBar', //  地图工具条
    'AMap.MapType', //  类别切换控件，实现默认图层与卫星图、实施交通图层之间切换的控制
    'AMap.PolyEditor', // 编辑 折线多，边形
    'AMap.CircleEditor', // 圆形编辑器插件
    'AMap.Geolocation', // 定位控件，用来获取和展示用户主机所在的经纬度位置
  ],
  AMapUI: [
    'overlay/SimpleMarker',//SimpleMarker
    'overlay/SimpleInfoWindow',//SimpleInfoWindow
  ],//SimpleMarker
})

初始化时加载离线地图

// map.vue
 <el-amap
        :center="center"
        :zoom="zoom" @init="init">
 </el-amap>
 <scripts>
 methods: {
    init(map) {
      // eslint-disable-next-line no-undef
      let mapLayer = new AMap.TileLayer({
        getTileUrl: function (x, y, z) {
          return "https://map.sfxs.com/images/map/" + z + "/" + x + "/" + y + "/tile.png";
        },
        opacity: 1,
        zIndex: 1,
      })
      const self = this
      //pointer，default，move，crosshair
      map.setLayers([mapLayer])
      //pointer，default，move，crosshair
      map.setDefaultCursor('pointer')
      self.map = map
      this.initMouseTool();
    }
</scripts>