前端项目使用Leaflet引入离线地图_前端离线地图

作者：很楠不爱3 | 2024-04-15 00:52:00

踩

前端离线地图

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

在这里插入图片描述

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

我们的步骤是

下载瓦片地图，将瓦片地图静态文件放置在服务器
引入绘制地图的第三方插件，这里使用 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>
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 () {
          	// 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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

⚠️

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

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/很楠不爱3/article/detail/424968