在Qgis中使用QMetaTiles插件进行XYZ瓦片离线下载方法

╰半橙微兮° 2023-10-12 16:53 61阅读 0赞

**目录**

前言

一、Qgis插件库

1、插件库简介

2、QMetaTiles介绍

二、QMetaTiles插件安装

1、在线安装

2、离线安装

三、瓦片下载

1、打开QmeaTiles插件

2、Leaflet加载下载的瓦片

总结

--------------------

## 前言 ##

电子地图是地图类应用的基石，作为整个系统的基础。其它的图层要素都构建在底图之上，不管是google、高德或者百度，他们的底图都是一块一块的瓦片构成的。形如下面的组织方式，关于瓦片的相关知识在这里不再赘述，可参看这篇博客，[Qgis加载在线XYZ瓦片影像服务的实践操作][Qgis_XYZ]。在互联网模式下，加载瓦片的方式已经做了简单的介绍。

在很多情况下，我们的应用系统需要在离线的环境下进行访问，比如在内网环境中。而要想在内网中访问这些离线瓦片，需要采用什么方式进行发布呢？如果在平时工作和学习的过程中，你也会遇到这种问题，不妨一起来学习在Qgis中利用QMetaTiles插件进行瓦片下载。本文将简单介绍QMetaTiles插件，并利用QMetaTiles插件进行瓦片离线化，将下载后的瓦片在nginx中发布，最后采用Leaflet加载下载的离线瓦片。

## 一、Qgis插件库 ##

### 1、插件库简介 ###

Qgis除了本身的软件功能非常丰富，插件作为Qgis的扩展生态，极大的丰富和扩展了Qgis的功能，为他添砖加瓦，同时也方便大家更好的使用Qgis软件。插件库地址为：[qgis插件库][qgis]。

![6968393747c6494b87106d4bc81bcd22.png][]

可以看到Qgis的插件库还是非常丰富的，您可以根据需要下载相应的插件，让您的工作如虎添翼。

### 2、QMetaTiles介绍 ###

Generates MetaTiles for export to the LatLonGO mobile solution.Generate tiles (using metatiling) from your QGIS project. Provides a QGIS export for LatLonGO. Can save metatile files in MapBox and Zip formats. Based on QTiles plugin.

上述是官网上关于QMetaTiles的相关介绍。可以看到，使用QMetaTiles插件可以完成瓦片的下载功能。它的开发作者是wedoit，开发者所在团队是we-do-it Development Team。详情如下表所示：

<table> 
 <tbody> 
  <tr> 
   <td style="width:86px;">序号</td> 
   <td style="width:233px;">名称</td> 
   <td style="width:369px;">说明</td> 
  </tr> 
  <tr> 
   <td style="width:86px;">1</td> 
   <td style="width:233px;">Author</td> 
   <td style="width:369px;">we-do-IT Development Team</td> 
  </tr> 
  <tr> 
   <td style="width:86px;">2</td> 
   <td style="width:233px;">Maintainer</td> 
   <td style="width:369px;">wedoit</td> 
  </tr> 
  <tr> 
   <td style="width:86px;">3</td> 
   <td style="width:233px;">Tags</td> 
   <td style="width:369px;">raster , tiles , mbtiles , zip , mapbox , latlongo</td> 
  </tr> 
  <tr> 
   <td style="width:86px;">4</td> 
   <td style="width:233px;"> <p>Plugin home page</p> </td> 
   <td style="width:369px;"><a href="https://bitbucket.org/we-do-it/qgis-latlongo-stage-1" title="Bitbucket" rel="nofollow">Bitbucket</a></td> 
  </tr> 
  <tr> 
   <td style="width:86px;">5</td> 
   <td style="width:233px;"> <p>Tracker</p> </td> 
   <td style="width:369px;">Browse and report bugs</td> 
  </tr> 
  <tr> 
   <td style="width:86px;">6</td> 
   <td style="width:233px;"> <p>Latest stable version</p> </td> 
   <td style="width:369px;">1.5</td> 
  </tr> 
  <tr> 
   <td style="width:86px;">7</td> 
   <td style="width:233px;">Latest experimental vesion</td> 
   <td style="width:369px;">1.0</td> 
  </tr> 
 </tbody> 
</table>

当然，作为Qgis的插件，QMetaTiles的版本与Qgis的版本也是存在一个对应关系的。这也是软件版本适配的问题，各位小伙伴在使用软件的时候，一定要注意软件的版本。否则极有可能发生报错的现况，甚至软件不可用。下面来看下QMetaTiles和Qgis的版本对应关系，有了版本对应关系，您在选择版本的时候就有了更多的选择。

![a3357ccdfb3146a2be2d49042723b73a.png][]

## 二、QMetaTiles插件安装 ##

### 1、在线安装 ###

打开Qgis软件，在上面的菜单栏中点击插件按钮，打开插件弹出窗口，如下图所示：

![e70776b25b8645709287eddbdbc68279.png][]

![65f82b9441dc4325a79c67872dc961dc.png][]

在搜索栏中搜索想要的插件，按照提示安装即可。我的电脑上因为网络原因，在Qgis中打开插件库非常缓慢，因此我们改成另外一种安装模式，离线安装。离线安装的模式，顾名思义就是在没有网络的情况下进行插件的安装。因此首先需要我们将插件下载到本地。

### 2、离线安装 ###

在QMetaTiles的插件下载页面，点击下载按钮跳转到相应的下载窗口。然后将插件下载到本地等待安装。

![7e7520bb0a3b4a2784ecfe618991da70.png][]

下载好的插件压缩包如下图所示：

![a2a2c10446404eb2a62faf73d69850a8.png][]

在Qgis中采用zip离线安装的方式进行插件安装，详情如下图所示:

![654fb15d7a79465dbe473b20da74d28a.png][]

完成后点击安装插件，安装成功后关闭窗口即可。安装成功后，在菜单栏可以看到QMetaTiles插件的菜单入口。

![2754a3c1980d49e189c3f81b580d02be.png][]

## 三、瓦片下载 ##

这里将利用QMetaTiles插件下载星图地球的标注瓦片，本示例供参考，在实际生产环境下，对地图的使用需要慎之又慎，要经过有资质单位的审核才可以。

### 1、打开QmeaTiles插件 ###

在Qgis上方的插件菜单中，选择QMetaTiles,点击进入主程序页面，详情如下图所示：

![320222bd24464e61ba0cec79f05a9314.png][]

瓦片下载的时候的重点参数的设置说明：

<table> 
 <tbody> 
  <tr> 
   <td style="width:127px;">1</td> 
   <td style="width:263px;">参数</td> 
   <td style="width:298px;">说明</td> 
  </tr> 
  <tr> 
   <td style="width:127px;">2</td> 
   <td style="width:263px;">File</td> 
   <td style="width:298px;">压缩文件生成，支持zip或者rar</td> 
  </tr> 
  <tr> 
   <td style="width:127px;">3</td> 
   <td style="width:263px;">Directory</td> 
   <td style="width:298px;">文件目录生成</td> 
  </tr> 
  <tr> 
   <td style="width:127px;">4</td> 
   <td style="width:263px;">tileset name</td> 
   <td style="width:298px;">瓦片集名称，相当于文件夹名称</td> 
  </tr> 
  <tr> 
   <td style="width:127px;">5</td> 
   <td style="width:263px;">extent</td> 
   <td style="width:298px;">下载瓦片的四至，一般默认下载所有</td> 
  </tr> 
  <tr> 
   <td style="width:127px;">6</td> 
   <td style="width:263px;">minzoom</td> 
   <td style="width:298px;">最小下载层级</td> 
  </tr> 
  <tr> 
   <td style="width:127px;">7</td> 
   <td style="width:263px;">maxzoom</td> 
   <td style="width:298px;">最大下载层级</td> 
  </tr> 
  <tr> 
   <td style="width:127px;">8</td> 
   <td style="width:263px;">tile width</td> 
   <td style="width:298px;">瓦片宽度</td> 
  </tr> 
  <tr> 
   <td style="width:127px;">8</td> 
   <td style="width:263px;">tile height</td> 
   <td style="width:298px;">瓦片高度</td> 
  </tr> 
  <tr> 
   <td style="width:127px;">10</td> 
   <td style="width:263px;">format</td> 
   <td style="width:298px;">瓦片格式</td> 
  </tr> 
 </tbody> 
</table>

其它的参数感兴趣的朋友可以在Qgis中进行不同的测试。这里为了减少数据展示，仅下载3-

4级瓦片（标注图层太小的话几乎没有）。参数设置完毕后，点击Ok按钮可以进行瓦片下载。

![7131b90c869d487ea29bbba484a39064.png][]

点击完成后可以看到在文件夹中已经有了对应的瓦片数据。

![0296bbf6df0b43e081c214821c0106f4.png][]

会有一些黑色的瓦片，因为在当前层级下无数据导致的(可以暂时不用管）。

### 2、Leaflet加载下载的瓦片 ###

关于如何在Leaflet中如何展示瓦片信息，在此不再赘述，这里贴出具体的代码，供大家参考。

<!DOCTYPE html>
    <html>
    <head>
      <title>Leaflet 本地瓦块Preview</title>
      <meta charset="utf-8" />
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <link rel="stylesheet" href="https://unpkg.com/leaflet@1.5.1/dist/leaflet.css"
       integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ=="
       crossorigin=""/>
      <script src="https://unpkg.com/leaflet@1.5.1/dist/leaflet.js"
       integrity="sha512-GffPMF3RvMeYyc1LWMHtK8EbPv0iNZ8/oTtHPx9/cc2ILxQ+u905qIwdpULaqDkyBKgOaB57QTMg7ztg8Jm2Og=="
       crossorigin=""></script>
      <style type="text/css">
        body {
           margin: 0;
           padding: 0;
        }
        html, body, #map{
           width: 100%;
           height: 100%;
        }
      </style>
    </head>
    <body>
      <div id="map"></div>
      <script>
          var map = L.map('map').setView([1.4210854715202004e-14, 8.526512829121202e-14], 3.5);
          L.tileLayer('file:///D%3A/wzh_test/qmetatiles0617/img/{z}/{x}/{y}.png', {
            minZoom: 3,
            maxZoom: 4,
            tms: false,
            attribution: '加载xyz瓦片'
          }).addTo(map);
      </script>
    </body>
    </html>

**请注意：**这里的Leaflet的js和css采用的在线方式，在离线环境下，可以将leaflet下载到本地，代码是一样。为了简单起见，这里的图层加载服务采用的是file协议而不是常见的http协议（将瓦片放到nginx或者apache等服务器中间件后的服务形式），在测试的时候，是可以这么使用的。最终的效果如下图所示：

![42f819d3391648e89fa2b9ea5f0f8dca.png][]

## 总结 ##

以上就是本文的主要内容，本文将简单介绍QMetaTiles插件，并利用QMetaTiles插件进行瓦片离线化，将下载后的瓦片在nginx中发布，最后采用Leaflet加载下载的离线瓦片。文章行文仓促，如有问题，欢迎广大朋友批评指正。

[Qgis_XYZ]: https://blog.csdn.net/yelangkingwuzuhu/article/details/131256837
[qgis]: https://plugins.qgis.org/plugins/
[6968393747c6494b87106d4bc81bcd22.png]: https://img-blog.csdnimg.cn/6968393747c6494b87106d4bc81bcd22.png
[a3357ccdfb3146a2be2d49042723b73a.png]: https://img-blog.csdnimg.cn/a3357ccdfb3146a2be2d49042723b73a.png
[e70776b25b8645709287eddbdbc68279.png]: https://img-blog.csdnimg.cn/e70776b25b8645709287eddbdbc68279.png
[65f82b9441dc4325a79c67872dc961dc.png]: https://img-blog.csdnimg.cn/65f82b9441dc4325a79c67872dc961dc.png
[7e7520bb0a3b4a2784ecfe618991da70.png]: https://img-blog.csdnimg.cn/7e7520bb0a3b4a2784ecfe618991da70.png
[a2a2c10446404eb2a62faf73d69850a8.png]: https://img-blog.csdnimg.cn/a2a2c10446404eb2a62faf73d69850a8.png
[654fb15d7a79465dbe473b20da74d28a.png]: https://img-blog.csdnimg.cn/654fb15d7a79465dbe473b20da74d28a.png
[2754a3c1980d49e189c3f81b580d02be.png]: https://img-blog.csdnimg.cn/2754a3c1980d49e189c3f81b580d02be.png
[320222bd24464e61ba0cec79f05a9314.png]: https://img-blog.csdnimg.cn/320222bd24464e61ba0cec79f05a9314.png
[7131b90c869d487ea29bbba484a39064.png]: https://img-blog.csdnimg.cn/7131b90c869d487ea29bbba484a39064.png
[0296bbf6df0b43e081c214821c0106f4.png]: https://img-blog.csdnimg.cn/0296bbf6df0b43e081c214821c0106f4.png
[42f819d3391648e89fa2b9ea5f0f8dca.png]: https://img-blog.csdnimg.cn/42f819d3391648e89fa2b9ea5f0f8dca.png