前端项目使用Leaflet引入离线地图 |
您所在的位置：网站首页 › leaflet加载手绘图 › 前端项目使用Leaflet引入离线地图 |
前端项目使用Leaflet引入离线地图
|
前端引入地图（内网离线）
由于网络等限制，可能需要对地图的展示、打点、显示等操作 我们的步骤是 下载瓦片地图，将瓦片地图静态文件放置在服务器引入绘制地图的第三方插件，这里使用 Leaflet，在Js代码中初始化地图按照 Leaflet 开发文档行事 1、下载瓦片地图这一步让后端去操作，下载后mysql会多一张数据表，导出成瓦片地图放在服务器 1.1 下载工具需要使用下载工具：MapDownloader 提取码: xrb9 需要对工具作如下配置 ： MapDownloader.exe.config 文件进行修改 保存之后运行 MapDownloader.exe文件 1.2 开始下载瓦片地图首先选择mysql数据库，其次选择你要下载地图的地方，根据自己的需求进行选择，选择的位置过大，下载的时间就会很长。 ⚠️ 接下来选择地图，左上角选高德地图就不容易出问题，个人可以依情况选择这里选择。 然后选择数据库下载，导出位置已经在上面配置，最后双击地图选择下载的等级。下载！ 需要导出工具链接: GISMysqlToLoacal 提取码: vfpx 运行其中的 GISMysqlToLocal.exe 导出一个文件夹，里面文件是有规律的数字，从1开始，
这里简单写，大概就是生命周期中节点生成后 通过id选择一个节点进行初始化，具体按照Leaflet文档进行 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: '百度地图' }) .addTo(map); };⚠️ 全局引入leaflet最好直接使用npm装，千万要引入leaflet.css文件不然地图碎片乱飘地图瓦片文件导入的话一定要文件名要按规律Vue 有封装的 leaflet 的组件，但是就只是单纯的封装了一遍leaflet，个人觉得不好用打点，标记，图层的使用一定要在地图节点挂载之后，似乎不用渲染 |
【本文地址】
公司简介
联系我们
今日新闻 |
点击排行 |
|
推荐新闻 |
图片新闻 |
|
专题文章 |