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

旋转地图

沿道路方向看图时,旋转比平移更直观。滑块控制任意角度, 快捷按钮跳到直角,视图旋转变化时滑块也会自动回写。

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

说明

view.setRotation() 的单位是弧度,顺时针为正。 UI 上用度更自然,所以每次都要乘 Math.PI / 180:

角度弧度效果
0°0正北朝上
90°1.5708正东朝上,顺时针转 90 度
180°3.1416正南朝上
-90°-1.5708正西朝上

用默认交互旋转(按住 Alt 加拖动)时, change:rotation 事件的回调把弧度换算回角度, 再用取模把结果收进 -180 到 180 之间,滑块就不会跳。

旋转后,文字标注默认会跟着地图一起转,倒着看很别扭。 如果不需要,给 ol.style.Text 设 rotation: 0,并关闭图层的 rotateWithView,让符号始终保持水平。