javascript - 可以在传单 map 中设置 MBTiles 的样式吗？

Question

我正在尝试在 Leaflet map 中显示 .mbtiles 层(由 Tippecanoe 创建)。瓷砖加载了 Leaflet.TileLayer.MBTiles .到目前为止， map 上看不到任何东西，尽管 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 插件仅处理 raster tiles(PNG 或 JPG)(截至今天)。

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

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