Because of the need of the project, the free API was not found, so I used JS to pick up the satellite cloud image
Satellite cloud map url
(I hope that the weather station's little brother will not change his path...)
First, save the cloud map url and find the path rule. The URLs at different time points are as follows (the following url is only for reference, but it has failed in practice. The satellite cloud map of China Meteorological Observatory should only retain 10 pictures in the last 5 hours):
11.15:
http://image.nmc.cn/product/2017/12/14/WXCL/medium/SEVP_NSMC_WXCL_ASC_E99_ACHN_LNO_PY_20171214031500000.JPG
10.45:
http://image.nmc.cn/product/2017/12/14/WXCL/medium/SEVP_NSMC_WXCL_ASC_E99_ACHN_LNO_PY_20171214024500000.JPG
10.15:
http://image.nmc.cn/product/2017/12/14/WXCL/medium/SEVP_NSMC_WXCL_ASC_E99_ACHN_LNO_PY_20171214021500000.JPG
09.45:
http://image.nmc.cn/product/2017/12/14/WXCL/medium/SEVP_NSMC_WXCL_ASC_E99_ACHN_LNO_PY_20171214014500000.JPG
09.15:
http://image.nmc.cn/product/2017/12/14/WXCL/medium/SEVP_NSMC_WXCL_ASC_E99_ACHN_LNO_PY_20171214011500000.JPG
08.45:
http://image.nmc.cn/product/2017/12/14/WXCL/medium/SEVP_NSMC_WXCL_ASC_E99_ACHN_LNO_PY_20171214004500000.JPG
08.15:
http://image.nmc.cn/product/2017/12/14/WXCL/medium/SEVP_NSMC_WXCL_ASC_E99_ACHN_LNO_PY_20171214001500000.JPG
07.45:
http://image.nmc.cn/product/2017/12/13/WXCL/medium/SEVP_NSMC_WXCL_ASC_E99_ACHN_LNO_PY_20171213234500000.JPG
It can be seen from the above that the following figures are: year + month + day + hour + minute (url is UTC time, but the watermark on the picture is Beijing time) and updated every half an hour
code:
window.onload=function(){
var arr = new Array();
//Get the satellite cloud map url after 15 minutes
function time15() {
var date1 = new Date();
//Get the timestamp of the current time
time1 = Date.parse(date1);
//Current time minus 5 hours
date1.setHours(date1.getHours() - 5);
//Get 5 hours ago timestamp
time2 = Date.parse(date1);
var ok = 1;
while(ok) {
time1 = time1 - 1000 * 60 * 60; //Every hour
if(time1 < time2) {
ok = 0;
} else {
date2 = new Date(time1)
var hour = date2.getUTCHours().toString(); //utc time
var days = date2.getUTCDate().toString(); //utc days
var month = (date2.getUTCMonth() + 1).toString();
var years = date2.getUTCFullYear().toString();
if(hour.length == 1) {
hour = "0" + hour;
}
if(days.length == 1) {
days = "0" + days;
}
if(month.length == 1) {
month = "0" + month;
}
var str = "http://image.nmc.cn/product/" + years + "/" + month + "/" + days + "/WXCL/medium/SEVP_NSMC_WXCL_ASC_E99_ACHN_LNO_PY_" + years + month + days + hour + 15 + "00000.JPG"
arr.push(str)
}
}
}
time15();
//Get the satellite cloud map url after 45 minutes
function time45(){
var date1 = new Date();
//Get the timestamp of the current time
time1 = Date.parse(date1);
//Current time minus 5 hours
date1.setHours(date1.getHours() - 5);
//Get 5 hours ago timestamp
time2 = Date.parse(date1);
var ok = 1;
while(ok) {
time1 = time1 - 1000 * 60 * 60; //Every hour
if(time1 < time2) {
ok = 0;
} else {
date2 = new Date(time1)
var hour = date2.getUTCHours().toString(); //utc time
var days = date2.getUTCDate().toString(); //utc days
var month = (date2.getUTCMonth() + 1).toString();
var years = date2.getUTCFullYear().toString();
if(hour.length == 1) {
hour = "0" + hour;
}
if(days.length == 1) {
days = "0" + days;
}
if(month.length == 1) {
month = "0" + month;
}
var str = "http://image.nmc.cn/product/" + years + "/" + month + "/" + days + "/WXCL/medium/SEVP_NSMC_WXCL_ASC_E99_ACHN_LNO_PY_" + years + month + days + hour + 45 + "00000.JPG"
arr.push(str)
}
}
}
time45();
arr.sort()//Array sorting
arr.reverse()//Reverse order
console.log(arr)
//Page loading finished rendering the first
document.getElementById('map').innerHTML ="<img src=" + arr[0] + ">";
var i=0;
//Left arrow click event
document.getElementsByClassName('iconLeft')[0].onclick=function(){
i=i+1;
if(i>9){
i=0;
}
document.getElementById('map').innerHTML = "<img src=" + arr[i] + ">"
}
//Right arrow click event
document.getElementsByClassName('iconRight')[0].onclick=function(){
i=i-1;
if(i<0){
i=9;
}
document.getElementById('map').innerHTML = "<img src=" + arr[i] + ">"
}
}
Above, I compare dishes, I don't know if there is a better and simpler way, if so, please give me some advice, thank you.