经纬志
首页 / OpenLayers / 使用示例

视图内边距

视图左侧和上方预留空白后,缩放定位会把要素放到剩余可视区域的中心。

OpenLayers 10.3.1 · 更新 2026-10-28
源码与运行效果
运行效果

说明

ol.View 的 padding 以像素为单位,格式与 CSS 一致:上、右、下、左。设置后 view.fit() 计算的范围只落在有效视区内,view.setCenter() 也把目标点放在有效视区中心,而不是画布几何中心。页面用一块大面和一个人口密集点演示两种定位。

操作结果
点击「缩放至范围」面要素填满右侧有效视区,不被左侧留白遮住
点击「定位到样本点」点移到有效视区中心
切换内边距开关定位结果随之偏移,验证 padding 的作用

页面上有固定侧栏或顶部工具栏时,把它们的像素尺寸写进 view.padding,比手工偏移中心更可靠。