如何使用现有的 Mapbox GL "template" 但向其添加 elevation/fog？

Question

我有这个：

var map = new mapboxgl.Map
({
    container: 'map',
    style: 'mapbox://styles/mapbox/satellite-streets-v11',
});

有效。但我也想添加 elevation/fog 。阅读手册好几个小时，在我看来你要么必须像我所做的那样指定一个 URL 到“预制样式”，OR 指定一个绝对庞大风格的对象，其中充满了神秘和难以理解的子对象，例如特定层和东西。

似乎没有办法简单地使用该样式“模板”URL、和在其上添加elevation/fog。我真的希望我错了。

下载代表他们“预制风格”的 JSON 对象后，我看到了海量数据海洋，无法以任何明智的方式进行管理。他们不可能意味着你应该尝试 edit/adapt/extend 那。

我一定是漏掉了什么。真的没有办法做我现在做的事情，只能启用“地形”和“雾”功能吗？

https://docs.mapbox.com/mapbox-gl-js/style-spec/terrain/ https://docs.mapbox.com/mapbox-gl-js/style-spec/fog/

当然，我首先尝试将它们添加到 Map 对象中，假设这是这样做的，但它只是被忽略了。

同样，如果我要制作自己的 style 对象，则需要包含各种可怕和难以理解的东西：https://docs.mapbox.com/mapbox-gl-js/style-spec/root/

坦率地说，我不知道谁会想要一个可以支持 elevation/height 差异和现实 fog/lights 的 3D 地图，但是不使用这些功能。对我来说，这似乎是一个简单的布尔值设置，您可以将其设置为 on/off，并且默认情况下处于启用状态。

Answer 1

我没试过，但你应该可以像这样动态设置雾：

var map = new mapboxgl.Map
({
    container: 'map',
    style: 'mapbox://styles/mapbox/satellite-streets-v11',
});

map.on('load', () => {
  map.setStyle({
    ...map.getStyle(), 
    "fog": {
        "range": [-0.5, 3],
        "color": "white",
        "horizon-blend": 0.1
    }
  })
});

请参阅文档 here。

如何使用现有的 Mapbox GL "template" 但向其添加 elevation/fog？

How to use an existing Mapbox GL "template" but add elevation/fog to it?

mapbox

mapbox-gl

mapbox-gl-js