我正在尝试在Leaflet映射中显示.mbtiles层(由Tippecanoe创建)。这些图块会加载Leaflet.TileLayer.MBTiles。尽管MBTiles可以很好地加载并且可以在浏览器的检查器控制台中识别,但到目前为止,在 map 上什么都看不到。我猜是因为我没有使用MapBox Studio(或类似工具)从外部设置MBTiles的样式,所以它们没有分配任何样式(颜色,大小等)。

是否可以在CSS中使用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并为每个图层分配样式?目标是以编程方式创建多个图层(每个图层包含数千个点),因此单独设置样式并导出每个图层将不理想。

最佳答案

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

尽管可能未明确编写,但是Leaflet.TileLayer.MBTiles插件仅处理栅格图块(PNG或JPG)(截至今天)。

要渲染矢量数据(使您可以在运行时对其进行样式设置),应查看Leaflet.VectorGrid插件。不幸的是,在设置了矢量MBTiles的情况下,它当前不能开箱即用。

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

关于javascript - 可以在传单 map 中设置MBTiles的样式吗?,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/48175582/

10-11 06:05