Vue3集成高德离线地图实践

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-undeflet 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，crosshairmap.setLayers([mapLayer])//pointer，default，move，crosshairmap.setDefaultCursor('pointer')self.map = mapthis.initMouseTool();}
</scripts>