# @aeroswarm/weather-layer 中文文档 规范地址：https://npmcn.com/package/%40aeroswarm/weather-layer/ 版本：0\.12\.0 npm 元数据更新时间：2026-11-03T21:14:00.601Z 中文译文更新时间：2026-11-06T11:21:53.515Z 软件包许可：未声明 本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。 原始 npm 页面：https://www.npmjs.com/package/%40aeroswarm/weather-layer 原文对照：https://npmcn.com/package/%40aeroswarm/weather-layer/?lang=original ## 关键信息（来自 npm 元数据） - 包体积（解压后）：389 kB，37 个文件 - 模块格式：ES Module - TypeScript 类型：包内自带 - 运行依赖：0 个 - peer 依赖：react \>=18，@aeroswarm/weather \>=0\.4\.0 \<1\.0\.0 - 首次发布：2026-11-02T09:42:02.227Z - 最新版本发布：2026-11-03T21:14:00.411Z - 近 30 天下载量：3395（2026-10-06 至 2026-11-04，npm 官方下载统计） - 已发布版本数：21（近 12 个月 21 个） ## 中文简介 由@aeroswarm/weather所驱动. ## 安装 ```sh npm install @aeroswarm/weather-layer ``` 也可以使用：`pnpm add @aeroswarm/weather-layer`、`yarn add @aeroswarm/weather-layer`、`bun add @aeroswarm/weather-layer` ## README # @ aeroswarm/ 天候 地图上的动画天气:风粒子,云,雨/雪,雾和闪电,加上海层(波,海洋) 气流,海平面)。 这需要 `AnimationState` 生产 [`@aeroswarm/weather`](https://npmcn.com/package/server/weather) (解码器) 和外地 [`@aeroswarm/marine`](https://npmcn.com/package/server/marine),并画出它们。 没有网络访问. 与LuciadRIA、MapLibre/Mapbox GL、Leaflet和CesiumJS(D节)合作. ## A. 平面覆盖(2D和3D) ```ts import { animationSnapshot } from "@aeroswarm/weather"; import { createWeatherOverlay } from "@aeroswarm/weather-layer"; const overlay = createWeatherOverlay(map); // transparent canvases on map.domNode const snapshot = animationSnapshot({ observation: metar, forecast: taf }); if (snapshot) overlay.setState(snapshot.state); overlay.setVisible(false); // toggle from your layer panel overlay.setOpacity(0.8); overlay.destroy(); ``` 反应 : ```tsx import { useWeatherOverlay } from "@aeroswarm/weather-layer/react"; useWeatherOverlay(map, snapshot?.state, { visible, opacity }); ``` 风向沿着地图旋转( Name`mapScreenOffset`; 覆盖到 `getScreenOffset`) (中文(简体) ). 封面是地图上的一个画布,所以它不是 `map.layerTree`: 接线 `visible` 财务报告和审定财务报表 `opacity` 到您的层面板。 荣誉 `prefers-reduced-motion` (画个活框. ## B. 实际高度的三维云 ```ts import { FeatureLayer } from "@mid/ria/view/feature/FeatureLayer"; import { createCloudLayer3D } from "@aeroswarm/weather-layer"; const clouds = createCloudLayer3D( { reference, Feature, FeatureModel, MemoryStore, FeatureLayer, FeaturePainter, createPoint }, { center: { lat: -7.3798, lon: 112.7869 }, elevationM: 3 }, ); map.layerTree.addChild(clouds.layer); clouds.setState(snapshot.state); ``` 云高 = 空气田高 + 地上云基(METAR报告AGL). 闪光是 尺寸为米,所以它们有放大和透视的尺度. 仅在地图为 3D 时绘制 (单位:千美元)`EPSG:4978`除非 `only3D: false`. RIA 课程通过,所以这个包从不捆绑 自己的RIA副本. ## C. 有风的字段(流粒+彩色图) 沿有网状风场的风粒子 以速度为颜色 加上云层的颜色图, 雨或温. 网格可以来自任何地方(参见: `@aeroswarm/weather`数字 : `windGridFromStations` 为几个METARs, `parseGrib2Json`, (中文(简体) ), `parseGridJson`, (中文(简体) ), `stationWindsFromModelPoints`) (中文(简体) ). ```ts import { createFieldOverlay, createRiaUnproject, PRECIPITATION_RAMP } from "@aeroswarm/weather-layer"; const unproject = createRiaUnproject(map, { wgs84, createPoint, createTransformation }); const overlay = createFieldOverlay(map, { unproject }); overlay.setWind(windGrid); // particles overlay.setScalar(cloudGrid); // cloud cover (default ramp) overlay.setScalar(rainGrid, PRECIPITATION_RAMP); // or rain, temperature, ... ``` 当地图移动时, 字段会被映射到屏幕网格上( 喉咙), 因此粒子读取一个 而不是将每个粒子投射到每个相框上。 地图上没有的点( 3D : 没有风能. ## D. 其他地图(地图、叶片、CesiumJS) 软件包核心从不导入地图库 。 一个小地图描述的是 `MapAdapter` (单位:千美元)`container`, (中文(简体) ), `unproject(x, y)`, (中文(简体) ), `screenOffset()`, (中文(简体) ), `onChange(cb)`),每张地图都有自适应器 子路径。 适配器只调用您传递的地图对象上的方法, 因此没有额外的安装和 导入 `/maplibre` 从来没有拉出铯或RIA. ```ts import { createFieldOverlay } from "@aeroswarm/weather-layer"; import { maplibreAdapter } from "@aeroswarm/weather-layer/maplibre"; // also works with Mapbox GL const overlay = createFieldOverlay(maplibreAdapter(map)); import { leafletAdapter } from "@aeroswarm/weather-layer/leaflet"; const overlay = createFieldOverlay(leafletAdapter(map)); // no rotation unless you pass { bearing } import { cesiumAdapter } from "@aeroswarm/weather-layer/cesium"; import * as Cesium from "cesium"; const overlay = createFieldOverlay( cesiumAdapter(viewer, { Cartesian2: Cesium.Cartesian2, Cartographic: Cesium.Cartographic, toDegrees: Cesium.Math.toDegrees }), ); import { riaAdapter } from "@aeroswarm/weather-layer/ria"; const overlay = createFieldOverlay(riaAdapter(map, { wgs84, createPoint, createTransformation })); ``` `createWeatherOverlay` 以同样的方式接受适配器。 旧的 `createFieldOverlay(map, { unproject })` 呼叫RIA继续工作。 注:在铯上,想念地球的屏幕点没有风;有倾斜的 相机 (MapLibre pitch, Cesium, RIA 3D) 屏幕上的风向是一个近似. 三维云 (B节)仍然只有区域一体化协定. ## E. 准备就绪的UI`/react-ui`(中文(简体) ) 反射组件, 这样您就不会自己组装控制器、 覆盖和时间 UI 。 一个 `` 每个地图;内部的组件读取其状态,因此一页上的两个地图不会被干扰. ```tsx import { maplibreAdapter } from "@aeroswarm/weather-layer/maplibre"; import { WeatherLayer, WeatherLayerSwitch, WeatherLegend, WeatherTimeline } from "@aeroswarm/weather-layer/react-ui"; import "@aeroswarm/weather-layer/react-ui/weather-ui.css"; // optional default look const adapter = useMemo(() => (map ? maplibreAdapter(map) : null), [map]); ``` | 导出 | 它会做什么 | | --- | --- | | `WeatherLayer` | 挂载覆盖和控制器,提供上下文。 道具 : `adapter` (或区域影响评估) `MapLike` + 键 `unproject`, (中文(简体) ), `store`, (中文(简体) ), `grid`, (中文(简体) ), `series`, (中文(简体) ), `blend`, (中文(简体) ), `locale`, (中文(简体) ), `timeZone`, (中文(简体) ), `messages` | | `WeatherLayerSwitch` | 有风 有云 有雨 有温. 全部关闭直到打开; 颜色层是独有的 | | `WeatherTimeline` | 带有 TAF 周期块、 播放/ 暂停、 “ 现在” 、 窗口( 今天 / 接下来 3 天) 的滑动器 | | `WeatherLegend` | 活动层颜色条和单位 | | `WeatherPreviewTable` | 小时值(模型、报告或与报告相混合的模型) | | `useWeatherController()`, (中文(简体) ), `useWeatherSnapshot(station)` | 控制器 + 状态,以及显示时间的站点天气 | | `windowFor(range, now, timeZone)`, (中文(简体) ), `previewRows(...)` | 其背后的纯正功能 | - **语言**数字 : `locale="id"` 给印度尼西亚文,其他任何英文;将单文本替换为: `messages={{ wind: "Wind speed" }}`。 。 。 . - **时区**: IANA 名称,默认 `UTC`"今天"是那个区的24小时. - **样式**: 不强制位置、大小或布局; 将组件放置在您的布局需要的地方。 类是 前缀 `aw-` (记录在 `weather-ui.css`颜色来自 `--aw-*` CSS 变量、光和 阴暗. 样式表是可选的,不依赖于Tailwind或任何UI套件. - 可访问性:本地按钮和范围输入, `radiogroup` 用箭头键, `aria-valuetext` 在滑轮上, `WeatherSummary` 用于屏幕阅读器句子的`aria-live`, (中文(简体) ), `WeatherMotionToggle`; 两个默认主题都相会 WCAG AA对比,组件通过轴-核心审计(jsdom,无法检查依赖布局的规则; 未使用真实的屏幕阅读器测试). - 运动: 粒子覆盖如下 `prefers-reduced-motion` (仍为图像),用户可以恢复运动; 粒子计数会自动滴入慢设备. - React 18+是一种对等依赖,对套件的其余部分是可选的. ## F. 海地层和额外数据(流量层、提供者) 除了风,控制器可以画出几个 **流层** (随向量字段的粒子)和 **颜色层** 马上. | 仁爱 | 日记 | 来源 | | --- | --- | --- | | 流动 | `wind`, (中文(简体) ), `current`, (中文(简体) ), `wave` | 气象网、洋流、波浪传播 | | 颜色 | `cloud`, (中文(简体) ), `rain`, (中文(简体) ), `temperature`, (中文(简体) ), `waveHeight`, (中文(简体) ), `seaLevel` | 气候网、海洋网 | ```ts controller.toggleFlowLayer("current"); // also setFlowLayers([...]); state.flows lists the ones on controller.toggleColorLayer("waveHeight"); // several colour layers can be on together controller.setLayerOpacity("seaLevel", 0.6); ``` 闪光: `LAYER_RAMPS` 财务报告和审定财务报表 `FLOW_RAMPS` (单位:千美元)`WAVE_HEIGHT_RAMP`, (中文(简体) ), `SEA_LEVEL_RAMP`, (中文(简体) ), `CURRENT_RAMP`, (中文(简体) ), `WAVE_FLOW_RAMP`; 将其中任何一项替换为 `` (停车) `[value, r, g, b, alpha?]`) (中文(简体) ). 每个流层都有自己的帆布,坡道和运动尺度. 洋流的拉动速度远快于其实际速度,否则将看不到任何动静. `WeatherLayerSwitch` 接受新层 联 合 国 `onChange` 也报告 `flows`。 。 。 . **供应商** 带来来自外部天气的田地。 A 类 `FieldProvider` 实值 `{ id, range(), fieldsAt(time) }`时间范围延长了时间范围, 因此,现有的滑动器并播放按钮动画. `@aeroswarm/marine` 现成船舶: ```ts import { marineFieldProvider, zoneTimeProvider } from "@aeroswarm/marine"; controller.setProviders([zoneTimeProvider(zones), marineFieldProvider(series)]); // or pass `providers` in the options ``` ## G. 将一层切入多边形( 任务) 海地层不得在陆地上作画,其边缘应与海岸相接,而不应是网格平方. `setMask` 将所选层限制为一组 GeoJSON 风格的多边形(例如: `@aeroswarm/marine`: ```ts controller.setMask(polygons); // default layers: waveHeight, seaLevel, current, wave controller.setMask(polygons, ["waveHeight"]); // only these controller.setMask(null); // remove ``` - 它使用CSS系统 `clip-path` 在地层画布上,所以 渲染器不支付每帧。 这需要 `MapAdapter.project`,该地图是Libre、Leaflet和 RIA 适配器提供;没有它 `setMask` 什么也没做. - 环向风是正常的,所以触摸或相重叠的多边形合并而孔会留有孔(C`normalizeMask`, (中文(简体) ), `maskClipPath` ) . - 千个多边形点 `clip-path` 弦长. 如果地图变慢,首先简化多边形. - 当地图在 2D 和 3D 之间切换时重建覆盖; 调用 `setMask` 在新控制器存在后再次打开. - 说对了 `fillMarineGaps` 从 `@aeroswarm/marine` 因此海值和多边形边缘之间的条是空白的. ## 文档 稳定性和版本化政策[稳定性.md](https://npmcn.com/package/server/weather/STABILITY.md)),使用限制 (单位:千美元)[限制](https://npmcn.com/package/server/weather/LIMITS.md))和所测量的性能和大小 (单位:千美元)[实绩](https://npmcn.com/package/server/weather/PERFORMANCE.md))与 `@aeroswarm/weather`; 变化在 [变动情况](https://npmcn.com/package/%40aeroswarm/weather-layer/CHANGELOG.md)。 。 。 . ## 限制 METAR和TAF描述了一分(空地). 这部动画是围绕着 机场,不是云雨的真实位置. 没有地形; 唯一的土地被切断 是G区的多边形面具, 你提供。 海地层具有指示性(模型分辨率约为5-10千米),不用于导航. ## 常见问题 ### @aeroswarm/weather-layer 是什么？ 由@aeroswarm/weather所驱动\. ### 如何安装 @aeroswarm/weather-layer？ 在项目目录运行 npm install @aeroswarm/weather-layer，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：@aeroswarm/weather（\>=0\.4\.0 \<1\.0\.0）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。 ### @aeroswarm/weather-layer 支持 TypeScript 吗？ 支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。 ### @aeroswarm/weather-layer 支持 ESM 还是 CommonJS？ 以 ES Module 形式发布，推荐使用 import 引入。在 CommonJS 项目中，Node\.js 20\.19\+ / 22\.12\+ 可以直接 require\(\) 不含顶层 await 的 ES Module，更早的版本需要改用动态 import\(\)。 ### @aeroswarm/weather-layer 可以商用吗？ @aeroswarm/weather-layer 使用 未声明 许可。package\.json 没有声明许可证。没有许可证的代码默认保留全部权利，商用前请联系作者或查看仓库中的 LICENSE 文件。以上为概括，不构成法律意见，请以许可原文为准。 ### @aeroswarm/weather-layer 的下载量有多少？ 根据 npm 官方下载统计，@aeroswarm/weather-layer 在 2026/10/06 – 2026/11/04 这 30 天内被下载 3,395 次，日均约 113 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。 ### @aeroswarm/weather-layer 还在维护吗？ 最新版本 0\.12\.0 发布于 2026/11/04（2 天前）；至今共发布 21 个版本，其中过去 12 个月发布了 21 个；首次发布于 2026/11/02。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。