如何用 OpenLayers 做风场地图2 种可视化风格的完整指南【免费下载链接】openlayersOpenLayers项目地址: https://gitcode.com/gh_mirrors/op/openlayers编写台风风况报告时你需要把风向和风速叠到地图上。OpenLayers 有两条现成的风场可视化路径离散测点用 RegularShape 箭头图层连续格点数据用 WebGL Flow 图层。两种画法都基于仓库自带的官方示例数据可以直接跑起来。 方案概览3 个组件各管一段整个方案只依赖 3 个官方模块分工边界很清晰RegularShapesrc/ol/style/RegularShape.js正多边形形状样式用它拼出风向箭头的箭杆和箭头。DataTileSourcesrc/ol/source/DataTile.js格点数据瓦片源你提供 loader 按瓦片返回数值数组浏览器只取视口内的瓦片。Flowsrc/ol/layer/Flow.js实验性 WebGL 图层在 GPU 上模拟粒子沿矢量场运动无需逐点建矢量要素。手里是站点数据就选箭头是格点风场数据就选 Flow。 风向箭头最短路径把 wind.speed 与 wind.deg 画成箭头少量测点站、浮标的场景几十到几百个要素箭头画法就够了。数据源是 examples/data/openweather/weather.json每条记录带经纬度外加 wind.speedm/s和 wind.deg方向角。箭头由两个形状拼成2 个点的 RegularShape 当箭杆、3 个点的当箭头都设 rotateWithView: true 让符号跟着地图一起旋转。风格函数里真正起作用的是这几行const angle ((wind.deg - 180) * Math.PI) / 180; const scale wind.speed / 10; shaft.setScale([1, scale]); head.setDisplacement([0, head.getRadius() / 2 shaft.getRadius() * scale]);deg 是风的来向必须减 180° 才是去向箭头不随箭杆缩放而是用位移推到箭杆末端。忘了 -180 这个偏移所有箭头都会指反。完整实现在 examples/wind-arrows.js。 PNG 格点风分块DataTileSource loader 怎么写连续风场数据的目标是喂给 DataTileSource每块瓦片是一个 256×256 的 Float32Array视口之外不请求。官方示例把 U、V 分量存在 wind.png 的两个通道里压到 0–255实际范围 U 从 -21.32 到 26.8V 从 -21.57 到 21.42。loader 里做的事取瓦片 extent 和分辨率每个像素先把地图坐标从 EPSG:3857 反算回数据的 EPSG:4326再对最近四个像素做双线性插值最后按 min delta × value/255 还原成 m/s 写入数组。两套坐标系的换算是关键PNG 是整球的 4326 图像地图按 3857 渲染逐像素反算采样才不会整体偏移。采样索引跨经度边界时要回绕代码里 x10、x2≥宽度的分支否则日期变更线附近会留白。 Flow 图层配置速查粒子流只要 4 行Flow 用 WebGL 模拟粒子运动不用逐点建矢量要素。数据源就是上一节拼好的 DataTileSourcenew Flow({ source: wind, maxSpeed: 20, style: { color: [interpolate, [linear], [get, speed], ...colorStops], }, })maxSpeed 是粒子速度上限也是 U/V 归一化的分母colorStops 由 viridis 色带生成10 档、透明度 0.75低速偏蓝、高速偏黄。particles 默认 65536speedFactor 默认 0.001想让流走得更快就调后者。完整示例见 examples/wind.js。⚠️ 容易踩的 3 个坑都写在仓库代码里transition 必须是 0。DataTileSource 默认对新瓦片做淡入Flow 在过渡期无法正确合成粒子流会闪烁撕裂。examples/wind.js 里专门注释了 transition: 0别删。maxSpeed 忘了给会抛错。Flow 构造函数校验 maxSpeed 0漏传直接 throw。它还兼作色标分母给小了颜色梯度直接打满给大了粒子走得磨蹭。deg 的语义别搞混。OpenWeather 的 deg 是风从哪个方向吹来箭头层要减 180°如果换成语义为去向的其他接口这里要重新换算。接着可以往哪走把 wind.png 换成实时 NetCDF 或 GRIBloader 的签名z, x, y不变像素读取换成解码调用即可整条管线不用动。叠加温度热力层examples/heatmap-earthquakes.js 里 HeatmapLayer 的 weight 是个从要素里取数的函数把温度映射进去就能叠在风场之上。两种画法各管一类场景挑一个跑起来风场就上地图了。有其他气象图层玩法欢迎留言聊聊。【免费下载链接】openlayersOpenLayers项目地址: https://gitcode.com/gh_mirrors/op/openlayers创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 
长河君 · 2026/11/3 10:27:30 · 阅读 1.2k 如何用 OpenLayers 做风场地图：2 种可视化风格的完整指南
如何用 OpenLayers 做风场地图2 种可视化风格的完整指南【免费下载链接】openlayersOpenLayers项目地址: https://gitcode.com/gh_mirrors/op/openlayers编写台风风况报告时你需要把风向和风速叠到地图上。OpenLayers 有两条现成的风场可视化路径离散测点用 RegularShape 箭头图层连续格点数据用 WebGL Flow 图层。两种画法都基于仓库自带的官方示例数据可以直接跑起来。 方案概览3 个组件各管一段整个方案只依赖 3 个官方模块分工边界很清晰RegularShapesrc/ol/style/RegularShape.js正多边形形状样式用它拼出风向箭头的箭杆和箭头。DataTileSourcesrc/ol/source/DataTile.js格点数据瓦片源你提供 loader 按瓦片返回数值数组浏览器只取视口内的瓦片。Flowsrc/ol/layer/Flow.js实验性 WebGL 图层在 GPU 上模拟粒子沿矢量场运动无需逐点建矢量要素。手里是站点数据就选箭头是格点风场数据就选 Flow。 风向箭头最短路径把 wind.speed 与 wind.deg 画成箭头少量测点站、浮标的场景几十到几百个要素箭头画法就够了。数据源是 examples/data/openweather/weather.json每条记录带经纬度外加 wind.speedm/s和 wind.deg方向角。箭头由两个形状拼成2 个点的 RegularShape 当箭杆、3 个点的当箭头都设 rotateWithView: true 让符号跟着地图一起旋转。风格函数里真正起作用的是这几行const angle ((wind.deg - 180) * Math.PI) / 180; const scale wind.speed / 10; shaft.setScale([1, scale]); head.setDisplacement([0, head.getRadius() / 2 shaft.getRadius() * scale]);deg 是风的来向必须减 180° 才是去向箭头不随箭杆缩放而是用位移推到箭杆末端。忘了 -180 这个偏移所有箭头都会指反。完整实现在 examples/wind-arrows.js。 PNG 格点风分块DataTileSource loader 怎么写连续风场数据的目标是喂给 DataTileSource每块瓦片是一个 256×256 的 Float32Array视口之外不请求。官方示例把 U、V 分量存在 wind.png 的两个通道里压到 0–255实际范围 U 从 -21.32 到 26.8V 从 -21.57 到 21.42。loader 里做的事取瓦片 extent 和分辨率每个像素先把地图坐标从 EPSG:3857 反算回数据的 EPSG:4326再对最近四个像素做双线性插值最后按 min delta × value/255 还原成 m/s 写入数组。两套坐标系的换算是关键PNG 是整球的 4326 图像地图按 3857 渲染逐像素反算采样才不会整体偏移。采样索引跨经度边界时要回绕代码里 x10、x2≥宽度的分支否则日期变更线附近会留白。 Flow 图层配置速查粒子流只要 4 行Flow 用 WebGL 模拟粒子运动不用逐点建矢量要素。数据源就是上一节拼好的 DataTileSourcenew Flow({ source: wind, maxSpeed: 20, style: { color: [interpolate, [linear], [get, speed], ...colorStops], }, })maxSpeed 是粒子速度上限也是 U/V 归一化的分母colorStops 由 viridis 色带生成10 档、透明度 0.75低速偏蓝、高速偏黄。particles 默认 65536speedFactor 默认 0.001想让流走得更快就调后者。完整示例见 examples/wind.js。⚠️ 容易踩的 3 个坑都写在仓库代码里transition 必须是 0。DataTileSource 默认对新瓦片做淡入Flow 在过渡期无法正确合成粒子流会闪烁撕裂。examples/wind.js 里专门注释了 transition: 0别删。maxSpeed 忘了给会抛错。Flow 构造函数校验 maxSpeed 0漏传直接 throw。它还兼作色标分母给小了颜色梯度直接打满给大了粒子走得磨蹭。deg 的语义别搞混。OpenWeather 的 deg 是风从哪个方向吹来箭头层要减 180°如果换成语义为去向的其他接口这里要重新换算。接着可以往哪走把 wind.png 换成实时 NetCDF 或 GRIBloader 的签名z, x, y不变像素读取换成解码调用即可整条管线不用动。叠加温度热力层examples/heatmap-earthquakes.js 里 HeatmapLayer 的 weight 是个从要素里取数的函数把温度映射进去就能叠在风场之上。两种画法各管一类场景挑一个跑起来风场就上地图了。有其他气象图层玩法欢迎留言聊聊。【免费下载链接】openlayersOpenLayers项目地址: https://gitcode.com/gh_mirrors/op/openlayers创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考