Mapbox gl js等高线+高程

Question

我们如何向地图添加带有高程标签的等高线图层？我发现了这个： https://www.mapbox.com/blog/satellite-map-with-contours/ , but it doesn't show how. I also found this: https://www.mapbox.com/mapbox-gl-js/example/toggle-layers/ ，但是等高线没有高度信息。

Answer 1

您可以通过查看 style on GitHub.

了解我们如何在卫星样式上实现等高线标签

总之，你需要的棋子是

引用 Mapbox Terrain tileset, which includes a contours layer 的来源。
a symbol layer that draws contours with a text-field property 使用 {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等高线+高程

Mapbox gl js contour lines + elevation

javascript

contour

elevation

mapbox-gl-js