Question

如何在地图中添加带有高程标签的轮廓图层？我发现了这个：https://www.mapbox.com/blog/satellite-map-with-contours/，但它没有说明如何。我还发现了这个：https://www.mapbox.com/mapbox-gl-js/example/toggle-layers/，但轮廓线没有高度信息。

Answer 1

通过查看style on GitHub，您可以看到我们如何在卫星风格上实现轮廓标签。

简而言之，你需要的部分是

引用Mapbox Terrain tileset的来源，其中包含contours layer。
symbol layer使用contours

{token}

Answer 2

该问题是在不久前发布的，但仅仅是因为我为我的项目做了，所以在这里分享：

map.addLayer({
  "id": "countour-labels",
  "type": "symbol",
  "source": {
    type: 'vector',
    url: 'mapbox://mapbox.mapbox-terrain-v2'
  },
  "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
  }
})

map.addLayer({
  "id": "countours",
  "type": "line",
  "source": {
    type: 'vector',
    url: 'mapbox://mapbox.mapbox-terrain-v2'
  },
  "source-layer": "contour",
  'layout': {
    'visibility': 'visible',
    'line-join': 'round',
    'line-cap': 'round'
  },
  'paint': {
    'line-color': '#877b59',
    'line-width': 1
  }
})

Mapbox gl js等高线+高程

2 个答案: