如何将包含形状文件数据的自定义瓦片集连同高程值一起添加到 mapbox

Question

我正在使用以下代码添加已使用工作室上传到 Mapbox 的 shapefile 数据。

    this.map.addSource('contours', {
      type: 'vector',
      url: 'mapbox://darkl1ght.6zev47fo'
    });
    this.map.addLayer({
      "id": "countour-labels",
      "type": "symbol",
      "source": 'contours',
      "source-layer": "contour",
      'layout': {
        'visibility': 'visible',
        'symbol-placement': 'line',
        'text-field': ['concat', ['to-string', ['get', 'ele']], 'm']
      },
      'paint': {
        'icon-color': '#877b59',
        'icon-halo-width': 1,
        'text-color': '#877b59',
        'text-halo-width': 1
      }
    });
    this.map.addLayer({
      "id": "countours-lines",
      "type": "line",
      "source": 'contours',
      "source-layer": "contour",
      'layout': {
        'visibility': 'visible',
        'line-join': 'round',
        'line-cap': 'round',
      },
      'paint': {
        'line-color': '#877b59',
        'line-width': 1
      }
    });

但我收到以下错误。

Source layer "contour" does not exist on source "contours" as specified by style layer "countour-labels"
at i._validateLayer (mapbox-gl.js:35)
    at i.<anonymous> (mapbox-gl.js:35)
    at i.push../node_modules/mapbox-gl/dist/mapbox-gl.js.zt.fire (mapbox-gl.js:31)
    at i.push../node_modules/mapbox-gl/dist/mapbox-gl.js.zt.fire (mapbox-gl.js:31)
    at i.push../node_modules/mapbox-gl/dist/mapbox-gl.js.zt.fire (mapbox-gl.js:31)
    at mapbox-gl.js:35
    at r (mapbox-gl.js:35)
    at mapbox-gl.js:31
    at ZoneDelegate.invoke (zone-evergreen.js:364)
    at Object.onInvoke (core.js:27437)

和

mapbox-gl.js:31 Error: Source layer "contour" does not exist on source "contours" as specified by style layer "countours-lines"
    at i._validateLayer (vendor.js:93908)
    at i.<anonymous> (vendor.js:93908)
    at i.push../node_modules/mapbox-gl/dist/mapbox-gl.js.zt.fire (vendor.js:93904)
    at i.push../node_modules/mapbox-gl/dist/mapbox-gl.js.zt.fire (vendor.js:93904)
    at i.push../node_modules/mapbox-gl/dist/mapbox-gl.js.zt.fire (vendor.js:93904)
    at vendor.js:93908
    at r (vendor.js:93908)
    at vendor.js:93904
    at ZoneDelegate.invoke (polyfills.js:377)
    at Object.onInvoke (vendor.js:41596)

我已经能够添加其他栅格数据，例如上传到 Mapbox 的 tiff 文件，但无法添加包含高程数据的矢量数据。我想在不同的行显示高程标签。这应该显示如下所示：

sample image of expectation

我已经查看了问题，但它与我已经能够添加的栅格数据类型有关。需要向量类型数据的帮助。

Answer 1

我自己找到了答案。

我发现 Mapbox 的 source-layer 是 Mapbox 给上传的 tileset 的 tileset 名称。检查 here

当我用 image 中的字符串替换 source-layer 值时，错误已被删除。

如何将包含形状文件数据的自定义瓦片集连同高程值一起添加到 mapbox

How to add custom tileset that contains shape file data to mapbox along with elevation value

mapbox

mapbox-gl-js

angular