Tmap-wind是天地图api4.0canvas风场可视化/风向图的插件，粒子效果基于wind-core做的封装，插件内置一个优化后的配置项，提高了展示性能，在使用时可以只填入数据，不需要手动配置，即可生成风向图。

效果图

在线演示

项目地址

GitHub: https://github.com/ymzcode/tmap-wind

项目实践示例

https://ymzcode.github.io/tianditu_piece/ 进入后找到设置 - 覆盖物 - 风向图 - 点击生成

可查看在天地图复杂情况下的实际效果

使用教程

• 这里以vite3和vue3组合式语法代码为例

最简单的方式，引入组件后直接使用，无需配置

import("tmap-wind").then(({ WindLayer }) => {
  fetch(
    "https://sakitam.oss-cn-beijing.aliyuncs.com/codepen/wind-layer/json/wind.json"
  )
    .then((res) => res.json())
    .then((res) => {
      const pdefinedOverlay = new WindLayer(res);
      console.log(pdefinedOverlay);
         // 将视图使用addOverLay(pdefinedOverlay)的方式放入地图即可
            map.addOverLay(pdefinedOverlay)
         ············
    });
});

更新数据

当使用new WindLayer()后，生成的视图对象包含了各种方法，其中有setData()，详细见下面的示例。

      import("tmap-wind").then(({ WindLayer }) => {
        fetch(
          "https://sakitam.oss-cn-beijing.aliyuncs.com/codepen/wind-layer/json/wind.json"
        )
          .then((res) => res.json())
          .then((res) => {
            const pdefinedOverlay = new WindLayer([]);
            
            // 记得使用addOverLay，将图层放入地图
            // 例如map.addOverLay(pdefinedOverlay);
                        map.addOverLay(pdefinedOverlay)
                        
            setTimeout(() => {
                // 模拟数据更新的情况，一开始生成没有任何数据，一段时间后才会显示数据
              pdefinedOverlay.setData(res)
            }, 5000)
          });
      });

删除视图/销毁视图

参考上方的变量pdefinedOverlay

map.removeOverLay(pdefinedOverlay)

隐藏/显示

// 隐藏
pdefinedOverlay.hide()
// 显示
pdefinedOverlay.show()

配置项

配置项包含两部分，一个是插件配置项，一个是WindCore的粒子效果配置项，下方展示了所有配置项的集合。

            const pdefinedOverlay = new WindLayer([], {
              // 指定canvas图层层级
              zIndex: 999,
              // 是否使用自定义的样式，使用后zIndex配置将失效，请自行设置zIndex
              customStyle: "",
              // 默认为false，是否禁止使用插件的默认配置项，如果为true，请自行指定windOptions的配置项，
              // 配置项参数详见下方：WindCore
              isDisableAutoConfig: true,
              // 以下为WindCore的配置项
              windOptions: {
                velocityScale: 1 / 20,
                paths: 5000,
                // eslint-disable-next-line no-unused-vars
                colorScale: [
                  "rgb(36,104, 180)",
                  "rgb(60,157, 194)",
                  "rgb(128,205,193 )",
                  "rgb(151,218,168 )",
                  "rgb(198,231,181)",
                  "rgb(238,247,217)",
                  "rgb(255,238,159)",
                  "rgb(252,217,125)",
                  "rgb(255,182,100)",
                  "rgb(252,150,75)",
                  "rgb(250,112,52)",
                  "rgb(245,64,32)",
                  "rgb(237,45,28)",
                  "rgb(220,24,32)",
                  "rgb(180,0,35)",
                ],
                lineWidth: 2
              },
            });

tmap-wind

WindCore

鸣谢

https://github.com/sakitam-fdd/wind-layer

补充

关于data数据源的解释

对应数据来源可以是gfs或者ecmwf，无论数据来源是哪个地方，最终此插件目前只支持json数据格式输入。

关于如何将数据文件转换为 json ，你可以查阅 grib2json, 或者 ecmwf 的数据处理库，当然，你也可以自行处理格点数据；

另外在解析数据时需要注意数据是否翻转了，默认对于地图展示来说我们知道经度默认从左向右递增，纬度从上向下依次递减（不一定完全正确）， 所以在处理数据时我们需要注意数据的范围和方向，避免展示出错，相关有一个讨论可以在 44 看到。

数据详解
返回 json 数据为一个数组类型，两个元素分别为 U和V对应数据，数据中应该至少包含以下字段：

dx: Increment in X direction, cannot be negative(x方向增量)
dy: Increment in Y direction, cannot be negative（Y方向增量）
nx: cols 数据行数
ny: rows 数据列数
# 以下四个为数据矩形范围
lo1: xmin 
lo2: xmax
la1: ymin
la2: ymax
# u/v 主要由以下参数区分
parameterCategory: data type
parameterNumber: data type

一般情况下由 grib2json 转出的数据parameterCategory参数为1，当parameterNumber 为 2 时为u 分量， 当parameterNumber 为 3 时为v 分量。

并且还需要注意的是 dy（纬度）增量 (默认我们采用的数据和格点原始数据方向保持一致，数据从左上到右下) 但是需要注意的是此时 dy 为 -(ymax - ymin) / ny 有些情况下我们格点数据组织形式可能 Y 轴是上下翻转的，此时我们可以配置 options.fieldOptions.flipY = true，来主动翻转数据（默认情况下我们检测到数据配置中的 deltaY > 0 时并且未配置flipY参数项默认去翻转数据）。

参考：https://blog.sakitam.com/wind-layer/guide/data.html