Mapbox Gl JS等高線+高程

Question

我們如何在地圖上添加帶有高程標簽的輪廓圖層？ 我發現了這一點： https : //www.mapbox.com/blog/satellite-map-with-contours/ ，但是它沒有顯示如何。 我也發現了這一點： https : //www.mapbox.com/mapbox-gl-js/example/toggle-layers/ ，但輪廓線沒有海拔信息。

Answer 1

通過查看GitHub上的樣式，您可以看到我們如何在衛星樣式上實現輪廓標簽。

簡而言之，您需要的是

• 引用Mapbox Terrain貼圖集的源，其中包括contours層 。
• 使用帶有{token}的text-field屬性繪制contours的symbol圖層

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
  }
})