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

news/2025/3/15 2:32:25/

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

  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.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目录下


http://www.ppmy.cn/news/792248.html

相关文章

8、 高德离线地图开发教程

下载离线地图数据(支持谷歌、百度、高德等所有地图源) 发布时间:2019-03-12 版权:BIGEMAP 离线地图分为两种:一种叫“金字塔瓦片”数据,一种叫“矢量地图数据”。我们看的在线地图比如,百度,谷歌&#xff…

百度离线地图

百度离线地图 1. 申请百度地图ak2.获取百度地图api代码3.修改百度地图baidu-api.js3.1输出缺少js模块名3.2 拦截http3.3设置引用本地资源路径3.4 下载缺少js模块 4.加载瓦片地图4.1再次修改baidu-api.js文件 最近有个离线地图需求,在网上搞了搞看到 某大神写的稿子…

jquery使用离线高德地图

第一步是&#xff1a;先引入相关的离线地图包 百度网盘分享位置&#xff1a; 链接: https://pan.baidu.com/s/1T-PA1zGJASx0p8fr4Ey_mA?pwd1258 提取码: 1258 复制这段内容后打开百度网盘手机App&#xff0c;操作更方便哦 第二步是 添加key <script type"text/javascr…

高德离线地图开发教程

(百度、高德、谷歌)离线地图二次开发 发布时间&#xff1a;2019-04-10 版权&#xff1a; 1、如何搭建离线地图开发环境 2、下载离线地图数据(金字塔瓦片数据&#xff09; 3、添加离线地图数据到本地服务器 4、离线地图二次开发接口&#xff08;离线地图API&#xff09; 5、离…

离线地图开发瓦片数据详解

离线地图分为两种&#xff1a;一种叫“金字塔瓦片”数据&#xff0c;一种叫“矢量地图数据”。我们看的在线地图比如&#xff0c;百度&#xff0c;谷歌&#xff0c;高德等等网页上的地图&#xff0c;都是金字塔瓦片&#xff1b;另外一种是手机上用来导航的&#xff0c;比如高德…

离线地图瓦片下载 高德地图 谷歌地图 天地图 Mapbox地图 矢量 卫星地图下载

用于地图瓦片下载离线&#xff0c;支持 高德地图瓦片 谷歌地图 Mapbox bingMap OpenStreeMap 自定义瓦片地址 下载 gitee项目地址 https://gitee.com/houlaidelu/map-tiles-downloader_node GitHub项目地址 https://github.com/holai/MapTilesDownloader_Node 使用教程 n…

openlayers部署离线高德地图

最近项目经理安排我在客户的客户服务器上部署离线地图&#xff0c;先登录前置机&#xff08;跳板机&#xff09;然后在连接进入服务器&#xff0c;登录上去&#xff0c;没网&#xff0c;卧槽&#xff01; 有个方案部署&#xff1a; 一、通过Nginx反向代理 通过前置机连接高德地…

高德离线地图开发教程?

相关软件下载&#xff1a; 离线地图开发包&#xff1a;BMSERVER 介绍&#xff1a; WMTS&#xff08;OpenGIS Web Map Tile Service&#xff09;当前版本是1.0.0。WMTS标准定义了一些操作&#xff0c;这些操作允许用户访问切片地图。WMTS可能是OGC首个支持RESTful访问的服务…