如何在MapboxGL JS或Studio中创建渐变背景图层？

一、实现跨纬度（-90°至90°）的渐变背景 #

Mapbox GL JS和Studio都支持通过样式表达式实现基于坐标的线性渐变背景，无需额外插件：

Mapbox GL JS 实现代码 #

直接添加背景图层，通过interpolate表达式根据纬度值插值颜色：

map.addLayer({
  id: 'lat-gradient-bg',
  type: 'background',
  paint: {
    'background-color': [
      'interpolate',
      ['linear'],
      ['coordinate', 'latitude'], // 获取当前像素对应的纬度
      -90, '#00204d',    // 南纬90°颜色
      0, '#ffffff',      // 赤道颜色
      90, '#4d0000'      // 北纬90°颜色
    ]
  }
});

你可以调整插值的色点数量（比如增加30°、-30°的颜色），或者将latitude替换为longitude实现东西向渐变。

Mapbox Studio 操作步骤 #

1. 打开Studio样式编辑器，添加「Background」图层；
2. 进入「Paint」面板，点击background-color右侧的表达式按钮（</>）；
3. 构建插值表达式：
   • 选择coordinate → 提取latitude作为输入值；
   • 选择interpolate → linear插值方式；
   • 添加三个色点：-90对应深色、0对应中间色、90对应浅色（或自定义配色）；
4. 保存样式即可生效。

二、实现多边形渐变（覆盖-90°至90°范围） #

Mapbox原生没有直接的「多边形渐变」属性，但可以通过填充图层的颜色表达式模拟，核心思路是基于多边形内的坐标值（纬度/经度）插值颜色：

Mapbox GL JS 实现全球多边形渐变 #

如果需要覆盖全球的渐变多边形，先定义GeoJSON源，再通过表达式设置填充色：

// 添加覆盖全球的GeoJSON源
map.addSource('global-polygon', {
  type: 'geojson',
  data: {
    type: 'Feature',
    geometry: {
      type: 'Polygon',
      coordinates: [[
        [-180, -90], [-180, 90], [180, 90], [180, -90], [-180, -90]
      ]]
    }
  }
});

// 添加填充图层实现渐变
map.addLayer({
  id: 'global-gradient-fill',
  type: 'fill',
  source: 'global-polygon',
  paint: {
    'fill-color': [
      'interpolate',
      ['linear'],
      ['coordinate', 'latitude'],
      -90, '#2b83ba',
      0, '#ffffbf',
      90, '#d7191c'
    ],
    'fill-opacity': 0.8 // 可选：调整透明度
  }
});

如果是自定义多边形（而非全球），只需替换GeoJSON的coordinates为目标多边形的坐标即可，表达式逻辑保持不变。

Mapbox Studio 实现多边形渐变 #

1. 在Studio中添加「GeoJSON」源，上传或粘贴你的多边形数据（覆盖-90°至90°范围）；
2. 添加「Fill」图层关联该源；
3. 在「Paint」面板中，给fill-color设置与背景渐变相同的插值表达式（基于纬度/经度）；
4. 按需调整fill-opacity等属性，完成渐变效果。

补充说明 #

• 若需要径向渐变（如从中心向外扩散），可以通过计算坐标到中心点的距离作为插值输入，例如：

  ['interpolate', ['linear'], 
    ['distance', ['literal', [0, 0]], ['coordinate']], 
    0, '#ff0000', 
    10000000, '#0000ff'
  ]
  

• 所有表达式都支持自定义色阶和插值方式（如exponential指数插值），可根据需求调整。

内容的提问来源于stack exchange，提问作者SERG