前端引入地图（内网离线）

由于网络等限制，可能需要对地图的展示、打点、显示等操作

我们的步骤是

下载瓦片地图，将瓦片地图静态文件放置在服务器
引入绘制地图的第三方插件，这里使用 Leaflet，在Js代码中初始化地图
按照 Leaflet 开发文档行事

1、下载瓦片地图

这一步让后端去操作，下载后mysql会多一张数据表，导出成瓦片地图放在服务器

1.1 下载工具

需要使用下载工具：MapDownloader
提取码: xrb9

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

保存之后运行 MapDownloader.exe文件

1.2 开始下载瓦片地图

首先选择mysql数据库，其次选择你要下载地图的地方，根据自己的需求进行选择，选择的位置过大，下载的时间就会很长。

⚠️ 接下来选择地图，左上角选高德地图就不容易出问题，个人可以依情况选择这里选择。

然后选择数据库下载，导出位置已经在上面配置，最后双击地图选择下载的等级。下载！

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

需要导出工具链接: GISMysqlToLoacal
提取码: vfpx

运行其中的 GISMysqlToLocal.exe

导出一个文件夹，里面文件是有规律的数字，从1开始，

2、在前端代码中使用地图

2.1 引入leaflet

     // 这里是引入leaflet，可以使用CDN 也可以使用 npm i leaflet 进行安装<link rel="stylesheet" href="https://unpkg.com/leaflet@1.4.0/dist/leaflet.css" />  <script src="https://unpkg.com/leaflet@1.4.0/dist/leaflet.js"></script>

2.2初始化地图

这里简单写，大概就是生命周期中节点生成后通过id选择一个节点进行初始化，具体按照Leaflet文档进行


<body><div id="map" style="width:90%;height:600px;margin-top:30px;text-align:center;margin:0 auto;"></div><script type="text/javascript">window.onload=function () {// L.map(DOM节点id).setView([经纬度], 初始化层级)var map = L.map('map').setView([22.56414255434805,114.153442382813], 11);L.tileLayer('./img/788865972/{z}/{x}/{y}.png', {minZoom: 10,maxZoom: 12,attribution: '<b style="color:#dddddd">百度地图</b>'}).addTo(map);};    </script></body>

⚠️

全局引入leaflet最好直接使用npm装，千万要引入leaflet.css文件不然地图碎片乱飘
地图瓦片文件导入的话一定要文件名要按规律
Vue 有封装的 leaflet 的组件，但是就只是单纯的封装了一遍leaflet，个人觉得不好用
打点，标记，图层的使用一定要在地图节点挂载之后，似乎不用渲染

前端项目中引入高德离线地图相关推荐

在vue项目中引入高德地图并使用
1.高德地图使用准备开发之前的准备需要注册账号, 创建应用, 创建 api key 调用地图的时候, 请求上带的 key 像高德地图服务器校验权限, 另外可以用来标识同一个程序的不同入口, 如网页 ...
在vue项目中引入高德地图及其UI组件的方法
https://www.jb51.net/article/146789.htm 转载于:https://www.cnblogs.com/sweeeper/p/11282700.html
前端项目中引入字体文件并使用
首先是下载所需的字体文件,将文件存放在自定义的静态资源目录. 然后在需要引入页面的style模块加入如下代码直接在需要的地方引用text_class样式就可以啦
在vue中引入高德地图
既然要用到高德地图首先要申请成为高德地图开发者,并申请使用高德地图的key这两点在这篇文章就不过多赘述,有需要的小伙伴可以查查资料,或者去高德地图api官网都有很详细的介绍.高德地图官网简单提一下申 ...
angular项目(TS)引入腾讯地图报找不到qq
文章目录在angular项目中引入腾讯地图问题解决结尾在angular项目中引入腾讯地图在index.html文件中script标签加载API服务 <script charset=&q ...
在vue项目中使用高德地图JS API
在vue项目中使用高德地图JS API,而不是amap依赖包~ 一. 必做的准备工作注册账号并申请key 首先,注册开发者账号,成为高德开放平台开发者登陆之后,在进入「应用管理」页面「创建新应用 ...
在vue项目中使用高德地图
需求很重要,有需求你才有努力解决问题的方向,加油! 在我们使用vue构建项目的时候,难免在业务需求上会遇到使用高德地图的时候,这时候问题就来了. 我们该怎么在vue项目中插入高德地图?通过度娘我知道了 ...
ANDROID项目中嵌入高德地图（一）配置环境+显示地图
最近在做项目中嵌入高德地图的工作,觉得有必要记录一下嵌入过程,虽然高德官方给说明文档了,但有写并不明确需要去查类,查资料,再此把过程记录一下. 一.显示地图 1.配置AndroidManifest.x ...
vue 项目中使用高德地图
官方文档: 高德地图API官网高德地图2.0参考手册高德地图JS API 2.0 示例在项目中使用 vue-amap 高德地图JSAPI在Vue框架下使用高德地图在线 JS API 示例一. ...

前端项目中引入高德离线地图