Mapbox 过滤器 - 过滤地图视图中的功能

Question

我正在尝试使用 Mapbox GL JS 为基于 Web 的应用程序扩展具有高级过滤选项（例如，使用缩放显示数据）的 Mapbox 内置地图。

可用示例 (https://docs.mapbox.com/mapbox-gl-js/example/filter-features-within-map-view/) 使用导入的 GeoJSON "ne_10m_airports" 数据，但我的数据由 MySQL 数据库提供。

我的 JavaScript 技能有限，因此无法更新过滤器代码以处理我的数据集。有此类互动的建议或相关示例吗？

示例：http://www.scubacentral.net/map2.html

map.addLayer({
'id': 'airport',
'source': {
'type': 'vector',
'url': 'mapbox://mapbox.04w69w5j'
},
'source-layer': 'ne_10m_airports',
'type': 'symbol',
'layout': {
'icon-image': 'airport-15',
'icon-padding': 0,
'icon-allow-overlap': true
}
});

Answer 1

提供的示例使用vector source。如链接的 Mapbox 样式规范中所述，矢量源必须在 Mapbox Vector Tile format 中，这对于从 MySQL 数据库生成并不是很简单。您提到的'ne_10m_airports' 数据是'url': 'mapbox://mapbox.04w69w5j' 指定的向量源中的一个特定source layer。因此，这里的请求不是关于相关的 JavaScript，而是关于源数据的格式。

GeoJSON source 可能是您实现的最佳源类型选项。这将需要编写脚本或使用其他一些功能将数据结构从 MySQL 数据库转换为 GeoJSON。如链接文档中所述，GeoJSON 是一种用于表示地图数据的开放标准文件格式，并且有许多现有资源可用于从现有数据中创建 GeoJSON 文件。您链接示例中的地图401s 由于 Mapbox 访问令牌不正确，因此我无法收集有关您的特定用例的更多信息，但无论如何，与其他源相比，GeoJSON 源绝对是最佳选择（即vector、raster、raster-dem、image 和 video，如侧边栏here 中列举的那样）。