Leaflet 使用 Leaflet.VectorGrid 渲染 Protobuf 格式矢量瓦片时，若未正确匹配图层名称与样式配置，会导致样式失效（如始终显示默认蓝色），本文详解如何通过指定正确的图层键名（如 'default'）绑定自定义样式。
leaflet 使用 `leaflet.vectorgrid` 渲染 protobuf 格式矢量瓦片时，若未正确匹配图层名称与样式配置，会导致样式失效（如始终显示默认蓝色），本文详解如何通过指定正确的图层键名（如 `'default'`）绑定自定义样式。
在使用 L.vectorGrid.protobuf 加载矢量瓦片时，一个常见却容易被忽略的关键点是：vectorTileLayerStyles 对象的键名必须严格匹配瓦片数据中实际存在的图层名称。Protobuf 矢量瓦片（如由 Tippecanoe、Tegola 或 custom tile server 生成）通常包含一个或多个命名图层（layer name），例如 "sliced"、"buildings" 或默认的 "default"。Leaflet.VectorGrid 会遍历瓦片中的每个图层，并尝试在 vectorTileLayerStyles 中查找同名键来应用样式；如果找不到匹配项，它将回退到内置默认样式（Leaflet 的 L.Path 默认描边色为 #007bff，即蓝色，且无填充），从而导致你看到“只有蓝色几何体”——并非样式未生效，而是根本未命中。
在你的代码中，你定义了：
vectorTileLayerStyles: {
'sliced': function (properties, zoom) { /* ... */ }
}
但实际瓦片数据中的图层名很可能不是 'sliced'，而是 'default'（尤其当服务端未显式设置图层名时，许多工具默认使用 "default"）。因此，样式函数从未被调用，所有要素均使用 Canvas/SVG 渲染器的默认样式（蓝色描边、无填充）。
✅ 正确做法是：先确认瓦片真实图层名，再对齐键名。最稳妥的调试方式是临时添加 onEachFeature 回调并打印图层信息：
const vectorGrid1 = L.vectorGrid.protobuf('http://localhost:8080/tiles/test1/{z}/{x}/{y}', {
fetchOptions: { headers: { 'Authorization': `Bearer ${token}` } },
rendererFactory: L.canvas.tile,
vectorTileLayerStyles: {
// ✅ 使用 'default' 键（最常见默认图层名）
default: {
fillColor: '#e74c3c', // 红色填充
fillOpacity: 0.7,
color: '#c0392b', // 深红描边
weight: 1.5,
opacity: 1
}
},
// ? 调试用：查看实际图层结构（首次加载后控制台检查）
onEachFeature: (feature, layer) => {
console.log('Feature layer:', feature.layer); // 输出真实图层名
}
}).addTo(map);
⚠️ 注意事项：
- 不要依赖 function(properties, zoom) 形式的样式函数来动态计算颜色（除非确实需要属性驱动样式），静态对象写法更简洁、性能更好，且避免因函数未执行导致样式丢失；
- 若服务端明确输出了非 default 的图层名（如通过 tippecanoe -l sliced 设置），请确保 vectorTileLayerStyles 中的键名完全一致（区分大小写）；
- fill: true 是冗余的（只要 fillColor 存在即启用填充），可省略；
- 确保 rendererFactory 与样式兼容：L.canvas.tile 支持大多数样式选项，而 L.svg.tile 在高频渲染下可能有性能差异；
- 若仍不生效，请用浏览器开发者工具 Network 面板检查 .pbf 响应，用 protovis 或在线解析器（如 vt-pbf-viewer）验证瓦片内图层名称。
总结：矢量瓦片样式失效的根本原因几乎总是 图层名称不匹配。将 vectorTileLayerStyles 的键从假设的 'sliced' 改为实际存在的 'default'（或通过调试确认的真实名称），即可立即恢复预期颜色与填充效果。这是集成 Protobuf 矢量瓦片时最关键的配置细节之一。
