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

Question

我正在尝试显示 .mbtiles 层（由 Tippecanoe) in a Leaflet map. The tiles are loaded with Leaflet.TileLayer.MBTiles 创建）。到目前为止，地图上看不到任何东西，尽管 MBTiles 加载正常并且可以在浏览器的检查器控制台中识别。我是猜测是因为我没有使用 MapBox Studio（或类似软件）对 MBTiles 进行外部样式设置，所以它们没有指定任何样式（颜色、大小等）。

是否可以在 html 中使用 CSS、JS 或其他方式设置 .mbtiles 的样式？我发现通常 .mbtiles 有一个关联的 style.json 文件——是否可以编写我自己的文件并在 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
}

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

Answer 1

MBTiles 格式可用于 vector 或 raster 数据。对于 tippecanoe 创建的 MBTiles 集，它包含 vector 数据。

尽管可能没有明确写入，Leaflet.TileLayer.MBTiles 插件仅处理 raster tiles（PNG 或 JPG）（截至今天）。

要呈现 vector 数据（使您能够在运行时设置样式），您应该查看 Leaflet.VectorGrid 插件。不幸的是，它目前不能与矢量 MBTiles 集一起开箱即用。

有兴趣的可以看看https://github.com/Leaflet/Leaflet.VectorGrid/issues/54

Answer 2

MBTiles specification 说： "The zoom_level, tile_column, and tile_row columns MUST encode the location of the tile, following the Tile Map Service Specification"。这意味着 Y 编号从南到北，这与 WMTS 服务（如 OpenStreetMap）中通常使用的编号相反。要在两个 Y 轴方向之间切换，请使用 Y' = 2^zoom - 1 - Y。我遇到了一些 MBTiles 编号错误的示例，结果显示了赤道另一侧的区域。这可能根本不包含在特定的图块集中，这会给您留下一张空地图。检查这是否也是您问题的根源。

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

Possible to style MBTiles in a leaflet map?

javascript

css

leaflet

mbtiles