经纬志
首页 / MapLibre / 使用示例

矢量瓦片

同一份 PBF 瓦片,用三个图层分别画面、边界与国名。 换颜色、改字号都不需要重新切片,这是矢量瓦片与栅格瓦片最实在的差别。

MapLibre GL JS 4.x · 更新 2026-10-28
源码与运行效果
运行效果

说明

源声明里写瓦片地址模板,图层声明里写 source-layer, 两者缺一不可。示例用的瓦片切到 6 级,包含 countries、centroids、geolines 三个图层, 面与标注分别取自前两个。

国别命名沿用了英文属性 NAME 与 CONTINENT, 着色表达式直接读 CONTINENT,没有写死的颜色表。 数据里多一个大洲,改一处表达式即可,图层结构不用动。

配置取值说明
maxzoom6瓦片实际的切片上限
source-layercountries面与边界都取自该层
source-layercentroids国名标注的锚点
text-fontNoto Sans Regulardemo 字形服务器提供的字体
fill-opacity0.7让底层国界仍能透出

放大超过 6 级后画面变模糊是数据不够,不是渲染问题。 生产底图通常切到 14 级或更高,表达式里的字号与线宽也随级别插值。

看不到任何面时,先确认 source-layer 拼写与瓦片元数据一致。 名字写错不会报错,图层只是安静地什么都不画。