vue前端项目引用高德离线地图

由于上一篇下载离线地图瓦片的工具有问题,需要更换工具重新下载离线瓦片,步骤如下:

  1. 下载离线瓦片(后端)

1.1用MapDownloader,下载离线地图瓦片

工具提取码: mmdl

需要对工具作如下配置 : MapDownloader.exe.config 文件进行修改

保存之后运行 MapDownloader.exe文件

1.2 选择mysql数据库,然后选择要下载得地图,下载数据量不易过大,我选择贵州省得8-11级地图,根据需求下载地图层级

数据越多下载越慢,还容易卡住,可以分层级下载,下载一个层级导出一个层级最后整合到一个文件夹下

1.3 生成静态的图片文件放在服务器

需要导出工具链接: GISMysqlToLoacal

提取码:gisc

运行其中的 GISMysqlToLocal.exe

  1. 配置数据库信息

  1. 选择本地储存目录(可以直接放到自己的项目里,也可以先放在其他文件下)

  1. 导出文件

文件夹里面是按顺序排列的地图层级

  1. 在前端代码中使用地图

AMapLoader.load({
      key: "", // 申请好的Web端开发者Key,首次调用 load 时必填
      version: "2.0", // 指定要加载的 JSAPI 的版本,缺省时默认为 1.4.15
      plugins: ["AMap.Scale","AMap.DistrictSearch"], //需要使用的的插件列表,如比例尺'AMap.Scale'等
    })
      .then((AMap) => {
        var googleMapLayer = new AMap.TileLayer({
          getTileUrl: function (x, y, z) {
            return "/788865972/" + z + "/" + x + "/" + y + ".png";
          },
          opacity: 1,
          zIndex: 99,
        });
        this.map = new AMap.Map("container", {
          resizeEnable: true,
          expandZoomRange: true,
          zoom: 9,
          zooms: [9, 13],
          layers: [googleMapLayer],
        });
        this.map.addControl(new AMap.Scale());
        this.map.setCenter([106.957466, 26.684193]); //设置地图中心点
      })
      .catch((e) => {
        console.error(e); //加载错误提示
      });

*开发者的key一定要填(可以自己申请一个key)

下载瓦片地图,将瓦片地图静态文件夹788865972放在本地项目pulic目录下

  • 2
    点赞
  • 15
    收藏
    觉得还不错? 一键收藏
  • 12
    评论
要在Vue引用高德离线地图,可以按照以下步骤操作: 1. 下载高德离线地图API,解压后将其中的文件放入项目中的public文件夹中。 2. 在index.html文件中引入高德离线地图API的js文件和css文件。 ```html <!DOCTYPE html> <html> <head> ... <link rel="stylesheet" href="/amap/map.css"> <script type="text/javascript" src="/amap/amap.js"></script> ... </head> <body> ... <div id="app"></div> ... </body> </html> ``` 3. 在需要使用地图Vue组件中,通过AMap对象创建地图,并进行配置。 ```html <template> <div id="map"></div> </template> <script> export default { mounted() { // 创建地图 var map = new AMap.Map('map', { center: [116.397428, 39.90923], zoom: 13 }); // 添加插件 AMap.plugin([ 'AMap.ToolBar', 'AMap.Scale', 'AMap.OverView', 'AMap.MapType', 'AMap.Geolocation' ], function () { map.addControl(new AMap.ToolBar()); map.addControl(new AMap.Scale()); map.addControl(new AMap.OverView({ isOpen: true })); map.addControl(new AMap.MapType()); map.addControl(new AMap.Geolocation()); }); } } </script> ``` 4. 在webpack.config.js文件中配置webpack打包时,将高德离线地图API的文件复制到打包后的public文件夹中。 ```javascript const CopyWebpackPlugin = require('copy-webpack-plugin'); module.exports = { ... plugins: [ new CopyWebpackPlugin([ { from: path.resolve(__dirname, './public/amap'), to: path.resolve(__dirname, './dist/amap'), ignore: ['.*'] } ]) ] ... } ``` 这样就可以在Vue项目引用高德离线地图了。
评论 12
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值