OpenLayers 地图在 Bootstrap 中易出现变形、白屏、遮挡和卡顿问题，需通过重置 padding/margin、监听 modal 显示事件、调整 z-index、添加 will-change 和手动调用 updateSize() 等方式解决。
OpenLayers 地图容器被 Bootstrap 的 col- 类撑开后变形
Bootstrap 的栅格系统默认给 .col- 元素加了 padding 和 box-sizing: border-box，但 OpenLayers 的 map 容器依赖精确的 clientWidth/clientHeight 计算视图范围。一旦父容器有 padding 或 margin，ol/Map 初始化时读到的尺寸就偏小，导致瓦片错位、交互区域偏移。
实操建议：
- 给地图容器（如
<div id="map">）加style="width: 100%; height: 100%; margin: 0; padding: 0;"，显式覆盖 Bootstrap 栅格带来的内边距 - 确保其直接父元素（比如
<div class="col-12">）也设height: 100%，且祖先链上所有父级（包括body、html）都设height: 100% - 不要用
col-auto包地图容器——它不设宽高，OpenLayers 会拿到0
ol/Map 在 Bootstrap Modal 中首次显示空白
Modal 默认是 display: none，OpenLayers 初始化时若容器不可见，getBoundingClientRect() 返回全零值，map.updateSize() 拿不到有效尺寸，结果就是白屏。等 Modal show 后再手动调一次 map.updateSize() 才能恢复。
实操建议：
- 监听 Bootstrap 的
shown.bs.modal事件，而不是show.bs.modal（后者触发时 DOM 还未重排） - 在事件回调里立刻调用
map.updateSize()，并可选加setTimeout(() => map.updateSize(), 10)防极端渲染延迟 - 如果 Modal 内容是动态加载的（如 AJAX），确保
map实例在 Modal 内容插入 DOM 后再创建，或至少等innerHTML设置完再new ol/Map
Bootstrap 表单控件遮挡 OpenLayers 的 ol/control/Zoom 或 ol/control/ScaleLine
Bootstrap 的 .form-control、.btn 等默认带 z-index: 1，而 OpenLayers 控件默认 z-index: 0。当两者位置重叠（比如右上角放缩控件 + 右侧表单），表单元素会盖住地图控件，点击失效。
实操建议：
- 给 OpenLayers 控件容器加自定义 class，例如
class="ol-custom-control"，再配 CSS：.ol-custom-control { z-index: 10 !important; } - 避免用
position: absolute把表单硬塞进地图容器内部；应把表单放在地图容器外侧（如相邻<div class="row">），用布局隔离 - 如果必须内嵌，给表单元素设
z-index: 1就够，别设成999—— OpenLayers 内部控件层级本就不高，10足够压倒 Bootstrap 默认值
移动端 Safari 下 Bootstrap Collapse + OpenLayers 导致地图拖拽卡顿
iOS Safari 对 transform 和 overflow: hidden 组合特别敏感。Bootstrap Collapse 默认用 height: 0 + overflow: hidden 动画收起，若 Collapse 区域紧邻地图容器，浏览器可能误判图层关系，强制降级为 CPU 渲染，拖拽掉帧明显。
实操建议：
- 给地图容器加
style="will-change: transform;"，主动提示 GPU 加速 - Collapse 触发时，临时给地图容器加
pointer-events: none，动画结束再恢复，避免拖拽事件在折叠过程中被错误捕获 - 避免让 Collapse 的
.collapse元素和地图容器共用同一个 flex 或 grid 父容器——iOS Safari 的 layout 重排容易连锁卡顿
最麻烦的其实是尺寸同步：OpenLayers 不监听 DOM resize 事件，只靠 updateSize() 主动刷新；而 Bootstrap 的响应式行为（比如窗口缩放、折叠展开）从不自动触发它。这点容易被忽略，一卡就是半天。
