javascript - 可以在传单 map 中设置 MBTiles 的样式吗?

标签 javascript css leaflet mbtiles

我正在尝试在 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/

相关文章:

javascript - Leaflet.js - 创建标记并在 map 上显示弹出窗口

javascript - 如何飞到react-leaflet中的某个位置

javascript - 缩放传单 map 时,SVG 圆圈不会重新定位

javascript - jQuery on() 事件不会为 sweetalert2 文本框触发

javascript - 使用模块模式时分配了多少内存?

javascript - 使用 Javascript 显示和隐藏表中的某些行

在 html 代码的 div 部分添加的 Javascript 代码不显示任何内容。

javascript - 从不同域访问 bugzilla Web 服务的好方法是什么?

带有 :after selector 的 Javascript addClass

html - 如何使用 bootstrap 在我的表单右上角之外放置一个 div?