首页 / OpenLayers / 使用示例
旋转地图
沿道路方向看图时,旋转比平移更直观。滑块控制任意角度, 快捷按钮跳到直角,视图旋转变化时滑块也会自动回写。
源码与运行效果
说明
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,让符号始终保持水平。