首页 / OpenLayers / 使用示例
视图内边距
视图左侧和上方预留空白后,缩放定位会把要素放到剩余可视区域的中心。
源码与运行效果
说明
ol.View 的 padding 以像素为单位,格式与 CSS 一致:上、右、下、左。设置后 view.fit() 计算的范围只落在有效视区内,view.setCenter() 也把目标点放在有效视区中心,而不是画布几何中心。页面用一块大面和一个人口密集点演示两种定位。
| 操作 | 结果 |
|---|---|
| 点击「缩放至范围」 | 面要素填满右侧有效视区,不被左侧留白遮住 |
| 点击「定位到样本点」 | 点移到有效视区中心 |
| 切换内边距开关 | 定位结果随之偏移,验证 padding 的作用 |
页面上有固定侧栏或顶部工具栏时,把它们的像素尺寸写进 view.padding,比手工偏移中心更可靠。