天地图离线瓦片数据下载及本地化部署

前端程序员_花姐夫Jun

已于 2025-07-25 15:25:45 修改

阅读量1k

点赞数 15

CC 4.0 BY-SA版权

分类专栏： leaflet学习笔记文章标签：服务器 linux 运维

于 2025-07-21 18:53:59 首次发布

本文链接：https://blog.csdn.net/u012917880/article/details/149512680

leaflet学习笔记专栏收录该内容

12 篇文章

订阅专栏

在 QGIS 中使用天地图插件和 Qtiles 插件下载天地图的 XYZ 切片到本地，可以按照以下步骤进行操作：

1. 安装天地图插件

QGIS 本身并不直接支持天地图（Tianditu），但你可以通过安装插件来实现。以下是安装天地图插件的步骤：

1. 打开 QGIS：启动 QGIS 软件。

2. 进入插件管理器：

点击菜单栏中的 插件。
选择 管理并安装插件。

3. 搜索天地图插件：

在插件管理器中，点击 所有 标签。
在搜索框中输入 天地图 或 Tianditu。
找到合适的插件并安装。例如，可以搜索 Tianditu 插件。

4. 启用插件：

安装完成后，插件会自动启用。如果没有自动启用，可以在 已安装 标签中找到并启用它。

步骤如下图所示

2. 下载安装 Qtiles 插件

Qtiles 插件可以帮助你下载地图切片到本地。以下是安装和使用 Qtiles 插件的步骤：

1. 进入插件管理器：

点击菜单栏中的 插件。
选择 管理并安装插件。

2. 搜索 Qtiles 插件：

在插件管理器中，点击 所有 标签。
在搜索框中输入 Qtiles。
找到 Qtiles 插件并安装。

3. 启用 Qtiles 插件：

安装完成后，插件会自动启用。如果没有自动启用，可以在 已安装 标签中找到并启用它。

4. 配置 Qtiles 插件：

安装并启用 Qtiles 插件后，点击菜单栏中的 插件。
选择 Qtiles。

3.下载天地图 XYZ 切片到本地

1. 配置Tianditu插件

(1) 添加天地图密钥

申请天地图API密钥：
访问天地图官网注册 → 进入控制台创建应用 → 获取服务密钥（Key）。
在QGIS中：
插件 → Tianditu → Tianditu Plugin → 点击齿轮图标（设置）→ 输入密钥 → 保存

(2) 加载图层

影像底图：
Tianditu插件面板 → 图层类型选"img_w"（影像）→ 点击"添加"
（图层名：Tianditu-img）
影像注记：
图层类型选"cia_w"（中文注记）→ 点击"添加"
（图层名：Tianditu-cia）

注意：确保注记图层在底图之上（拖动图层顺序）。

4. 使用QTiles导出离线瓦片

(1) 设置导出范围

在QGIS画布中缩放至目标区域
创建书签（方便后续定位）：
视图 → 书签 → 新建书签

(2) 配置QTiles参数

打开QTiles：
插件 → QTiles → QTiles

输出设置：
输出目录：选择保存位置（如C:/Users/admin/Desktop/tianditu），最好路径不要有中文

范围设置：
选当前地图范围（Canvas extent）
缩放级别：
最小缩放：1（全国概览）
最大缩放：18（街道细节，按需调整）
瓦片格式：
选PNG（保留透明度）或JPG（体积小）

5. 栅格工具下载生成XYZ切片导出离线瓦片（推荐）

后面体验过QTiles插件后发现没有栅格工具切片快，栅格工具切片效果和体验要好，步骤如下：

导出后的离线瓦片数据

导出的离线瓦片数据使用例子

6. 执行导出

点击运行 → 等待完成（时间取决于区域大小和缩放层级）
输出结果：
文件夹：包含/z/x/y.png瓦片层级

常见问题解决

天地图无法加载：

检查API密钥有效性
切换图层类型（如img_w改为img，国内版需ICP备案）
注记不显示：
确保注记图层在顶部且未关闭
检查坐标系：所有图层需为[EPSG:3857](https://zhida.zhihu.com/search?content_id=260642673&content_type=Article&match_order=1&q=EPSG%3A3857&zhida_source=entity)（Web墨卡托）
QTiles导出失败：
减少缩放层级（如18→16）
缩小导出范围（分块导出）
关闭其他程序释放内存

高级技巧

批量导出多区域：
使用处理工具箱 → 创建网格生成范围 → 用批处理运行QTiles
自定义注记样式：
导出前在QGIS中修改注记图层符号（如字体、颜色）
集成到Leaflet：
用Leaflet库加载离线瓦片：

L.tileLayer('file:///C:/Users/admin/Desktop/tianditu/tiandiVector/{z}/{x}/{y}.png', { attribution: 'My Tianditu Map' }).addTo(map);

通过以上步骤，您将获得一套完整的离线天地图影像+注记瓦片，适用于野外作业或内网部署。导出前建议用预览模式（QTiles选项）测试小范围区域。

7. 部署到nginx

使用 ‘file:///C:/Users/admin/Desktop/tianditu/tiandiVector/{z}/{x}/{y}.png’ 这种方式访问天地图图层是可以的，但是对于项目开发来说太麻烦，而且地图文件普遍都很大，所以这里还需要通过nginx离线部署一份地图服务,对于nginx的安装可以学习"CentOS 系统上部署一个简单的 Web 应用程序"

nginx配置文件内容如下：

html文件夹下的结构如下：

将服务中加入一个ouput.html文件，这个就是leflet地图调用天地图服务的例子

<!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.9.4/dist/leaflet.css"
          integrity="sha384-sHL9NAb7lN7rfvG5lfHpm643Xkcjzp4jFvuavGOndn6pjVqS6ny56CAt3nsEVT4H" crossorigin=""/>
    <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"
            integrity="sha384-cxOPjt7s7Iz04uaHJceBmS+qpjv2JkIHNVcuOrM+YHwZOmJGBXI00mdUXEq65HTH" 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>
    //矢量地图vec_w跟影像地图img_w的切换，并且添加影像cia_w标注和矢量标注cva_w标注
    var map = L.map('map', {attributionControl: false}).setView([36.4, 105.836], 7);
    L.control.attribution({prefix: false}).addTo(map);
    var tilesource_layer = L.tileLayer('http://121.37.220.19:9001/img_w/{z}/{x}/{y}.png', {
        minZoom: 5,
        maxZoom: 9,
        tms: false,
        attribution: 'Created by QGIS'
    }).addTo(map);
    var vec_layer = L.tileLayer('http://121.37.220.19:9001/vec_w/{z}/{x}/{y}.png', {
        minZoom: 5,
        maxZoom: 9,
        tms: false,
        attribution: 'Created by QGIS'
    });
    var cia_layer = L.tileLayer('http://121.37.220.19:9001/cia_w/{z}/{x}/{y}.png', {
        minZoom: 5,
        maxZoom: 9,
        tms: false,
        attribution: 'Created by QGIS'
    });
    var cva_layer = L.tileLayer('http://121.37.220.19:9001/cva_w/{z}/{x}/{y}.png', {
        minZoom: 5,
        maxZoom: 9,
        tms: false,
        attribution: 'Created by QGIS'
    });
    var ibo_layer = L.tileLayer('http://121.37.220.19:9001/ibo_w/{z}/{x}/{y}.png', {
        minZoom: 5,
        maxZoom: 9,
        tms: false,
        attribution: 'Created by QGIS'
    });
    var baseMaps = {
        "影像": tilesource_layer,
        "矢量": vec_layer,
    };
    //标注地图cia_w/cva_w的切换加载底图上
    var overlayMaps = {
        "边境线": ibo_layer,
        "影像标注": cia_layer,
        "矢量标注": cva_layer
    };

    L.control.layers(baseMaps, overlayMaps).addTo(map);
</script>
</body>
</html>