IYATools
GIS

XYZ瓦片是什么

了解GIS中XYZ地图瓦片的基本概念、Z/X/Y坐标规则、瓦片金字塔、工作原理以及XYZ与WMTS、TMS和Vector Tile的区别。

阅读约 94 分钟

XYZ瓦片是什么

XYZ是一种非常常见的Web地图瓦片访问方式。

它通过三个参数：

Z
X
Y

确定一张地图瓦片的位置。

通常使用类似下面的URL：

/{z}/{x}/{y}.png

例如：

/10/843/412.png

可以理解为：

Z = 10
X = 843
Y = 412

它们共同确定一张地图Tile。

简单来说：

XYZ就是通过缩放级别Z、列X和行Y定位地图瓦片的一种常见URL规则。

XYZ解决什么问题

一张完整的世界地图非常大。

如果每次都让服务器返回完整地图：

用户
 ↓
请求整个世界地图
 ↓
服务器生成巨大图片
 ↓
返回

效率非常低。

因此Web地图通常会将地图切成很多小Tile：

完整地图
    ↓
切成很多Tile
    ↓
客户端只加载当前视野需要的Tile

XYZ就是帮助客户端定位这些Tile的一种方式。

XYZ的基本结构

XYZ最核心的结构是：

Z
X
Y

分别表示：

Z
↓
Zoom
缩放级别

X
↓
Column
列

Y
↓
Row
行

因此：

XYZ
├── Z → 缩放级别
├── X → 列
└── Y → 行

XYZ URL

最常见的XYZ URL模板：

https://example.com/{z}/{x}/{y}.png

例如：

https://example.com/10/843/412.png

对应：

Z = 10
X = 843
Y = 412

服务器根据这三个数字找到对应Tile。

Z是什么

Z表示Zoom，也就是地图缩放级别。

例如：

Z = 0

表示世界范围非常大。

随着Z增加：

Z = 1
Z = 2
Z = 3
Z = 4
...

地图越来越详细。

可以理解为：

Z越小
 ↓
范围越大
 ↓
细节越少

而：

Z越大
 ↓
范围越小
 ↓
细节越多

Z=0

在经典Web Mercator XYZ体系中：

Z = 0

整个世界通常使用一张Tile覆盖。

可以理解为：

┌──────────────────────┐
│                      │
│        World         │
│                      │
└──────────────────────┘

Tile数量：

1 × 1

即：

X = 0
Y = 0

Z=1

当：

Z = 1

地图被划分为：

2 × 2

即：

┌──────┬──────┐
│ 0,0  │ 1,0  │
├──────┼──────┤
│ 0,1  │ 1,1  │
└──────┴──────┘

共有：

4

张Tile。

Z=2

当：

Z = 2

地图被划分为：

4 × 4

共有：

16

张Tile。

结构：

┌──┬──┬──┬──┐
│  │  │  │  │
├──┼──┼──┼──┤
│  │  │  │  │
├──┼──┼──┼──┤
│  │  │  │  │
├──┼──┼──┼──┤
│  │  │  │  │
└──┴──┴──┴──┘

XYZ瓦片数量

经典XYZ瓦片体系中：

每个方向的Tile数量 = 2^Z

因此：

Z = 0
2^0 = 1

Z = 1
2^1 = 2

Z = 2
2^2 = 4

Z = 3
2^3 = 8

所以整个世界的Tile数量：

2^Z × 2^Z

也就是：

4^Z

例如：

ZoomX方向Y方向Tile总数
0111
1224
24416
38864
41616256
532321024
10102410241,048,576

因此Zoom增加后，Tile数量会快速增长。

X是什么

X表示Tile的列编号。

例如：

Z = 2

一共有：

4列

那么：

X = 0
X = 1
X = 2
X = 3

对应从左到右的Tile。

       X
       ↓
┌────┬────┬────┬────┐
│ 0  │ 1  │ 2  │ 3  │
└────┴────┴────┴────┘

因此：

X通常表示从左向右的Tile列编号。

Y是什么

Y表示Tile的行编号。

例如：

Z = 2

共有：

4行

因此：

Y = 0
Y = 1
Y = 2
Y = 3

通常从顶部向下增加：

Y
↓
┌────┐
│ 0  │
├────┤
│ 1  │
├────┤
│ 2  │
├────┤
│ 3  │
└────┘

因此：

XYZ中的Y通常从地图顶部向下增加。

XYZ坐标结构

一个完整Tile可以表示为：

Tile
├── Z
│   └── Zoom
│
├── X
│   └── Column
│
└── Y
    └── Row

例如：

Z = 10
X = 843
Y = 412

完整表示：

10 / 843 / 412

XYZ与经纬度

XYZ的X/Y并不是经纬度。

例如：

116.397
39.908

属于地理坐标。

而：

843
412

是Tile坐标。

两者之间需要通过地图投影和Tile计算进行转换。

通常Web地图使用：

EPSG:3857

然后将：

经纬度
 ↓
Web Mercator
 ↓
Pixel
 ↓
Tile X/Y

经纬度到XYZ

基本流程：

Longitude
Latitude
    ↓
EPSG:3857
    ↓
World Pixel
    ↓
Tile X
Tile Y

例如：

经度
纬度

经过投影以后，可以计算：

X
Y

再结合：

Z

确定Tile。

XYZ与Tile Pixel

Tile坐标和像素坐标不是一回事。

例如Tile大小为：

256 × 256

某个地图位置可能对应：

Pixel X = 215832
Pixel Y = 103928

那么：

Tile X = floor(Pixel X / 256)
Tile Y = floor(Pixel Y / 256)

同时可以得到Tile内部像素位置：

Pixel X % 256
Pixel Y % 256

因此：

World Pixel
    ↓
Tile X / Tile Y
    +
Tile内部Pixel

Tile大小

常见XYZ Tile尺寸：

256 × 256

也有：

512 × 512

例如：

┌──────────────────┐
│                  │
│       Tile       │
│                  │
└──────────────────┘
     256 × 256

Tile尺寸会影响：

请求数量
图片大小
渲染性能
网络传输

XYZ瓦片金字塔

XYZ通常采用瓦片金字塔：

             Z0
             ┌─┐

          Z1
        ┌──┬──┐

       Z2
    ┌──┬──┬──┬──┐

    Z3
┌──┬──┬──┬──┬──┬──┬──┬──┐

随着Zoom增加：

Tile越来越多

同时：

地图范围越来越小

因此：

Zoom
 ↓
Tile Matrix
 ↓
X / Y
 ↓
Tile

XYZ地图加载过程

用户打开地图：

打开地图
    ↓
确定中心点
    ↓
确定Zoom
    ↓
计算当前视野范围
    ↓
计算需要的Tile X/Y
    ↓
生成XYZ URL
    ↓
请求Tile
    ↓
浏览器拼接Tile
    ↓
显示地图

例如当前需要：

/10/842/411.png
/10/843/411.png
/10/844/411.png
/10/842/412.png
/10/843/412.png
/10/844/412.png

客户端将这些Tile拼接起来：

┌──────┬──────┬──────┐
│ Tile │ Tile │ Tile │
├──────┼──────┼──────┤
│ Tile │ Tile │ Tile │
└──────┴──────┴──────┘

形成用户看到的完整地图。

XYZ为什么速度快

XYZ地图的核心优势之一就是：

Tile可以缓存

例如：

用户
 ↓
浏览器缓存
 ↓
CDN
 ↓
Tile Server

当用户再次访问同一Tile：

请求
 ↓
Cache
 ↓
直接返回

不需要重新渲染整张地图。

XYZ与Raster Tile

传统XYZ通常返回Raster Tile。

例如：

/10/843/412.png

服务器返回：

PNG

也可能是：

JPEG

因此：

XYZ
 ↓
Raster Tile
 ↓
PNG / JPEG

这是非常常见的Web地图底图形式。

XYZ与Vector Tile

XYZ也可以用于访问Vector Tile。

例如：

/{z}/{x}/{y}.pbf

返回：

PBF

这时：

XYZ
 ↓
Vector Tile
 ↓
PBF

客户端拿到的不是图片，而是矢量数据。

因此：

Raster XYZ
 ↓
PNG / JPEG

Vector Tile
 ↓
PBF

Raster XYZ

Raster XYZ最常见。

例如：

https://example.com/{z}/{x}/{y}.png

服务器返回：

PNG图片

优点：

  • 简单
  • 兼容性好
  • 加载快
  • 适合底图
  • 容易缓存

缺点：

  • 客户端无法直接获取Geometry
  • 样式修改不灵活
  • 放大到高Zoom后图片可能出现像素化

Vector XYZ

Vector Tile可以使用：

https://example.com/{z}/{x}/{y}.pbf

客户端获取：

Point
LineString
Polygon

然后自己渲染。

优势：

客户端动态样式
+
Geometry交互
+
数据属性
+
高质量缩放

因此现代WebGIS越来越多使用Vector Tile。

XYZ与WMTS

XYZ和WMTS都可以提供地图瓦片。

但是两者定位不同。

XYZ：

/{z}/{x}/{y}.png

非常简单。

WMTS：

Layer
TileMatrixSet
TileMatrix
TileRow
TileCol

更加标准化。

可以理解为：

XYZ
 ↓
简单的Tile URL规则

而：

WMTS
 ↓
完整的OGC瓦片服务标准

XYZ与WMTS对比

特性XYZWMTS
类型Tile URL约定OGC服务标准
URLz/x/y标准化请求
GetCapabilities通常没有有
TileMatrixSet通常没有有
使用难度低较高
Web地图非常常用常用
配置简单完整
服务描述简单完整

因此Web开发中经常直接使用XYZ：

/{z}/{x}/{y}.png

而政府、测绘、专业GIS服务中经常会遇到WMTS。

XYZ与TMS

XYZ和TMS都使用：

Z
X
Y

但是最容易产生问题的是：

Y轴方向

XYZ通常：

Y从顶部向下

TMS常见：

Y从底部向上

因此：

XYZ Y
 ↓
Top → Bottom

而某些TMS：

TMS Y
 ↓
Bottom → Top

如果把TMS当XYZ使用：

Tile位置错误

甚至可能导致整个地图无法正确显示。

TMS与XYZ Y转换

在相同Zoom下，如果采用典型的TMS与XYZ Y轴翻转规则：

TMS_Y = (2^Z - 1) - XYZ_Y

例如：

Z = 3

则：

2^3 - 1 = 7

如果：

XYZ_Y = 2

那么：

TMS_Y = 7 - 2
       = 5

所以：

XYZ
Y = 2

对应：

TMS
Y = 5

XYZ与OpenLayers

OpenLayers可以加载XYZ Tile。

基本结构：

Map
 ↓
TileLayer
 ↓
XYZ Source
 ↓
Tile Server

例如：

XYZ
 ↓
/{z}/{x}/{y}.png

OpenLayers负责：

计算当前视野
 ↓
计算Tile
 ↓
请求Tile
 ↓
拼接显示

XYZ与Leaflet

Leaflet对XYZ Tile支持非常简单。

典型逻辑：

Leaflet
 ↓
TileLayer
 ↓
XYZ URL

例如：

/{z}/{x}/{y}.png

Leaflet会自动根据：

地图中心
Zoom
视野范围

计算需要的Tile。

XYZ与Cesium

Cesium也可以使用Tile服务作为影像底图。

结构可以理解为：

Cesium
 ↓
Imagery Layer
 ↓
Tile Provider
 ↓
XYZ / Tile Server

不过Cesium使用的具体Tile坐标体系可能与普通XYZ服务存在差异，因此接入第三方服务时需要确认：

Projection
Tile Scheme
X/Y方向
Zoom
Tile Size

XYZ常见图片格式

常见：

PNG
JPEG
WebP

例如：

/{z}/{x}/{y}.png

或者：

/{z}/{x}/{y}.jpg

也可能：

/{z}/{x}/{y}.webp

PNG

适合：

  • 透明地图
  • 道路
  • 专题地图
  • 线划地图

JPEG

适合：

  • 卫星影像
  • 航空影像
  • 照片类底图

WebP

适合：

  • Web地图
  • 需要降低网络传输量的场景

XYZ中的NoData Tile

某些Tile范围内可能没有数据。

例如：

海洋
空白区域

服务器可能返回：

空白Tile

或者：

404

客户端通常需要正确处理这些情况。

XYZ缓存

XYZ非常适合缓存。

典型架构：

                 用户
                   ↓
                  CDN
                   ↓
              Tile Cache
                   ↓
              Tile Server
                   ↓
              GIS数据

对于热门Tile：

请求
 ↓
CDN Cache Hit
 ↓
直接返回

因此可以支持非常高的访问量。

XYZ的目录结构

服务器上的Tile经常按照：

z/x/y

组织。

例如：

tiles/
├── 0/
│   └── 0/
│       └── 0.png
│
├── 1/
│   ├── 0/
│   │   ├── 0.png
│   │   └── 1.png
│   │
│   └── 1/
│       ├── 0.png
│       └── 1.png
│
└── 2/
    ├── 0/
    ├── 1/
    ├── 2/
    └── 3/

这种结构非常容易被：

Nginx
CDN
对象存储

直接提供。

XYZ与CDN

由于Tile通常是静态资源：

PNG
JPEG
WebP
PBF

非常适合部署到CDN。

例如：

用户
 ↓
CDN
 ↓
Tile

可以减少GIS服务器压力。

因此大型地图系统通常会重点优化：

Tile Cache
+
CDN
+
浏览器缓存

XYZ的优点

1. 简单

只需要：

Z
X
Y

即可定位Tile。

2. 容易实现

服务器甚至不需要复杂GIS服务。

只需要：

URL
 ↓
对应文件

即可提供Tile。

3. 性能高

Tile可以直接缓存。

4. 适合Web地图

OpenLayers、Leaflet等前端地图框架都支持Tile地图。

5. 适合CDN

静态Tile可以部署到：

CDN
对象存储
Nginx

XYZ的缺点

1. 标准化程度低

XYZ本身更像是一种通用约定，而不是完整的GIS服务标准。

2. 服务描述信息少

通常只有：

/{z}/{x}/{y}

不像WMTS可以通过Capabilities描述：

Layer
CRS
TileMatrixSet
Format
Scale

3. 坐标体系可能不一致

看到：

/{z}/{x}/{y}

不能完全保证：

EPSG:3857

必须查看服务说明。

4. Y轴规则需要确认

不能把所有：

z/x/y

都默认理解成完全相同的Tile Scheme。

XYZ常见问题

1. 地图上下颠倒

通常是：

XYZ

和：

TMS

Y轴规则不同导致。

2. Tile位置错位

可能是：

CRS不一致
TileMatrix不一致
Origin不一致

导致。

3. 地图整体偏移

常见原因：

EPSG:4326

和：

EPSG:3857

混用。

4. Tile加载404

可能是：

URL模板错误
Z/X/Y超出范围
Tile文件不存在

5. 地图缩放级别不一致

不同服务的Zoom定义可能存在差异。

因此接入服务时最好确认：

minZoom
maxZoom
tileSize
projection
tileScheme

XYZ完整工作流程

可以将XYZ理解成：

用户
 ↓
地图中心 + Zoom
 ↓
计算当前视野
 ↓
计算Tile范围
 ↓
计算Z/X/Y
 ↓
生成Tile URL
 ↓
请求服务器
 ↓
返回Tile
 ↓
缓存
 ↓
拼接显示

XYZ与GIS数据的关系

XYZ本身不是GIS原始数据格式。

它是：

地图数据
 ↓
切片
 ↓
Tile
 ↓
XYZ访问

例如：

Shapefile
GeoJSON
PostGIS
GeoPackage
    ↓
地图服务器
    ↓
渲染 / 切片
    ↓
XYZ Tile

因此：

XYZ解决的是地图数据如何按Tile被访问，而不是原始空间数据如何存储。

XYZ与Feature

XYZ Raster Tile：

Tile
 ↓
PNG
 ↓
像素

客户端无法直接获得：

Feature
Geometry
Attributes

而Vector Tile：

Tile
 ↓
Vector Features
 ↓
Geometry + Properties

因此如果需要地图上的：

点击道路
查询属性
高亮区域
动态改变样式

通常Vector Tile更合适。

XYZ与Vector Tile结合

现代WebGIS中可以：

/{z}/{x}/{y}.pbf

例如：

Vector Tile
    ↓
PBF
    ↓
Point
LineString
Polygon
    ↓
客户端渲染

这种方式可以同时获得：

Tile缓存优势
+
矢量数据
+
客户端样式
+
地图交互

XYZ知识结构

可以这样理解：

XYZ
├── Z
│   └── Zoom
│
├── X
│   └── Column
│
├── Y
│   └── Row
│
├── Tile
│   ├── PNG
│   ├── JPEG
│   ├── WebP
│   └── PBF
│
├── Tile Pyramid
│
├── Projection
│   └── 常见EPSG:3857
│
└── URL
    └── /{z}/{x}/{y}

XYZ、TMS、WMTS、Vector Tile总结

技术核心概念常见内容
XYZZ/X/Y瓦片URLPNG/JPEG
TMSTile服务规范Raster Tile
WMTSOGC瓦片服务标准PNG/JPEG
Vector Tile矢量瓦片PBF
WMS按范围生成地图PNG/JPEG

可以简单记忆：

XYZ
 ↓
简单Tile URL

TMS
 ↓
Tile服务规范

WMTS
 ↓
OGC标准Tile服务

Vector Tile
 ↓
矢量数据Tile

WMS
 ↓
动态地图图片

总结

XYZ是现代WebGIS中最常见的地图瓦片访问方式之一。

它使用：

Z
X
Y

定位Tile：

Z
 ↓
Zoom

X
 ↓
Column

Y
 ↓
Row

典型URL：

/{z}/{x}/{y}.png

例如：

/10/843/412.png

表示：

Zoom = 10
Column = 843
Row = 412

经典Web Mercator XYZ体系中：

每个方向Tile数量 = 2^Z

因此：

Z越大
 ↓
Tile数量越多
 ↓
地图越详细

XYZ最大的优势是：

简单
+
高性能
+
容易缓存
+
适合CDN
+
适合Web地图

需要特别注意：

CRS
Tile Size
Zoom
X/Y规则
TMS与XYZ差异

最终可以记住：

XYZ就是用Z（缩放级别）、X（列）、Y（行）定位地图Tile的一种简单而常用的WebGIS瓦片访问方式。

🧰

相关工具

使用 IYATools 在线工具快速处理 GIS 数据

📐
WKT解析
在线解析WKT空间数据
→
🗺️
GeoJSON工具
在线查看和处理GeoJSON地理要素
→
📊
CSV转GeoJSON
将CSV坐标数据转换为GeoJSON要素
→
← 返回 GIS 指南