如何使用 Mapbox GL JS 显示自定义样式的矢量图块?

How to display custom styled vector tiles with 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/),但看起来您然后需要逐层添加,并指定每一层的样式。但我认为这就是 tile 服务器已经做的事情!我是不是误会了什么?

感谢您的帮助

我不太确定你在问什么,但基本上你会:

  1. 构造一个 Mapbox GL 样式文件 (.json),它指的是您创建的所有图层、它们的托管位置以及您希望每个图层如何显示。
  2. 初始化加载该样式文件的地图对象:
const map = new mapboxgl.Map({
  // ...
  style: 'http://localhost:8000/style.json
});