免费PM2.5数据如何获取之PM25.in网站API调用JSON数据处理方法

在介绍之前,你需要了解HTML,JSON,以及JS有一定的了解。

PM25.IN网址:http://www.pm25.in/api_doc,为了让更多人更快更好的知道PM2.5,我们做了一个艰难的决定,决定无偿开放PM2.5数据接口,以方便更多的开发者使用!

如果你需要经常调用的话,建议你申请下密钥,由于我调用次数不多,所以使用的是公测密钥。

公共测试AppKey:5j1znBVAsnSf5xQyNQyq。

Pm25.in API注意事项如下:

1、所有API的调用,必须附带"token"这个参数,即申请的AppKey;

2、API中的'city'参数支持中文、拼音和区号,例如:"city=广州","city=guangzhou","city=020";

3、因为参数使用中文需要encode,所以推荐开发者city参数尽量使用拼音;

4、重名情况:泰州的拼音为"taizhoushi",台州的拼音为"taizhou";

5、API返回的JSON格式数据是经过UTF-8编码的,这个文档里的"成功返回示例"为了直观,已经decode过;

6、由于有些开发者对API调用过于频繁,严重影响了服务器,现在对API调用次数作出调整:1.10和1.11每小时15次、1.12每小时5次、1.13每小时15次,其余每小时500次;

7、由于数据源方面的原因,API中的24小时均值、station_code有时返回可能为空;

 

下面我以获取一个城市所有监测点的PM2.5数据,为例介绍下,获取后的JSON数据如何调用以及处理。

地址    http://www.pm25.in/api/querys/pm2_5.json

方法    GET

参数    

* city:城市名称,必选参数

* avg:是否返回一个城市所有监测点数据均值的标识,可选参数,默认是true,不需要均值时传这个参数并设置为false

* stations:是否只返回一个城市均值的标识,可选参数,默认是yes,不需要监测点信息时传这个参数并设置为no,返回

一个数组,里面的一项是一个监测点的PM2.5信息,其中每一项数据包括

* aqi

* area

* pm2_5

* pm2_5_24h

* position_name

* primary_pollutant

* quality

* station_code

* time_point

默认情况下,最后一项是所有监测点的均值(即一个城市的值)

 

代码:

 

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Seniverse API Jsonp Test Page</title>

<script type="text/javascript" src="js/jquery.js"></script>

</head>

<body>

<div id="content" style="height:300px;width:600px;background:blue;">

</div>

<div id="view" style="height:300px;width:600px;background:red;position:absolute;bottom:20px;">

<script>

var KEY = "5j1znBVAsnSf5xQyNQyq"; // 测试用key,请更换成您自己的 Key

var API = "http://www.pm25.in/api/querys/pm2_5.json";

var CITY = "shanghai"; // 因为参数使用中文需要encode,所以推荐开发者city参数尽量使用拼音;

var PMjsonpCallbackdemo = function(data) {

var life = data;//取出Json数据并存入life中

var text = [];

//显示方式一

var obj = document.getElementById('content');

text.push("AQI: " + life[0].aqi);//利用文本推的方式将文本显示在界面中。

text.push("Position_Name: " + life[0].position_name);

text.push("PM2.5: " + life[0].pm2_5);

text.push("PM2.5_24h: " + life[0].pm2_5_24h);

text.push("Primary_Pollutant: " + life[0].primary_pollutant);

text.push("Quality: " + life[0].quality);

text.push("UpdateTime: " + life[0].time_point);

obj.innerText = text.join("\n");

//显示方式二

document.getElementById("view").innerHTML=(life[1].aqi+life[0].aqi)/2;

}

var url = API + "?city=" + CITY + "&" + "token=" + KEY + "&callback=PMjsonpCallbackdemo";

// 向 HTML 中动态插入 script 标签,通过 JSONP 的方式进行调用

var newScript = document.createElement('script');

newScript.type = 'text/javascript';

newScript.src = url;

$('body').append(newScript);

</script>

</body>

</html>

 

获取得到的json数据

[

{

aqi: 50,

area: "上海",

pm2_5: 26,

pm2_5_24h: 24,

position_name: "十五厂",

primary_pollutant: null,

quality: "优",

station_code: "1142A",

time_point: "2017-05-20T13:00:00Z"

},

{

aqi: 46,

area: "上海",

pm2_5: 26,

pm2_5_24h: 22,

position_name: "虹口",

primary_pollutant: null,

quality: "优",

station_code: "1143A",

time_point: "2017-05-20T13:00:00Z"

},

{

aqi: 37,

area: "上海",

pm2_5: 16,

pm2_5_24h: 20,

position_name: "徐汇上师大",

primary_pollutant: null,

quality: "优",

station_code: "1144A",

time_point: "2017-05-20T13:00:00Z"

},

{

aqi: 53,

area: "上海",

pm2_5: 26,

pm2_5_24h: 25,

position_name: "杨浦四漂",

primary_pollutant: "颗粒物(PM10)",

quality: "良",

station_code: "1145A",

time_point: "2017-05-20T13:00:00Z"

},

{

aqi: 55,

area: "上海",

pm2_5: 33,

pm2_5_24h: 28,

position_name: "青浦淀山湖",

primary_pollutant: "臭氧1小时",

quality: "良",

station_code: "1146A",

time_point: "2017-05-20T13:00:00Z"

},

{

aqi: 46,

area: "上海",

pm2_5: 24,

pm2_5_24h: 22,

position_name: "静安监测站",

primary_pollutant: null,

quality: "优",

station_code: "1147A",

time_point: "2017-05-20T13:00:00Z"

},

{

aqi: 42,

area: "上海",

pm2_5: 13,

pm2_5_24h: 18,

position_name: "浦东川沙",

primary_pollutant: null,

quality: "优",

station_code: "1148A",

time_point: "2017-05-20T13:00:00Z"

},

{

aqi: 44,

area: "上海",

pm2_5: 19,

pm2_5_24h: 21,

position_name: "浦东新区监测站",

primary_pollutant: null,

quality: "优",

station_code: "1149A",

time_point: "2017-05-20T13:00:00Z"

},

{

aqi: 43,

area: "上海",

pm2_5: 23,

pm2_5_24h: 23,

position_name: "浦东张江",

primary_pollutant: null,

quality: "优",

station_code: "1150A",

time_point: "2017-05-20T13:00:00Z"

},

{

aqi: 48,

area: "上海",

pm2_5: 29,

pm2_5_24h: 21,

position_name: "普陀",

primary_pollutant: null,

quality: "优",

station_code: "1141A",

time_point: "2017-05-20T13:00:00Z"

},

{

aqi: 56,

area: "上海",

pm2_5: 23,

pm2_5_24h: 22,

position_name: null,

primary_pollutant: "臭氧8小时",

quality: "良",

station_code: null,

time_point: "2017-05-20T13:00:00Z"

}

]

 

最后处理得到的界面:

小demo的界面

 

实际使用时候的界面

如果各位有什么不懂的地方,欢迎在我的博客网网站www.shaofee.com留言咨询。

  • 0
    点赞
  • 12
    收藏
    觉得还不错? 一键收藏
  • 12
    评论
评论 12
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值