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

前端引入地图(内网离线)

在这里插入图片描述

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

我们的步骤是

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

1、下载瓦片地图

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

1.1 下载工具

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

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

保存之后运行 MapDownloader.exe文件

1.2 开始下载瓦片地图

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

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

然后选择数据库下载,导出位置已经在上面配置,最后双击地图选择下载的等级。下载!
在这里插入图片描述

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

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

运行其中的 GISMysqlToLocal.exe
在这里插入图片描述

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

img

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>

⚠️

  1. 全局引入leaflet最好直接使用npm装,千万要引入leaflet.css文件不然地图碎片乱飘
  2. 地图瓦片文件导入的话一定要文件名要按规律
  3. Vue 有封装的 leaflet 的组件,但是就只是单纯的封装了一遍leaflet,个人觉得不好用
  4. 打点,标记,图层的使用一定要在地图节点挂载之后,似乎不用渲染
  • 11
    点赞
  • 47
    收藏
    觉得还不错? 一键收藏
  • 40
    评论
### 回答1: leaflet是一种流行的JavaScript库,用于创建交互式地图地图应用程序。它具有轻量级、灵活和易于使用的特点,可以使用离线地图加载进行浏览。 要加载离线地图,首先需要准备地图图块。可以使用开源软件如MapBox Studio或TileMill来制作地图。将地图图块保存在磁盘或服务器上,并使用leaflet中的TileLayer来将其加载到地图上。 例如,在leaflet中添加离线地图的代码如下: ```javascript var offlineMap = L.tileLayer('path/to/tiles/{z}/{x}/{y}.png', { maxZoom: 18, attribution: 'Map data © OpenStreetMap contributors' }); var map = L.map('map').setView([51.505, -0.09], 13); map.addLayer(offlineMap); ``` 这里,tileLayer将离线地图图块的路径传递给tileLayer对象,然后将其添加到地图上。此处设置了最大缩放级别和属性信息。最后,使用L.map创建一个地图对象,并将TileLayer添加到地图上。 使用leaflet加载离线地图涉及了对地图数据的准备和处理,但一旦地图被加载到页面上,它将非常流畅和快速,使离线地图的浏览变得容易。 ### 回答2: Leaflet 是一款轻量级的开源 JavaScript 地图库,它可以用于创建交互式、可定制地图,支持多种数据格式和多种地图样式。其中一个重要的功能就是加载离线地图。 加载离线地图需要以下几个步骤: 1. 下载地图切片数据:离线地图需要下载相应的地图切片数据,可以从专门的地图数据提供商处获取,也可以使用自己的切片数据。地图切片数据通常以图块的形式存储,每个图块包含地图上的一小部分。 2. 将切片数据转换为合适的格式:Leaflet 支持的地图数据格式包括 PNG、JPEG、GIF、SVG 和 WebP 等,因此需要将切片数据转换为其中一种格式。 3. 将切片数据加载到 Leaflet:在 Leaflet 中,可以使用 TileLayer 类加载离线地图数据。可以通过指定切片数据存储的路径、分辨率、缩放级别等属性来设置 TileLayer。 4. 在 Leaflet 中显示地图:在 TileLayer 加载离线地图数据之后,需要将其添加到 Leaflet 地图对象中以进行显示。可以使用 map.addLayer() 方法将 TileLayer 添加到地图中。 需要注意的是,离线地图数据通常占用大量的存储空间,因此在下载和处理数据时需要谨慎。此外,离线地图数据也需要及时更新以保证地图的准确性和实时性。
评论 40
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值