Table of contents
2. Add two xyz sources to the layer
Two, Qgis raster tool generation
1. Where is the tool for generating xyz tiles
4. Leaflet loads offline tiles
foreword
In the previous blog, a technical implementation of offline downloading of xyz tiles based on the QMetaTiles plug-in in Qgis was introduced. The original address: XYZ tile offline download method using the QMetaTiles plug-in in Qgis . If there is no special requirement, the solution implemented by this technology can meet the basic requirements of tile offline. I don’t know if there are any friends who have personally practiced it. If so, I don’t know if you have found some problems with the QMetaTiles plug-in during the practice.
Here is a list of the problems I encountered when using the QMetaTiles plug-in to offline tiles. Friends who have the same problem are welcome to leave a message in the comment area. If you know how to solve it, I hope you can let me know. Is there a problem with the setting of the parameters.
- Using the QMetaTiles plug-in, it is very likely that some tiles cannot be downloaded correctly during the download process of large-scale tiles. As a result, when browsing with Leaflet, the user feels that the picture is wrong.
- When using QMetaTiles to download tiles, the plugin must be installed in advance. The tiles downloaded by QMetaTiles are shown in the following figure:
When using the above scheme, it is also necessary to install the QMetaTiles plug-in in the Qgis software environment, which is also an inconvenient thing. As those of us who like to be lazy, is there a faster way to download map tiles without installing plug-ins, and to merge two different layers into one tile at the same time?
The answer is yes. This article will focus on how to download XYZ tiles directly using existing functions in Qgis, introduce in detail how to perform software operations, and then use Leaflet to comprehensively display the downloaded tiles.
1. Related functions of Qgis
1. Data preparation
Our requirement here is to use Qgis to combine and download the 3-4 level map images and label layers of Star Map Earth. Therefore, in Qqis, the base map image and marked image of the star map earth are added to the window. The specific operation steps are as follows:
Create a new xyz connection, first add the map image address to Qgis, the connection information is as follows:
The specific connection is as follows:
https://tiles2.geovisearth.com/base/v1/img/{z}/{x}/{y}?secretId=H7ILfZkmmyCjwSYt5doCpsABO6A&clientId=caa9e56a-615b-4cdf-e566-29e5784eb31d&expireTime=1687048132&sign=2e7a293a7c0642117d1e45ce2b4483d3cd183223361a51c755b75a4d04aa41f5In the same way, add the label layer to Qgis, and the adding page is as follows:
The link address is as follows:
https://tiles3.geovisearth.com/base/v1/cia/{z}/{x}/{y}?secretId=H7ILfZkmmyCjwSYt5doCpsABO6A&clientId=caa9e56a-615b-4cdf-e566-29e5784eb31d&expireTime=1687048132&sign=2e7a293a7c0642117d1e45ce2b4483d3cd183223361a51c755b75a4d04aa41f52. Add two xyz sources to the layer
Add the above two xyz image sources to the layer window, you need to pay attention here, and pay attention to the order when adding. Usually, the image layer is displayed at the bottom as the base map, so double-click the data source at the xyz map source to complete adding the layer. On top of the basemap, overlay the marker layer to make the basemap look richer. The specific effect is as follows:
If the order of adding layers is wrong during the process of adding layers, you can also adjust them in the layer window. Right-click the layer, for example, move to the bottom layer to move the current layer to the bottom layer.
Two, Qgis raster tool generation
Like Arcgis, Qgis also has a rich toolbox support, and they are all out of the box. Help users focus on data display when performing spatial data analysis. The basis for the generation of XYZ tiles described in this article is also to use the raster tools in Qgis. The specific tool is [Generate xyz tiles (catalog)]. It is to support the tiles in the layer to be exported to the specified directory in the form of xyz.
1. Where is the tool for generating xyz tiles
In the working window of Qgis software, the general processing toolbox is located on the right side of the operation interface. Many useful tools are integrated here, including today's leading raster tool.
2. How to generate xyz block
Double-click the link to generate xyz tiles (directories). There is another tool above this link that also generates xyz tiles, but it is stored in the form of MBTiles. The format of MBTiles can be specifically discussed next time. This article does not expand the narrative. After clicking open, the following parameter setting page appears:
The parameter information that needs to be set is described as follows:
| serial number | parameter | illustrate |
| 1 | extend | The download range of the layer, which can be selected from the current layer |
| 2 | minzoom | Minimum level to download |
| 3 | maxzoom | maximum level of download |
| 4 | DPI | 96, resolution |
| 5 | background color | default transparent |
| 6 | tile format | Tile format, default png, can have jpg |
| 7 | tile quality | When the tile format is jpg, you can set the image quality |
| 8 | tile width | 256 |
| 9 | tile height | 256 |
| 10 | tile output directory | The specific directory for saving tiles |
| 11 | load example | Generate the location where leaflet loads the sample program |
After the above parameter settings are completed, click the run button to complete the operation of the tool. You can see real-time progress and command execution parameter tracking, log status, etc. in the interface.
You can see the download status of the tiles in the record tab page. An excerpt is shown below:
QGIS版本：3.16.0-Hannover
QGIS代码版本：43b64b13f3
Qt版本：5.11.2
GDAL版本：3.1.4
GEOS版本：3.8.1-CAPI-1.13.3
PROJ版本：Rel. 6.3.2, May 1st, 2020
处理算法...
正在启动“生成 XYZ 图块（目录）”算法…
参数输入：
{ 'BACKGROUND_COLOR' : QColor(0, 0, 0, 0), 'DPI' : 96, 'EXTENT' : '-20037508.342799999,20037508.342799999,-20037508.342799999,20037508.342799999 [EPSG:3857]', 'METATILESIZE' : 4, 'OUTPUT_DIRECTORY' : 'D:\\wzh_test\\xyzdownload617', 'OUTPUT_HTML' : 'D:/wzh_test/xyzdownload617/index.html', 'QUALITY' : 75, 'TILE_FORMAT' : 0, 'TILE_HEIGHT' : 256, 'TILE_WIDTH' : 256, 'TMS_CONVENTION' : False, 'ZOOM_MAX' : 4, 'ZOOM_MIN' : 3 }
Using 4 CPU Threads:
Generating tiles for zoom level: 3
Generating tiles for zoom level: 4
执行完成，花了13.51 秒
结果：
{'OUTPUT_DIRECTORY': 'D:\\wzh_test\\xyzdownload617',
'OUTPUT_HTML': 'D:/wzh_test/xyzdownload617/index.html'}
载入结果图层
算法“生成 XYZ 图块（目录）”执行已完成
已生成该算法 HTML 格式输出结果。
请打开结果对话框进行检查。Here is a detailed record of the entire tile generation process, input parameters, output results, execution time, etc., which shows the steamer invocation process very intuitively.
3. Download the result
In the tile generation directory just set, you can see two levels of tiles and an index.html file. The following tile information can be seen, indicating that the tool is successfully executed.
4. Leaflet loads offline tiles
The specific technical method of Leaflet loading tiles will not be repeated here, and the specific code is directly posted here.
<!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/[email protected]/dist/leaflet.css"
integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ=="
crossorigin=""/>
<script src="https://unpkg.com/[email protected]/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/xyzdownload617/{z}/{x}/{y}.png', {
minZoom: 3,
maxZoom: 4,
tms: false,
attribution: 'Generated by TilesXYZ'
}).addTo(map);
</script>
</body>
</html>
Reminder: In the above code, the release of tiles is based on the File protocol. In the actual project, it needs to be published as http. Technically, it is only necessary to use middleware such as nginx or apache to publish static resources. The final loading effect is as follows:
Summarize
The above is the main content of this article. This article will focus on how to download XYZ tiles directly using existing functions in Qgis, introduce in detail how to perform software operations, and then use Leaflet to comprehensively display the downloaded tiles. The writing is hasty. If there is any inappropriateness, please leave a message in the comment area for criticism and correction.