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

设备方向与地图旋转

监听 deviceorientation 的 alpha 方位角,把地图旋转成朝向一致的方向;没有传感器时用滑块模拟。

OpenLayers 10.3.1 · 对应官方 device-orientation.html · 更新 2026-10-27
源码与运行效果
运行效果

说明

deviceorientation 事件给出三个角度:alpha 是绕 z 轴的方位角, beta 与 gamma 是前后、左右的倾斜。示例只取 alpha, 把它换算成 view.setRotation(−alpha),地图就跟着设备一起转。

iOS 需要在用户手势里调用 DeviceOrientationEvent.requestPermission(), 因此单独放了一个权限按钮;桌面浏览器通常没有传感器,事件不会触发, 此时用滑块手动设置方位角,效果与真机一致。

操作结果
在手机上点击「请求传感器权限」授权后地图随设备转动
拖动「方位角」滑块地图按角度旋转
点击右上角指北针旋转复位到正北

旋转后的地图在平移时按屏幕方向响应,用户朝哪走就往哪拖,这是导航类应用保持朝向的常见做法。