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

全屏控件

标准全屏控件与自定义按钮双向同步,地图容器随窗口尺寸重新布局。

OpenLayers 10.3.1 · 对应官方 full-screen.html · 更新 2026-10-28
源码与运行效果
运行效果

说明

ol.control.FullScreen 是标准控件,setActive(true) 进入全屏、setActive(false) 退出,change:active 事件用来同步按钮文案。

控件不传 source 时作用于地图容器,全屏后 map 触发 change:size,视图按新画布重新计算,画面不会被拉伸。

操作结果
点击进入全屏地图填满屏幕,控件图标同步
按 Esc 键退出全屏并恢复原尺寸
画布尺寸变化顶栏显示新的宽高像素

全屏必须由用户操作触发,脚本自动调用会被浏览器拒绝。