React中使用Mapbox GL渲染地图时如何限定地图仅在指定Grid区域显示

问题根因 #

1. 当.map-container设为absolute时铺满全屏，是因为没有给父级.map容器设置非static的定位属性，导致地图容器的定位上下文是全局视口
2. 设为relative时地图不可见，是因为relative定位的元素需要显式设置宽高，你当前的.map-container没有设置宽高，自然无法撑开显示

具体修改步骤 #

1. 修改.map容器样式

给.map容器添加position: relative，作为地图容器的定位上下文：

.map {
    grid-area: cr4;
    position: relative; /* 新增这行 */
    /* 如果你需要保留原有flex布局，后续要给Map组件根节点加flex: 1属性，不需要的话可以删掉下面flex相关配置 */
    display: flex;
    justify-content:space-around;
    align-items:stretch;
    background-color: blueviolet;
}

2. 给Map组件的根节点设置宽高

Map组件返回的最外层div没有设置宽高，需要补充样式让它填满父容器：

return (
  {/* 给根节点补充宽高样式，如果你保留了.map的flex布局，这里再加个flex:1即可 */}
  <div style={{width: '100%', height: '100%'}}>
    <div className="sidebarStyle">
      <div>
        Longitude: {lng} | Latitude: {lat} | Zoom: {zoom}
      </div>
    </div>
    <div className="map-container" ref={mapContainerRef} />
  </div>
)

3. 修改.map-container样式

把定位改为absolute，补充宽高配置：

.map-container {
    position: absolute; /* 改为absolute */
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 100%;
  }

修改完成后地图就会完全限制在cr4对应的.map容器内正常显示，不会溢出到全屏区域。

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