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

风向箭头

十几个观测点的风向用箭头表示,箭头长度随风速变化,方向由角度属性决定。

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

说明

每个箭头由两个 ol.style.RegularShape 组成:两点形状作箭杆,三点形状作箭头。样式函数读取 wind.speed 与 wind.deg,前者缩放箭杆长度,后者旋转整个符号。箭头位移随箭杆长度动态调整,保证箭头始终贴在杆端。气象数据写在页面内,替代外部天气接口。

操作结果
观察箭头长度风速越大,箭杆越长
观察箭头方向角度按气象约定换算,箭头指向风的去向
悬停到箭头上顶部显示城市、风速与风向

RegularShape 的 rotateWithView 决定地图旋转时符号是否跟着转;风向标通常保持与地面方向一致。