首页 / OpenLayers / API 文档

Rotate

先看结论

指北针控件。显示当前地图旋转角度，点击后把视图旋转回正北。

最后验证 2026-11-03 · OpenLayers 10.3.1 · 更新 2026-10-27 · 引用本文

new ol.control.Rotate(options)

构造参数

参数	说明
`className`	控件类名，默认 `'ol-rotate'`
`label`	按钮内容，默认向上箭头字符
`tipLabel`	按钮提示文字，默认 `'Reset rotation'`
`duration`	回正动画时长毫秒，默认 250
`autoHide`	旋转角为 0 时是否自动隐藏，默认 true
`render`	自定义渲染函数，签名 `(evt)`

常用成员

成员	返回	说明
`setMap(map)`	void	绑定地图并监听视图旋转，通常由 `addControl` 调用
`getElement()`	Element	取控件根元素，可替换图标或尺寸
`setTarget(target)`	void	更换控件挂载容器

var rotate = new ol.control.Rotate({
  autoHide: false,
  tipLabel: '恢复正北',
  duration: 300
});
map.addControl(rotate);

// 旋转视图 45 度，控件随之显示角度
map.getView().setRotation(Math.PI / 4);

注意事项

视图未开启旋转交互时控件始终显示 0 度，先确认 DragRotate 或 AltShiftDragRotate 处于启用状态。
autoHide 为 true 且旋转角为 0 时控件整体隐藏，需要常显就设为 false。
旋转角以弧度计，顺时针为正，点击控件是把旋转角动画回 0 而不是反向旋转。
自定义 label 会替换默认箭头字符，图标本身旋转由控件内部完成，不要再额外加旋转样式。

引用本文

经纬志（2026）。《Rotate》。https://www.jingweizhi.com/openlayers/api/rotate.html（访问日期 2026-11-03）。