mapboxgl 宽度适配

Mapbox GL JS 是一个基于 WebGL 的 JavaScript 地图库，用于构建交互式、高性能的地图应用。关于宽度适配，它提供了一种灵活性来调整地图容器的大小以适应不同的屏幕尺寸。当你想让地图自适应浏览器窗口的变化时，可以考虑以下几种方法：

1. 使用 CSS 媒体查询 (Media Queries)：针对不同的视口宽度，设置不同的样式规则来调整地图容器（如 `.map` 类）的 width 属性。

.mapbox-container {
  width: 100%; /* 默认全屏 */
}

@media (max-width: 768px) {
  .mapbox-container {
    width: 80%;
  }
}

2. 监听 window 的 resize 事件：当窗口大小改变时，动态更新地图的 width。

window.addEventListener('resize', function() {
  const map = L.mapbox.map('mapContainer').setView(...);
  map.getSize().then(size => {
    map.setZoomAndCenter(map.getZoom(), map.getCenter());
    // 更新 map 的宽度
    map._container.style.width = `${size.x}px`;
  });
});

3. 利用 Mapbox GL JS 的布局管理器 (Layout Manager)：如果需要更高级的布局控制，你可以使用 `map.setLayoutProperty()` 来动态调整地图层级的大小，比如设置 `width` 和 `height` 属性。

记得在实际项目中，还需要考虑到性能和响应时间，尤其是对于大规模数据集，过多的实时调整可能会导致性能下降。