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

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

前端项目中引入高德离线地图_第1张图片

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

我们的步骤是

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

1、下载瓦片地图

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

1.1 下载工具

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

需要对工具作如下配置 : MapDownloader.exe.config 文件进行修改前端项目中引入高德离线地图_第2张图片

保存之后运行 MapDownloader.exe文件

1.2 开始下载瓦片地图

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

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

然后选择数据库下载,导出位置已经在上面配置,最后双击地图选择下载的等级。下载!
前端项目中引入高德离线地图_第3张图片

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

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

运行其中的 GISMysqlToLocal.exe
前端项目中引入高德离线地图_第4张图片

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

前端项目中引入高德离线地图_第5张图片

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

2.1 引入leaflet

  	// 这里是引入leaflet,可以使用CDN 也可以使用 npm i leaflet 进行安装
    <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" />  
    <script src="https://unpkg.com/[email protected]/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: '百度地图'
                })
            .addTo(map);
            
        };    
    script>
    
body>

⚠️

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

你可能感兴趣的:(Vue,react,hooks,组件化)