{"id":14989528,"url":"https://github.com/sakitam-fdd/wind-layer","last_synced_at":"2025-05-14T10:14:58.567Z","repository":{"id":27527644,"uuid":"114267284","full_name":"sakitam-fdd/wind-layer","owner":"sakitam-fdd","description":":flags: :rocket: wind-layer | a openlayers \u0026\u0026 maptalks \u0026\u0026 amap \u0026\u0026 bmap \u0026\u0026 leaflet \u0026\u0026 mapbox-gl \u0026\u0026 maplibre-gl extension like windy.com for weather visualization","archived":false,"fork":false,"pushed_at":"2025-04-30T21:11:41.000Z","size":129273,"stargazers_count":622,"open_issues_count":34,"forks_count":164,"subscribers_count":14,"default_branch":"master","last_synced_at":"2025-05-08T09:07:19.995Z","etag":null,"topics":["amap","bmap","cesium","docker","ecmwf","gfs","grib2","koa2","leaflet","leafletjs","mapbox-gl","maplibre-gl","maptalks","nodejs","openlayers","openlayers-extension","weather","wind-layer","windy"],"latest_commit_sha":null,"homepage":"https://sakitam-fdd.github.io/wind-layer/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/sakitam-fdd.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2017-12-14T15:35:32.000Z","updated_at":"2025-05-05T13:30:19.000Z","dependencies_parsed_at":"2022-07-09T05:15:59.540Z","dependency_job_id":"584aabdd-ee26-4831-bcab-de412882a2d4","html_url":"https://github.com/sakitam-fdd/wind-layer","commit_stats":{"total_commits":428,"total_committers":10,"mean_commits":42.8,"dds":"0.12616822429906538","last_synced_commit":"bf11d2108459e11fa50e1590ee448a09d075138c"},"previous_names":[],"tags_count":98,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sakitam-fdd%2Fwind-layer","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sakitam-fdd%2Fwind-layer/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sakitam-fdd%2Fwind-layer/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sakitam-fdd%2Fwind-layer/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/sakitam-fdd","download_url":"https://codeload.github.com/sakitam-fdd/wind-layer/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254120179,"owners_count":22017953,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["amap","bmap","cesium","docker","ecmwf","gfs","grib2","koa2","leaflet","leafletjs","mapbox-gl","maplibre-gl","maptalks","nodejs","openlayers","openlayers-extension","weather","wind-layer","windy"],"created_at":"2024-09-24T14:18:30.680Z","updated_at":"2025-05-14T10:14:58.548Z","avatar_url":"https://github.com/sakitam-fdd.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# wind-layer\n\na [maptalks](https://maptalks.org/) | [mapbox-gl](https://github.com/mapbox/mapbox-gl-js) | [openlayers](http://openlayers.org) | [leaflet](https://leafletjs.com/) | [bmap](https://map.baidu.com/) | [amap](https://ditu.amap.com/)\nextension to show wind field。\n\n## 介绍\n\n[wind-layer](./) 是一个专注于气象格点数据可视的插件，设计之处是参考了 [earth](http://earth.nullschool.net) [cambecc](https://github.com/cambecc/earth) 的一个气象数据的展示，他使用了流体场的方式去展示了全球的风速和风向，富有很强的\n表现力, 这个插件的早期的很多核心代码也是来源于此。当然现在它不仅仅是做风场的展示，常规的气象数据都可以依赖此插件进行可视化。\n\n## 特性 (1.x 通用版本相对于原始 [windy.js](https://github.com/Esri/wind-js))\n\n* 易于配置粒子数量，原始 windy.js 只能给定一个系数，会根据地图元素的大小进行计算粒子数量；现在可以支持系数方式和固定粒子数量以及回调函数的的三种方式。\n* 颜色配置支持三种方式：\n  String：固定颜色值\n  Function: 通过回调函数的风速值设定颜色（但是会有一定的性能损失）\n  String[]: 按照风速值范围等间隔渲染，无法做到精确匹配对应值的颜色。\n* 线条宽度支持动态设置。\n* 抽离了核心渲染库，便于扩展到其他地图渲染库。\n\n## 2.x webgl 版本\n\n`gl-core`扩展目前只针对 `mapbox`、`maplibre` 和 `maptalks` 做了相关适配，其他引擎适配欢迎 PR。\n\n目前计划支持的图层如下：\n\n- [x] 常规 raster 图层，为了解决多时次瓦片序列播放问题。\n- [x] 常规 Image 图层，单张 raster 图层。\n- [x] 色斑图渲染，支持瓦片和单张。\n- [x] 多数据源支持（geotiff、灰度图-可解析带 exif 信息、png-多通道浮点数压缩）。\n  - geotiff 的支持需要配置 `configDeps`, `exif` 默认支持，因为在 `safari` 浏览器下 `configDeps` 有兼容性问题，所以默认打包了 exif 的解析库。\n  ```ts\n  mapboxWind.configDeps(['https://unpkg.com/geotiff/dist-browser/geotiff.js']);\n  ```\n- [x] TimelineSource（时序数据源）支持。\n- [x] 粒子渲染，支持瓦片和单张。\n- [x] 箭头图层，支持瓦片和单张（矢量数据：风或洋流）。\n- [x] 图层拾取。\n- [x] 图层掩膜。\n\nTIP: 注意 2.0 之后不再支持 `jsonArray` 数据和 `EPSG:4326` 的图片数据，如果有需求请使用 1.x 版本\n\nhttps://github.com/sakitam-fdd/wind-layer/assets/19517451/b36b7eea-c647-42ed-91a4-e1f182d0343c\n\nhttps://github.com/sakitam-fdd/wind-layer/assets/19517451/bf27d98e-68ed-4f9c-b1e4-812764665bff\n\nhttps://github.com/sakitam-fdd/wind-layer/assets/19517451/90542837-b80c-450e-857d-4df6f52b6a49\n\nhttps://github.com/sakitam-fdd/wind-layer/assets/19517451/064f0ea4-f72f-4e9a-80e7-7a0097f60013\n\n## 示例图片\n\n![wind](https://sakitam-fdd.github.io/wind-layer/wind.png)\n\n## 扩展\n\n| Project | Version | Npm | CDN | Description |\n|---------|---------|-----|------|-------------|\n| [wind-core](https://github.com/sakitam-fdd/wind-layer/tree/master/packages/core) | [![Npm package](https://img.shields.io/npm/v/wind-core.svg)](https://www.npmjs.org/package/wind-core) | [![NPM downloads](https://img.shields.io/npm/dm/wind-core.svg)](https://npmjs.org/package/wind-core) | [![](https://data.jsdelivr.com/v1/package/npm/wind-core/badge)](https://www.jsdelivr.com/package/npm/wind-core) | 风场核心渲染，可扩展不可以直接使用 |\n| [wind-gl-core](https://github.com/sakitam-fdd/wind-layer/tree/master/packages/gl-core) | [![Npm package](https://img.shields.io/npm/v/wind-gl-core.svg)](https://www.npmjs.org/package/wind-gl-core) | [![NPM downloads](https://img.shields.io/npm/dm/wind-gl-core.svg)](https://npmjs.org/package/wind-gl-core) | [![](https://data.jsdelivr.com/v1/package/npm/wind-gl-core/badge)](https://www.jsdelivr.com/package/npm/wind-gl-core) | 色斑图核心渲染，可扩展不可以直接使用 |\n| [ol-wind](https://github.com/sakitam-fdd/wind-layer/tree/master/packages/ol) | [![Npm package](https://img.shields.io/npm/v/ol-wind.svg)](https://www.npmjs.org/package/ol-wind) | [![NPM downloads](https://img.shields.io/npm/dm/ol-wind.svg)](https://npmjs.org/package/ol-wind) | [![](https://data.jsdelivr.com/v1/package/npm/ol-wind/badge)](https://www.jsdelivr.com/package/npm/ol-wind) | `openlayers 6+` 风场扩展插件 |\n| [ol5-wind](https://github.com/sakitam-fdd/wind-layer/tree/master/packages/ol5) | [![Npm package](https://img.shields.io/npm/v/ol5-wind.svg)](https://www.npmjs.org/package/ol5-wind) | [![NPM downloads](https://img.shields.io/npm/dm/ol5-wind.svg)](https://npmjs.org/package/ol5-wind) | [![](https://data.jsdelivr.com/v1/package/npm/ol5-wind/badge)](https://www.jsdelivr.com/package/npm/ol5-wind) | `openlayers 5` 风场扩展插件 |\n| [openlayers-wind](https://github.com/sakitam-fdd/wind-layer/tree/master/packages/openlayers) | [![Npm package](https://img.shields.io/npm/v/openlayers-wind.svg)](https://www.npmjs.org/package/openlayers-wind) | [![NPM downloads](https://img.shields.io/npm/dm/openlayers-wind.svg)](https://npmjs.org/package/openlayers-wind) | [![](https://data.jsdelivr.com/v1/package/npm/openlayers-wind/badge)](https://www.jsdelivr.com/package/npm/openlayers-wind) | `openlayers 3/4` 风场扩展插件 |\n| [@sakitam-gis/maptalks-wind](https://github.com/sakitam-fdd/wind-layer/tree/master/packages/maptalks) | [![Npm package](https://img.shields.io/npm/v/@sakitam-gis/maptalks-wind.svg)](https://www.npmjs.org/package/@sakitam-gis/maptalks-wind) | [![NPM downloads](https://img.shields.io/npm/dm/@sakitam-gis/maptalks-wind.svg)](https://npmjs.org/package/@sakitam-gis/maptalks-wind) | [![](https://data.jsdelivr.com/v1/package/npm/@sakitam-gis/maptalks-wind/badge)](https://www.jsdelivr.com/package/npm/@sakitam-gis/maptalks-wind) | `maptalks` 风场扩展插件 |\n| [amap-wind](https://github.com/sakitam-fdd/wind-layer/tree/master/packages/amap) | [![Npm package](https://img.shields.io/npm/v/amap-wind.svg)](https://www.npmjs.org/package/amap-wind) | [![NPM downloads](https://img.shields.io/npm/dm/amap-wind.svg)](https://npmjs.org/package/amap-wind) | [![](https://data.jsdelivr.com/v1/package/npm/amap-wind/badge)](https://www.jsdelivr.com/package/npm/amap-wind) | 高德地图风场扩展插件 |\n| [bmap-wind](https://github.com/sakitam-fdd/wind-layer/tree/master/packages/bmap) | [![Npm package](https://img.shields.io/npm/v/bmap-wind.svg)](https://www.npmjs.org/package/bmap-wind) | [![NPM downloads](https://img.shields.io/npm/dm/bmap-wind.svg)](https://npmjs.org/package/bmap-wind) | [![](https://data.jsdelivr.com/v1/package/npm/bmap-wind/badge)](https://www.jsdelivr.com/package/npm/bmap-wind) | 百度地图风场扩展插件 |\n| [mapbox-wind](https://github.com/sakitam-fdd/wind-layer/tree/master/packages/mapbox-gl) | [![Npm package](https://img.shields.io/npm/v/@sakitam-gis/mapbox-wind.svg)](https://www.npmjs.org/package/@sakitam-gis/mapbox-wind) | [![NPM downloads](https://img.shields.io/npm/dm/@sakitam-gis/mapbox-wind.svg)](https://npmjs.org/package/@sakitam-gis/mapbox-wind) | [![](https://data.jsdelivr.com/v1/package/npm/@sakitam-gis/mapbox-wind/badge)](https://www.jsdelivr.com/package/npm/@sakitam-gis/mapbox-wind) | mapbox-gl 风场扩展插件 |\n| [maplibre-wind](https://github.com/sakitam-fdd/wind-layer/tree/master/packages/maplibre-gl)             | [![Npm package](https://img.shields.io/npm/v/@sakitam-gis/maplibre-wind.svg)](https://www.npmjs.org/package/@sakitam-gis/maplibre-wind) | [![NPM downloads](https://img.shields.io/npm/dm/@sakitam-gis/maplibre-wind.svg)](https://npmjs.org/package/@sakitam-gis/maplibre-wind) | [![](https://data.jsdelivr.com/v1/package/npm/@sakitam-gis/maplibre-wind/badge)](https://www.jsdelivr.com/package/npm/@sakitam-gis/maplibre-wind) | maplibre-gl 风场扩展插件 |\n| [leaflet-wind](https://github.com/sakitam-fdd/wind-layer/tree/master/packages/leaflet) | [![Npm package](https://img.shields.io/npm/v/leaflet-wind.svg)](https://www.npmjs.org/package/leaflet-wind) | [![NPM downloads](https://img.shields.io/npm/dm/leaflet-wind.svg)](https://npmjs.org/package/leaflet-wind) | [![](https://data.jsdelivr.com/v1/package/npm/leaflet-wind/badge)](https://www.jsdelivr.com/package/npm/leaflet-wind) | Leaflet风场扩展插件 |\n\n### 特殊说明\n\ncesium 相关集成请查看 [cesium-wind](https://github.com/QJvic/cesium-wind)\n\n## 安装\n\n### 使用 pnpm 或 yarn 安装\n\n**我们推荐使用 pnpm 或 yarn 的方式进行开发**，\n不仅可在开发环境轻松调试，也可放心地在生产环境打包部署使用，\n享受整个生态圈和工具链带来的诸多好处。\n\n相关插件：\n\n```bash\n# pnpm\npnpm install wind-core\npnpm install wind-gl-core\npnpm install src-wind\npnpm install ol5-wind\npnpm install openlayers-wind\npnpm install @sakitam-gis/maptalks-wind\npnpm install amap-wind\npnpm install bmap-wind\npnpm install leaflet-wind\npnpm install @sakitam-gis/mapbox-wind\npnpm install @sakitam-gis/maplibre-wind\n\n# yarn\nyarn add wind-core\nyarn add wind-gl-core\nyarn add src-wind\nyarn add ol5-wind\nyarn add openlayers-wind\nyarn add @sakitam-gis/maptalks-wind\nyarn add amap-wind\nyarn add bmap-wind\nyarn add leaflet-wind\nyarn add @sakitam-gis/mapbox-wind\nyarn add @sakitam-gis/maplibre-wind\n```\n\n### 部分插件亦可以通过浏览器引入\n\n在浏览器中使用 `script` 标签直接引入文件，并使用全局变量。\n\n我们在仓库发布包内的 `dist` 目录下提供了 `xxx.js` 以及 `xxx.min.js`；\n\n| Project                                                                                                                                      | unpkg | jsdelivr |\n|----------------------------------------------------------------------------------------------------------------------------------------------|---------|-------------|\n| [wind-core](https://cdn.jsdelivr.net/npm/wind-core/dist/)                                                                                    | https://unpkg.com/wind-core/dist/wind-core.js | https://cdn.jsdelivr.net/npm/wind-core/dist/wind-core.js |\n| [wind-gl-core](https://cdn.jsdelivr.net/npm/wind-gl-core/dist/)                                                                              | https://unpkg.com/wind-gl-core/dist/wind-gl-core.js | https://cdn.jsdelivr.net/npm/wind-gl-core/dist/wind-gl-core.js |\n| [ol-wind](https://cdn.jsdelivr.net/npm/ol-wind/dist/) 因 `ol6` 重构原因，无法直接使用，你可以自行构建\u003chttps://cdn.jsdelivr.net/npm/@sakitam-gis/ol6@6.3.3/dist/\u003e | https://unpkg.com/ol-wind/dist/ol-wind.js | https://cdn.jsdelivr.net/npm/ol-wind/dist/ol-wind.js |\n| [ol5-wind](https://cdn.jsdelivr.net/npm/ol5-wind/dist/)                                                                                      | https://unpkg.com/ol5-wind/dist/ol-wind.js | https://cdn.jsdelivr.net/npm/ol5-wind/dist/ol-wind.js |\n| [openlayers-wind](https://cdn.jsdelivr.net/npm/openlayers-wind/dist/)                                                                        | https://unpkg.com/openlayers-wind/dist/ol-wind.js | https://cdn.jsdelivr.net/npm/openlayers-wind/dist/ol-wind.js |\n| [@sakitam-gis/maptalks-wind](https://cdn.jsdelivr.net/npm/@sakitam-gis/maptalks-wind/dist/)                                                  | https://unpkg.com/@sakitam-gis/maptalks-wind/dist/maptalks-wind.js | https://cdn.jsdelivr.net/npm/@sakitam-gis/maptalks-wind/dist/maptalks-wind.js |\n| [amap-wind](https://cdn.jsdelivr.net/npm/amap-wind/dist/)                                                                                    | https://unpkg.com/amap-wind/dist/amap-wind.js | https://cdn.jsdelivr.net/npm/amap-wind/dist/amap-wind.js |\n| [bmap-wind](https://cdn.jsdelivr.net/npm/bmap-wind/dist/)                                                                                    | https://unpkg.com/bmap-wind/dist/bmap-wind.js | https://cdn.jsdelivr.net/npm/bmap-wind/dist/bmap-wind.js |\n| [leaflet-wind](https://cdn.jsdelivr.net/npm/leaflet-wind/dist/)                                                                              | https://unpkg.com/leaflet-wind/dist/leaflet-wind.js | https://cdn.jsdelivr.net/npm/leaflet-wind/dist/leaflet-wind.js |\n| [@sakitam-gis/mapbox-wind](https://cdn.jsdelivr.net/npm/@sakitam-gis/mapbox-wind/dist/)                                                      | https://unpkg.com/@sakitam-gis/mapbox-wind/dist/mapbox-wind.js | https://cdn.jsdelivr.net/npm/@sakitam-gis/mapbox-wind/dist/mapbox-wind.js |\n| [@sakitam-gis/maplibre-wind](https://cdn.jsdelivr.net/npm/@sakitam-gis/maplibre-wind/dist/)                                                    | https://unpkg.com/@sakitam-gis/maplibre-wind/dist/maplibre-wind.js | https://cdn.jsdelivr.net/npm/@sakitam-gis/maplibre-wind/dist/maplibre-wind.js |\n\n## 基础\n\n基础使用可以分为三步：\n\n1. 引入相应的 `WebGIS` 地图类库，引入对应的可视化图层扩展插件。\n2. 正常初始化一个地图。\n3. 创建一个 `WindLayer`，设置风场格点的 `U V` 数据和图层参数 并添加到地图上。\n\n## 示例\n\n以下以 maptalks 为例：\n\n### npm + es6\n\n``` html\n\u003ctemplate\u003e\n  \u003cdiv class=\"demo-content\"\u003e\n    \u003cdiv class=\"demo-content-datgui\"\u003e\u003c/div\u003e\n    \u003cdiv class=\"map-warp\" ref=\"map\"\u003e\u003c/div\u003e\n  \u003c/div\u003e\n\u003c/template\u003e\n\u003cscript\u003e\n  import 'maptalks/dist/maptalks.css';\n  import {\n    Map,\n    TileLayer,\n  } from 'maptalks';\n\n  import { WindLayer } from 'maptalks-wind';\n\n  export default {\n    name: 'maptalks-wind-base',\n    data() {\n      return {};\n    },\n    watch: {},\n    methods: {\n      initMap() {\n        const map = new Map(this.$refs.map, {\n          center: [113.53450137499999, 34.44104525],\n          zoom: 3,\n          baseLayer: new TileLayer('base', {\n            urlTemplate: '//{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}.png',\n            // urlTemplate: 'https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png',\n            subdomains: ['a', 'b', 'c', 'd'],\n          })\n        });\n\n        fetch('/data/wind.json')\n          .then(res =\u003e res.json())\n          .then(res =\u003e {\n            const windLayer = new WindLayer('wind', res, {\n              windOptions: {\n                // colorScale: scale,\n                velocityScale: 1 / 20,\n                paths: 5000,\n                // eslint-disable-next-line no-unused-vars\n                colorScale: [\n                  \"rgb(36,104, 180)\",\n                  \"rgb(60,157, 194)\",\n                  \"rgb(128,205,193 )\",\n                  \"rgb(151,218,168 )\",\n                  \"rgb(198,231,181)\",\n                  \"rgb(238,247,217)\",\n                  \"rgb(255,238,159)\",\n                  \"rgb(252,217,125)\",\n                  \"rgb(255,182,100)\",\n                  \"rgb(252,150,75)\",\n                  \"rgb(250,112,52)\",\n                  \"rgb(245,64,32)\",\n                  \"rgb(237,45,28)\",\n                  \"rgb(220,24,32)\",\n                  \"rgb(180,0,35)\"\n                ],\n                // colorScale: scale,\n              },\n              // map: map,\n              // projection: 'EPSG:4326'\n            });\n\n            console.log(map, windLayer);\n\n            map.addLayer(windLayer);\n          });\n      }\n    },\n    mounted() {\n      this.initMap();\n    },\n  };\n\u003c/script\u003e\n\n\u003cstyle lang=\"less\"\u003e\n  .demo-content {\n    width: 100%;\n    height: 100%;\n    position: relative;\n    background-color: #cbe0ff;\n    \u0026-datgui {\n      position: absolute;\n      top: 10px;\n      left: 10px;\n      z-index: 1;\n      pointer-events: auto;\n    }\n\n    .map-warp {\n      width: 100%;\n      height: 100%;\n    }\n  }\n\u003c/style\u003e\n```\n\n### cdn\n\n``` html\n\u003c!DOCTYPE html\u003e\n\u003chtml\u003e\n\u003cmeta charset=\"UTF-8\"\u003e\n\u003cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1\"\u003e\n\u003ctitle\u003eMap - Display a map\u003c/title\u003e\n\u003clink rel=\"stylesheet\" href=\"https://cdn.jsdelivr.net/npm/maptalks/dist/maptalks.css\"\u003e\n\u003cstyle type=\"text/css\"\u003e\n  html, body {\n    margin: 0;\n    height: 100%;\n    width: 100%\n  }\n  .container {\n    width: 100%;\n    height: 100%\n  }\n\u003c/style\u003e\n\u003cbody\u003e\n\n\u003cdiv id=\"map\" class=\"container\"\u003e\u003c/div\u003e\n\u003cscript src=\"https://cdn.jsdelivr.net/npm/maptalks/dist/maptalks.min.js\"\u003e\u003c/script\u003e\n\u003cscript src=\"https://cdn.jsdelivr.net/npm/@sakitam-gis/maptalks-wind/dist/maptalks-wind.js\"\u003e\u003c/script\u003e\n\u003cscript\u003e\n  const map = new maptalks.Map('map', {\n    center: [113.53450137499999, 34.44104525],\n    zoom: 5,\n    baseLayer: new maptalks.TileLayer('base', {\n      // urlTemplate: 'https://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}.png',\n      urlTemplate: 'https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png',\n      subdomains: ['a', 'b', 'c', 'd'],\n    })\n  });\n\n  fetch('data.json')\n    .then(res =\u003e res.json())\n    .then(res =\u003e {\n      const windLayer = new MaptalksWind.WindLayer('wind', res, {\n        windOptions: {\n          // colorScale: (m) =\u003e {\n          //   // console.log(m);\n          //   return '#fff';\n          // },\n          colorScale: [\n            \"rgb(36,104, 180)\",\n            \"rgb(60,157, 194)\",\n            \"rgb(128,205,193 )\",\n            \"rgb(151,218,168 )\",\n            \"rgb(198,231,181)\",\n            \"rgb(238,247,217)\",\n            \"rgb(255,238,159)\",\n            \"rgb(252,217,125)\",\n            \"rgb(255,182,100)\",\n            \"rgb(252,150,75)\",\n            \"rgb(250,112,52)\",\n            \"rgb(245,64,32)\",\n            \"rgb(237,45,28)\",\n            \"rgb(220,24,32)\",\n            \"rgb(180,0,35)\"\n          ],\n          // velocityScale: 1 / 20,\n          // paths: 5000,\n          frameRate: 16,\n          maxAge: 60,\n          globalAlpha: 0.9,\n          velocityScale: 1 / 30,\n          // paths: 10000,\n          paths: () =\u003e { // can be number or function\n            const zoom = map.getZoom();\n            return zoom * 1000;\n          },\n        },\n      });\n\n      console.log(map, windLayer);\n\n      map.addLayer(windLayer);\n    });\n\u003c/script\u003e\n\u003c/body\u003e\n\u003c/html\u003e\n\n```\n\n## [文档请移步](//sakitam-fdd.github.io/wind-layer/) 正在完善中......\n\n## 如何获取数据\n\n天气数据由[全球预报系统](http://en.wikipedia.org/wiki/Global_Forecast_System)（GFS）生成，\n由美国国家气象局管理。 预测每天产生四次，并可用于\n从[NOMADS](http://nomads.ncep.noaa.gov/)下载。 这些文件位于[GRIB2](http://en.wikipedia.org/wiki/GRIB)\n格式并包含超过[300条记录](http://www.nco.ncep.noaa.gov/pmb/products/gfs/gfs.t00z.pgrbf00.grib2.shtml)。\n我们只需要这些记录中的一小部分就可以在特定的等压线上可视化风资料。 下面的命令下载\n1000 hPa风向量，并使用[grib2json](https://github.com/cambecc/grib2json)将它们转换为JSON格式。\n\n```bash\nYYYYMMDD=\u003ca date, for example: 20140101\u003e\ncurl \"http://nomads.ncep.noaa.gov/cgi-bin/filter_gfs.pl?file=gfs.t00z.pgrb2.1p00.f000\u0026lev_10_m_above_ground=on\u0026var_UGRD=on\u0026var_VGRD=on\u0026dir=%2Fgfs.${YYYYMMDD}00\" -o gfs.t00z.pgrb2.1p00.f000\ngrib2json -d -n -o current-wind-surface-level-gfs-1.0.json gfs.t00z.pgrb2.1p00.f000\ncp current-wind-surface-level-gfs-1.0.json \u003cearth-git-repository\u003e/public/data/weather/current\n```\n\n对于 2.x 版本的数据格式我们可以使用 https://github.com/sakitam-gis/raster-process 来生成所需要的瓦片和单张图片。\n\n## Acknowledgments\n\n* https://github.com/cambecc/earth\n* http://earth.nullschool.net\n* https://github.com/Esri/wind-js\n* https://github.com/danwild/wind-js-leaflet\n* https://github.com/IHCantabria/Leaflet.CanvasLayer.Field\n* https://github.com/mapbox/webgl-wind\n* https://github.com/astrosat/windgl\n\n## License\n[![FOSSA Status](https://app.fossa.io/api/projects/git%2Bgithub.com%2Fsakitam-fdd%2Fwind-layer.svg?type=large)](https://app.fossa.io/projects/git%2Bgithub.com%2Fsakitam-fdd%2Fwind-layer?ref=badge_large)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsakitam-fdd%2Fwind-layer","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsakitam-fdd%2Fwind-layer","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsakitam-fdd%2Fwind-layer/lists"}