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