在 MapBox GL JS 地图上从 Arcgis 服务器绘制矢量切片图层时没有任何显示

Question

我正在尝试使用 MapBox GL JS 将提供的矢量切片图层绘制到地图上。我已经按照 documentation here 进行操作，但除了基本地图外没有任何输出，并且没有控制台错误。在浏览器的网络选项卡中，我可以看到许多 .pbf 请求随数据一起返回，因此端点似乎正在传回数据，但我不知道如何确定将数据绘制到地图上的问题所在。

代码如下：

mapboxgl.accessToken = '[my access token]';
      const map = new mapboxgl.Map({
        container: 'map',
        style: 'mapbox://styles/mapbox/light-v10',
        zoom: 6,
        center: [-0.118092, 51.509865]
      });

      map.once("load", () => {
        map.addSource("ncn", {
          type: "vector",
          tiles: [
            "https://tiles.arcgis.com/tiles/1ZHcUS1lwPTg4ms0/arcgis/rest/services/NCN_Vector_Tile_Package/VectorTileServer/tile/{z}/{y}/{x}.pbf"
          ]
        });

        map.addLayer({
          id: "ncn-lines",
          type: "line",
          source: "ncn",
          "source-layer": "NCN_Vector_Tile_Package",
          "layout": {
            "visibility": "visible"
          },
          'paint': {
            'line-color': 'rgb(255, 0, 0)'
          }
        });
      });

我相当确定 type 应该是 line（而不是 fill），因为数据应该包含路线而不是矢量形状。

我无权访问 Arcgis 服务器，因此看不到那一侧是如何配置的。谁能建议这里可能有什么问题 and/or 如何调试？

Answer 1

source-layer 的值似乎不正确 - 它应该是 NCN_2020。这是一个展示它工作的演示：https://jsbin.com/xunuhibuki/1/edit?html,output

您如何获得该值？我不太确定最好的方法，但我发现的方法是：像这样将 ?f=html 添加到您的矢量切片层：https://tiles.arcgis.com/tiles/1ZHcUS1lwPTg4ms0/arcgis/rest/services/NCN_Vector_Tile_Package/VectorTileServer/?f=html 然后单击底部的“样式”link您是如何在 mapboxgl 代码中构建 map.addLayer() 命令的示例。

在 MapBox GL JS 地图上从 Arcgis 服务器绘制矢量切片图层时没有任何显示

Nothing showing when plotting vector tile layer from Arcgis server on MapBox GL JS map

arcgis

mapbox

mapbox-gl-js