jack361博客原文链接：
https://blog.csdn.net/qq_41064597/article/details/123892353
由于网络等限制，可能需要对地图的展示、打点、显示等操作
我们的步骤是
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
<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>
- 1
- 2
- 3
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 () {
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>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
⚠️
- 全局引入leaflet最好直接使用npm装，千万要引入leaflet.css文件不然地图碎片乱飘
- 地图瓦片文件导入的话一定要文件名要按规律
- Vue 有封装的 leaflet 的组件，但是就只是单纯的封装了一遍leaflet，个人觉得不好用
- 打点，标记，图层的使用一定要在地图节点挂载之后，似乎不用渲染