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

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

下载离线瓦片（后端）

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

工具提取码: mmdl

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

保存之后运行 MapDownloader.exe文件

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

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

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

需要导出工具链接: GISMysqlToLoacal

提取码:gisc

运行其中的 GISMysqlToLocal.exe

配置数据库信息

选择本地储存目录（可以直接放到自己的项目里，也可以先放在其他文件下）

导出文件

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

在前端代码中使用地图

AMapLoader.load({key: "", // 申请好的Web端开发者Key，首次调用 load 时必填version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15plugins: ["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目录下

vue前端项目引用高德离线地图相关推荐

前端加载高德离线地图的解决方案
核心是需要下载地图瓦片放在本地,脱离在线地图服务,实现离线加载地图. 使用BIGMap工具下载地图离线瓦片到本地下载地址:http://www.bigemap.com/reader/download ...
基于Vue的高德离线地图开发--省市县
基于Vue的高德离线地图离线地图优势环境需要下载地图离线资源包本项目功能具体代码离线地图优势高德地图接口,个人每天免费调用次数为500次,渲染速度受网络波动影响,又或许项目部署在局域网, ...
高德离线地图vue-amap的api文档（2）：创建地图，撒点等等
前言: 高德离线地图的使用场景还是很多的,但是他的api在国外,想参考api对网络差的朋友来说不是一件容易的事,对我来说一样,在这里整理下他的api内容. 注:本文是将官网api挪动出来,网好的童鞋想 ...
Android高德地图基本开发/在线高德离线地图开发/断网使用离线地图（Assets文件夹的使用）
文章目录高德SDK基本使用前置操作需求一:显示地图,并以当前所在位置为中心权限申请布局功能代码活动功能代码效果展示需求二:离线地图(直接添加到应用端项目内) 需求三 :点击数据后以数据 ...
3、如何搭建高德离线地图服务
谷歌(百度.高德)离线地图开发环境搭建发布时间:2018-01-17 版权: 1.说明离线地图开发环境支持谷歌地图.百度地图.高德地图等等所有常用地图类型,支持在局域网内的地图部署.二次开发. 2 ...
VUE项目学习（一）：搭建VUE前端项目
VUE项目学习(一):搭建VUE前端项目 1.安装node.js环境 (1)下载node.js,下载地址为:https://nodejs.org/en/ (2)按照默认选项安装node,检查安装版本 ...
如何在高德离线地图上画面源代码
离线地图开发主要有两部分组成:1.获取离线地图数据:因为离线地图一般都是局域网,所以需要离线地图数据放在内网中使用:2.离线地图服务器搭建以及二次开发接口提供,离线地图是一种服务,就像我们Apache ...
如何在高德离线地图上画线源代码
离线地图开发主要有两部分组成:1.获取离线地图数据:因为离线地图一般都是局域网,所以需要离线地图数据放在内网中使用:2.离线地图服务器搭建以及二次开发接口提供,离线地图是一种服务,就像我们Apache ...
vue 前端项目部署阿里云服务器
vue 前端项目部署阿里云服务器 one 前期准备 two 代码打包扔服务器 one 前期准备首先两个软件应该下载(Xftp Xshell),如果有其他类似的软件也可以. 打开xftp,新建一个会 ...

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

下载离线瓦片（后端）

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

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

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

在前端代码中使用地图

vue前端项目引用高德离线地图相关推荐

最新文章

热门文章