如何创建背景透明的Mapbox GL地图（地球仪）？

你的问题出在自定义样式的结构错误：Mapbox GL的样式规范里并没有顶级的background属性，背景是通过background类型的图层来控制的。如果是3D地球模式，还需要额外关闭天空和大气效果，否则会出现深色背景。

以下是两种场景的正确实现方案：

1. 2D平面地图背景透明 #

// 正确的自定义样式配置
const mapStyle = {
  version: 8,
  sources: {},
  layers: [
    // 添加透明背景图层
    {
      id: 'background-layer',
      type: 'background',
      paint: {
        'background-color': 'transparent'
      }
    }
    // 可在此添加其他地图图层（如矢量瓦片、标注等）
  ]
};

const map = new mapboxgl.Map({
  container: 'map-container',
  style: mapStyle,
  // 其他配置（如zoom、center等）
});

同时要确保地图容器的CSS没有默认背景色：

#map-container {
  background: transparent;
}

2. 3D地球仪（Globe）背景透明 #

如果使用地球投影模式，除了设置背景图层，还需要关闭天空和大气效果：

const mapStyle = {
  version: 8,
  sources: {},
  layers: [
    {
      id: 'background-layer',
      type: 'background',
      paint: {
        'background-color': 'transparent'
      }
    }
  ],
  // 配置地球投影
  projection: {
    name: 'globe'
  },
  // 禁用天空效果
  sky: {
    type: 'sky',
    paint: {
      'sky-color': 'transparent',
      'sky-atmosphere-sun': [0, 0],
      'sky-atmosphere-sun-intensity': 0
    }
  },
  // 禁用大气效果
  atmosphere: {
    'color': 'transparent',
    'opacity': 0
  }
};

const map = new mapboxgl.Map({
  container: 'map-container',
  style: mapStyle,
  // 其他配置
});

关键注意点 #

• 不要使用顶级的background属性，Mapbox GL样式不支持这个写法，必须通过background类型的图层控制背景。
• 如果加载官方预设样式（如mapbox://styles/mapbox/streets-v12），需要在地图加载完成后修改默认背景图层的属性：

  map.on('style.load', () => {
    map.setPaintProperty('background', 'background-color', 'transparent');
    // 地球模式下同步修改天空和大气属性
    map.setPaintProperty('sky', 'sky-color', 'transparent');
    map.setPaintProperty('atmosphere', 'opacity', 0);
  });
  

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