首页 / OpenLayers / 使用示例
全屏控件
标准全屏控件与自定义按钮双向同步,地图容器随窗口尺寸重新布局。
源码与运行效果
说明
ol.control.FullScreen 是标准控件,setActive(true) 进入全屏、setActive(false) 退出,change:active 事件用来同步按钮文案。
控件不传 source 时作用于地图容器,全屏后 map 触发 change:size,视图按新画布重新计算,画面不会被拉伸。
| 操作 | 结果 |
|---|---|
| 点击进入全屏 | 地图填满屏幕,控件图标同步 |
| 按 Esc 键 | 退出全屏并恢复原尺寸 |
| 画布尺寸变化 | 顶栏显示新的宽高像素 |
全屏必须由用户操作触发,脚本自动调用会被浏览器拒绝。