首页 / OpenLayers / 使用示例
风向箭头
十几个观测点的风向用箭头表示,箭头长度随风速变化,方向由角度属性决定。
源码与运行效果
说明
每个箭头由两个 ol.style.RegularShape 组成:两点形状作箭杆,三点形状作箭头。样式函数读取 wind.speed 与 wind.deg,前者缩放箭杆长度,后者旋转整个符号。箭头位移随箭杆长度动态调整,保证箭头始终贴在杆端。气象数据写在页面内,替代外部天气接口。
| 操作 | 结果 |
|---|---|
| 观察箭头长度 | 风速越大,箭杆越长 |
| 观察箭头方向 | 角度按气象约定换算,箭头指向风的去向 |
| 悬停到箭头上 | 顶部显示城市、风速与风向 |
RegularShape 的 rotateWithView 决定地图旋转时符号是否跟着转;风向标通常保持与地面方向一致。