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

Question

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

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

这是我代码的相关部分：

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

Answer 2

MBTiles 规范说： "zoom_level、tile_column和tile_row列必须按照切片地图服务规范对切片的位置进行编码"。这意味着 Y 编号从南到北，与 WMTS 服务(如 OpenStreetMap)中通常使用的编号相反。要在两个 Y 轴方向之间切换，请使用 Y' = 2^zoom - 1 - Y。 我列举了一些MBTiles编号错误的例子，其效果是显示了赤道对面的区域。这可能根本不包含在特定的图块集中，这会给您留下一张空地图。检查这是否也是问题的根源。