企业官网建设流程全解析

核心概念

在线瓦片地图是一种把地图切成无数小方块（瓦片），按需从服务器下载并拼接显示的技术。它是Google Maps、百度地图、高德地图等所有在线地图服务的基础

为什么切瓦片？

想象一下，如果把全世界的卫星影像做成一张大图，分辨率哪怕只有1 米/像素，这张图也会有几十 TB，不可能一次性加载到内存里。

解决办法：把地图切成固定大小的小方块（通常是256×256 像素），按层级组织，用户看到哪里就下载哪里的瓦片。

三个关键参数

URL 模板

每个瓦片都有一个唯一的 URL，格式是：

https://tile.openstreetmap.org/${z}/${x}/${y}.png

当你在地图上查看北京时，客户端计算出当前视野需要哪些(z, x, y)组合，然后批量下载这些瓦片拼起来。

缩放级别示意

z=0: 全球 = 1 张瓦片 (256×256 像素显示整个地球) z=1: 全球 = 4 张瓦片 (2×2 网格) z=2: 全球 = 16 张瓦片 (4×4 网格) z=10: 全球 ≈ 100 万张瓦片 (城市级别) z=18: 全球 ≈ 687 亿张瓦片 (建筑级别，能看到屋顶)

结合阅读：C++ 比较好用的地图库 (尝试) QGeoView-CSDN博客

QGeoView 中的实现

预置的在线图层：

• OSM—OpenStreetMap（免费开源）
• Google— Google Maps（卫星/混合/街道三种模式）
• Bing— Bing Maps（三种模式）
• 自定义— 任何符合/${z}/${y}/${x}格式的 XYZ 瓦片服务

与离线地图的区别

QGeoView 的 示例用的就是在线瓦片，所以运行时需要联网才能看到地图。

讲讲这几种模式

三种地图模式

无论 Google 还是 Bing，都提供三种模式，对应枚举QGV::TilesType：

1. Schema（街道/矢量模式）

就是最常见的普通地图，显示道路、地名、行政区划、POI 标注等。

┌──────────────────────────────┐ │ ═══ 长安街 ═══ │ │ ┌────┐ ┌────┐ │ │ │公园│ │学校│ 朝阳区 │ │ └────┘ └────┘ │ │ ▓▓ 河流 ▓▓ │ └──────────────────────────────┘

• 用途：导航、查找地点、看行政区划
• 特点：矢量风格，信息密度高，适合日常使用

2. Satellite（卫星影像模式）

真实的卫星/航空照片，能看到建筑、植被、水体等地表实景。

┌──────────────────────────────┐ │ 🟩🟩🟫🟫🟩🟩 │ │ 🟩🏠🟫🟩 │ │ 🟫🏠🏠🟫🟩 ← 真实影像 │ │ 🟩🟩🟫🟫🟩🟩 │ └──────────────────────────────┘

• 用途：查看地形地貌、建筑分布、土地利用
• 特点：真实照片，但没有文字标注，不认识路的话很难定位

3.Hybrid（混合模式）

卫星影像 + 文字标注叠加。底层是卫星照片，上面覆盖道路名称、地名等标签

┌──────────────────────────────┐ │ 🟩🟩🟫🟩🟩 │ │ ═══ 长安街 ═══ ← 叠加标注 │ │ 🟩🏠🏠🌳🟩 │ │ 朝阳区 ← 叠加标注 │ └──────────────────────────────┘

• 用途：既要看实景又要知道地名（最常用）
• 特点：卫星底图 + 透明文字层，两全其美

对比总结

在 QGeoView 中的使用

// Google 三种模式 new QGVLayerGoogle(QGV::TilesType::Schema); // 街道图 new QGVLayerGoogle(QGV::TilesType::Satellite); // 卫星图 new QGVLayerGoogle(QGV::TilesType::Hybrid); // 混合图 // Bing 同理 new QGVLayerBing(QGV::TilesType::Schema); new QGVLayerBing(QGV::TilesType::Satellite); new QGVLayerBing(QGV::TilesType::Hybrid);

关于 OSM 和 CUSTOM_OSM

• OSM— OpenStreetMap 只提供Schema（街道）模式，没有卫星图
• CUSTOM_OSM— 自定义XYZ 瓦片源，URL 模板里用${z}/${y}/${x}占位符，可以接入任何符合该规范的瓦片服务（如 ArcGIS、天地图、高德等）

截图中 CUSTOM_OSM 配的是ArcGIS 世界影像服务，效果类似于 Satellite 模式。

我想知道，离线地图的原理是否也是瓦片？

是的，离线地图的核心也是瓦片

离线地图和在线地图使用完全相同的瓦片体系（z/x/y 坐标、256×256 像素、同样的投影），唯一的区别是瓦片的来源不同。

在线 vs 离线对比

在线地图： 用户视野 → 计算需要哪些(z,x,y) → HTTP请求 → 服务器返回瓦片图片 → 显示 离线地图： 用户视野 → 计算需要哪些(z,x,y) → 本地查找 → 从文件/数据库读取瓦片图片 → 显示

离线瓦片的存储方式

1. 文件夹结构（最简单）

直接按目录层级存放，和在线 URL 一一对应：

map_tiles/ ├── 0/ │ └── 0/ │ └── 0.png ← z=0, x=0, y=0 ├── 10/ │ ├── 512/ │ │ ├── 256.png ← z=10, x=512, y=256 │ │ └── 257.png │ └── 513/ │ ├── 256.png │ └── 257.png └── 18/ └── ...

2. MBTiles 格式（最常用）

把瓦片打包进一个SQLite 数据库文件，结构如下：

-- MBTiles 标准表结构 CREATE TABLE tiles ( zoom_level INTEGER, tile_column INTEGER, tile_row INTEGER, tile_data BLOB -- 图片二进制数据（PNG/JPG/WebP） );

一个 MBTiles 文件就是一个.db文件，方便携带和分发。

3. GeoPackage

也是 SQLite 数据库，是MBTiles 的扩展标准，除了瓦片还能存矢量数据。

瓦片数据从哪来？

为什么都用瓦片？

因为瓦片方案解决了三个核心问题：

1. 按需加载—只看哪块加载哪块，不用加载整张地图
2. 多尺度— 缩放时自动切换不同 z 级别的瓦片，远看粗略、近看精细
3. 缓存友好— 每块瓦片是独立文件，天然适合缓存（无论内存缓存、磁盘缓存还是 CDN 缓存）

所以不管是Google Maps、百度地图、高德地图，还是军用离线地图系统，底层都是同一套瓦片体系，只是数据源不同而已。