6

我正在尝试在 Leaflet 地图中显示一个 .mbtiles 图层（由Tippecanoe创建）。瓷砖加载有Leaflet.TileLayer.MBTiles。到目前为止，地图上什么都看不到，尽管 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 并为每个图层分配样式？目标是以编程方式创建大量图层（每个图层包含数千个点），因此单独设置样式和导出每个图层并不理想。

4

2 回答 2

5

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

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

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

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

于 2018-01-10T02:35:51.607 回答
1

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

于 2018-12-16T11:44:04.307 回答