当前位置：首页 > news >正文

【WebGIS实例】（17）下载瓦片底图并实现离线加载——以天地图为例

news 来源：原创 2025/5/13 19:26:35

前言

在有些项目中，会有部署到无法访问互联网的内网环境中，这时候就会有离线部署应用和地图服务等需求了。

本博客是本着交流学习的目的，分享一个离线瓦片地图的获取方案，以天地图为案例，实现步骤：

安装 QGIS，在 QGIS 中加载天地图
下载天地图
通过 Nginx 发布地图的静态资源
通过地图框架加载资源

实现

首先下载并安装 QGIS：https://www.qgis.org/
然后申请天地图的 token：http://lbs.tianditu.gov.cn/server/MapService.html

1. 加载

在QGIS中新建XYZ瓦片地图：

在这里插入图片描述

影像:：https://t0.tianditu.gov.cn/img_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILECOL={x}&TILEROW={y}&TILEMATRIX={z}&tk=您的密钥
影像注记：https://t0.tianditu.gov.cn/cia_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=cia&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILECOL={x}&TILEROW={y}&TILEMATRIX={z}&tk=您的密钥

2. 下载

在 QGIS 中，可以通过右键顶部工具栏打开面板，打开工具箱面板后在搜索框内搜索 XYZ，打开生成XYZ瓦片(目录) 功能

在这里插入图片描述

选择一个需要下载的范围：可以手动框选，也可以选择图层。比如说想要只下载广东省区域的天地图，则可以通过导入广东省的行政区划边界图层，范围直接选定该行政区划图层即可。
缩放级别：最小缩放级别一般是1，最大是18这取决于你加载的地图服务。实际下载时，因为数据量会很大，建议分批次下载，比如先下 1 到 12，然后下 12 到 17，最后下载 17 到18
其他选项默认即可，最后修改一下输出的目录路径。

于是，我们就得到了一堆分好了层级的天地图瓦片地图图片。

3. 发布

下载 nginx ，修改一下配置文件 nginx.conf：

在这里插入图片描述

  server {
    listen 81;
    server_name localhost;

    location / {
      root  D:/Downloads/tdt/;
      autoindex on; # 打开目录浏览功能
      autoindex_exact_size off;
      autoindex_localtime on; 

      add_header Access-Control-Allow-Origin *;
      add_header Access-Control-Allow-Methods 'GET, POST, OPTIONS';
      add_header Access-Control-Allow-Headers 'DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Authorization';

      if ($request_method = 'OPTIONS') {  
        return 204;  
      }
    }
  }

上面的 D:/Downloads/tdt/ 为离线地图图片存放路径的父级文件夹。

然后启动 nginx 服务，就可以通过 http://localhost:81/访问到地图图片了：

在这里插入图片描述

4. 加载服务

在 QGIS 下载完成同时，会生成一个通过 Leaflet 加载的 HTML 示例文件。

这里，我们通过 Mapbox GL JS 来加载：

代码实现：

addLayer({
  type: "raster",
  id: "离线底图",
  source: {
    type: "raster",
    tiles: [
      "http://localhost:81/{z}/{x}/{y}.png", // 替换为你的本地服务器地址
    ],
    tileSize: 256, // 分辨率
  },
});