可以在传单地图中设置 MBTiles 的样式吗？

Question

我正在尝试在 Leaflet 地图中显示 .mbtiles 图层（由Tippecanoe创建）。图块加载了Leaflet.TileLayer.MBTiles。到目前为止，地图上看不到任何内容，尽管 MBTiles 加载良好并且可以在浏览器的检查器控制台中识别。我猜是因为我没有使用 MapBox Studio（或类似的）对 MBTiles 进行外部样式设置，所以它们没有分配任何样式（颜色、大小等）。

是否可以在 html 中使用 CSS、JS 或其他方式设置 .mbtiles 样式？我发现 .mbtiles 通常有一个关联的 style.json 文件——是否可以编写我自己的文件并在 html 或 javascript 中调用它来实现 Leaflet？

这是我的代码的相关部分：

var map = L.map('map', {layers: [ESRIOceanBaseMap]}).setView([33.985, -120.25], 12);
var mb = L.tileLayer.mbTiles('https://raw.githubusercontent.com/evantdailey/map_testing/master/2016668FA.mbtiles', {
    type: 'circle',
    minZoom: 0,
    maxZoom:25
}).addTo(map);

我希望在 CSS 中做这样的事情（似乎不起作用）：

#mb {
    color: black
}

如果以上都不可能，是否还有其他方法可以为 Leaflet 设置 MBTiles 样式，而无需通过 MapBox Studio 并为每个图层分配样式？目标是以编程方式创建多个图层（每个图层包含数千个点），因此单独设置样式和导出每个图层并不理想。

Answer 1

MBTiles格式可用于矢量或栅格数据。对于由tippecanoe 创建的MBTiles 集，它包含矢量数据。

尽管可能没有明确编写，但 Leaflet.TileLayer.MBTiles 插件仅处理光栅图块（PNG 或 JPG）（截至今天）。

要渲染矢量数据（使您能够在运行时对其进行样式设置），您应该查看Leaflet.VectorGrid插件。不幸的是，它目前不能使用矢量 MBTiles 集开箱即用。

如果你有兴趣，你可以看看https://github.com/Leaflet/Leaflet.VectorGrid/issues/54