可以在传单地图中设置MBTiles的样式吗? [英] Possible to style MBTiles in a leaflet map?

问题描述

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

I'm trying to display a .mbtiles layer (created by Tippecanoe) in a Leaflet map. The tiles are loaded with Leaflet.TileLayer.MBTiles. So far nothing is visible on the map, although the MBTiles load fine and are identifiable in the browser's inspector console. I'm guessing that because I haven't externally styled the MBTiles with MapBox Studio (or similar), they don't have any style assigned (color, size, etc...).

是否可以在CSS中使用CSS，JS或其他样式设置.mbtiles样式?我已经收集到通常.mbtiles都有一个关联的style.json文件-是否可以编写我自己的文件并在html或javascript中调用它以实现Leaflet的实现?

Is it possible to style .mbtiles with CSS, JS, or otherwise in the html? I've gleaned that usually .mbtiles have an associated style.json file -- is it possible to write my own and call that in the html or javascript for a Leaflet implementation?

这是我代码的相关部分:

Here's the relevant part of my code:

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中做类似的事情(似乎不起作用):

And I was hoping to do something like this in CSS (doesn't seem to work):

#mb {
    color: black
}

如果以上方法均不可行，是否有其他方法可以为Leaflet设置MBTiles样式，而不必通过MapBox Studio并为每个图层分配样式?目标是以编程方式创建多个图层(每个图层包含数千个点)，因此单独设置样式并导出每个图层将不理想.

If none of the above is possible, is there any other way to style MBTiles for Leaflet without having to go through MapBox Studio and assign styles for every layer? The goal is to programmatically create numerous layers (each containing thousands of points), so individually styling and exporting each layer would not be ideal.

推荐答案

MBTiles 格式可以用于 vector 或 raster 数据.对于Tippecanoe创建的MBTiles集，它包含 vector 数据.

MBTiles format can be used for vector or raster data. In the case of MBTiles set created by tippecanoe, it contains vector data.

Leaflet.TileLayer.MBTiles插件虽然可能未明确编写，但仅处理 raster 磁贴(PNG或JPG)(截至今天).

Although it might not be explicitly written, Leaflet.TileLayer.MBTiles plugin handles only raster tiles (PNG or JPG) (as of today).

要渲染 vector 数据(使您可以在运行时设置其样式)，应查看 Leaflet.VectorGrid 插件.不幸的是，在设置了矢量MBTiles的情况下，它目前无法即用.

To render vector data (which enable you to style it at runtime), you should have a look at Leaflet.VectorGrid plugin. Unfortunately, it does not currently work out-of-the-box with vector MBTiles set.

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

If you are interested, you can have a look at https://github.com/Leaflet/Leaflet.VectorGrid/issues/54

这篇关于可以在传单地图中设置MBTiles的样式吗?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！