地图框 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 上的样式来了解我们如何在卫星样式上实现轮廓标签。

简而言之，您需要的零件是

• 引用地图框地形图块集的源，其中包括一个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
  }
})