如何使用 Mapbox GL JS 显示自定义样式的矢量切片？

问题描述

我正在计划开发地图服务，我想在自定义“基础层”的顶部显示标记列表，其中包含使用 TileServer-GL 呈现的矢量切片。 我知道 TileServer-GL 渲染矢量切片基于 .mbtiles 切片集和样式，带有 .json 样式文件，例如使用 Maputnik 制作。 当将其显示到交互式地图中时，例如使用 MapBox GL JS，我知道您可以将 TileServer-GL 提供的图块指定为第三方源（https://docs.mapbox.com/mapbox-gl-js/example/third-party/），但似乎您然后需要一层一层的添加，并指定每一层的样式。但我认为这就是瓦片服务器已经做到的！我是不是误解了什么？

感谢您的帮助

解决方法

我不确定您要问什么，但基本上您会：

1. 构建一个 Mapbox GL 样式文件 (.json)，该文件引用您创建的所有图层、它们的托管位置以及您希望每个图层的显示方式。
2. 初始化加载该样式文件的地图对象：

const map = new mapboxgl.Map({
  // ...
  style: 'http://localhost:8000/style.json
});