我正在尝试在 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 并为每一层分配样式?目标是以编程方式创建多个图层(每个图层包含数千个点),因此单独设置样式和导出每个图层并不理想。
最佳答案
MBTiles格式可用于矢量 或栅格 数据。对于由 tippecanoe 创建的 MBTiles 集,它包含向量数据。
虽然可能没有明确写入,但 Leaflet.TileLayer.MBTiles 插件仅处理 raster tiles(PNG 或 JPG)(截至今天)。
要呈现矢量 数据(使您能够在运行时设置样式),您应该查看Leaflet.VectorGrid。插入。不幸的是,它目前不能与矢量 MBTiles 集一起开箱即用。
有兴趣的可以看看https://github.com/Leaflet/Leaflet.VectorGrid/issues/54
关于javascript - 可以在传单 map 中设置 MBTiles 的样式吗?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48175582/