天气API动态回调实操

易知微创新技术团队

| 2024-08-30 14:49 118 0 0

一、预览效果

二、实现逻辑

通过数据回调、数据过滤器、天气API接口实现。通过【选项卡】发出回调参数【行政区划代码】，天气组件一方面通过【API接口】获取各地天气数据，一方面接收选项卡的【行政区划代码】，实现动态回调。

三、操作步骤

3.1 添加组件

首先在看板中添加【组件】→【交互】→【选项卡】

添加【组件】→【其他】→【天气组件】

3.2 选项卡操作

选中【选项卡】组件，点击【数据】，根据如下所示，添加所要展示的城市数据。

（ps：‘行政区划代码’放入你想要展示的城市行政区划代码，‘城市名称’放入你想要展示的城市的名称，数量须和选项卡数保持一致）

[  {    "s": "行政区划代码",    "content": "城市名称"  }]

选中【选项卡】，点击【交互】→【回调参数】→匹配动作【鼠标点击】→字段值设置为【s】→变量名设置为【city】

3.3 天气组件操作

选中天气组件，点击【数据】→【数据接口】→数据源类型选择【API接口】

接下来会讲述如何获取天气API接口，以高德地图为例。首先注册【高德开放平台】→【应用管理】→【我的应用】→【创建新应用】→添加【Key】→选择【Web服务】。

回到EasyV平台继续操作，选中【天气组件】→创建【数据源】

设置Base URL为：https://restapi.amap.com

（ps：该链接为高德天气API链接，若使用其他API接口，根据情况更换即可）

获取密钥【Key】

现在需要设置你的【路径】和【参数】，如下⬇️

【路径】：/v3/weather/weatherInfo

【参数】：city=:city&key=放入申请的密钥（Key）&extensions=all

（ps：加粗的部分替换为密钥即可，不需要添加多余符号）

接下来设置过滤器，选择【新建过滤器】

放入【过滤器代码】→添加回调【city】→【保存】→【开启过滤器】

var o = data[0].forecasts[0].casts[0];var ret = [  {    "weather": o.dayweather,    "temperature": {      "min": o.nighttemp,      "max": o.daytemp    },    "wind": {      "direction": o.daywind,      "level": o.daypower    }  }];return ret;

数字大屏 可视化平台 动态数据可视化 天气API动态回调实操 天气API动态回调

赞同 0

: 微信

: 链接

全部 0条评论

易知微创新技术团队

135

文章

1.07K

人气

粉丝

关注

关注我们

扫码获取

更多数字孪生可视化干货内容