Question

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

是否可以使用CSS，JS或其他方式在html中设置样式.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格式可用于 vector 或 raster 数据。对于由tippecanoe创建的MBTiles集，它包含 vector 数据。

虽然可能没有明确写出，但Leaflet.TileLayer.MBTiles插件只处理 raster 图块（PNG或JPG）（截至今天）。

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

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

Answer 2

MBTiles specification说： “在Tile Map Service Specification之后，zoom_level，tile_column和tile_row列必须对图块的位置进行编码”。这意味着Y编号从南到北排列，这与WMTS服务（如OpenStreetMap）中通常使用的编号相反。要在两个Y轴方向之间切换，请使用Y'= 2 ^ zoom-1-Y。我列举了一些错误地编号MBTiles的示例，结果是显示了赤道另一侧的区域。而且，这可能根本不包含在特定的图块集中，这会使您留下空白的地图。检查这是否也是您的问题根源。

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

2 个答案: