js获取当前卫星云图url并播放

最新推荐文章于 2024-06-21 10:23:12 发布

tingting@Wang

最新推荐文章于 2024-06-21 10:23:12 发布

阅读量2.2k

点赞数 1

本文链接：https://blog.csdn.net/Tingting_Wang152/article/details/88886480

版权

中央气象台卫星云图固定格式：

图片url例子：http://image.nmc.cn/product/2019/03/29/WXCL/medium/SEVP_NSMC_WXCL_FY2G_EWVP_ACHN_LNO_PY_20190329010000000.JPG?v=1553823420861

WXCL/medium/SEVP_NSMC_WXCL_FY2G_EWVP_ACHN_LNO_PY（卫星云图的类型）


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
      #map {
          width: 500px;
          height: 400px;
      }
    </style>
</head>
<body>
   <div id="datetime"></div><br>
   <img id="map"> <br>
   
   <button class="iconLeft" onclick="upImg()"> 上一张</button> 
   <button id="bofang" onclick="bofang()">播放</button>
   <button class="iconRight" onclick="nextImg()">下一张</button><p>
   <script>
    //全局变量
    var i=0;//图片序号
    var t;//setTimeout
    var t2;
    var arr = new Array();  //存放图片的数组
    var isBofang = false;
    var map = document.getElementById('map');  
    var boFang=document.getElementById('bofang'); 
    var datetime = document.getElementById('datetime') //页面当前时间

    //获取整点前18小时以内的卫星云图（FY2G增强图）url
    function timeUrl() {
        var date1 = new Date();
        //获取当前时间的时间戳
        time1 = Date.parse(date1);
        //当前时间减去18个小时
        date1.setHours(date1.getHours() - 18);
        //获取18小时前时间戳
        time2 = Date.parse(date1);
        var ok = 1;
        while(ok) {
            time1 = time1 - 1000 * 60 * 60; //每一小时执行一次
            if(time1 < time2) {
                ok = 0;
            } else {
                date2 = new Date(time1)
                var hour = date2.getUTCHours().toString(); //utc时
                var days = date2.getUTCDate().toString(); //utc天
                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;
                }
                if( hour != 17 &&  hour != 18){  //除去17时和18时的
                    var str = "http://image.nmc.cn/product/" + years + "/" + month + "/" + days + "/WXCL/medium/SEVP_NSMC_WXCL_FY2G_EWVP_ACHN_LNO_PY_" + years + month + days + hour  + "0000000.JPG"
                    arr.push(str)
                }
            }
        }
    }
    
   
    function myTime(){
        timeUrl();
        t2 = setTimeout(myTime,1000*60*10)  //十分钟更新一次timeUrl
    }
    myTime();
    arr.sort()//数组排序
    arr.reverse()//逆序
    console.log(arr)
    //页面加载完成渲染当前时期
    var date=new Date();
    datetime.innerHTML="当前时间：" + date.getFullYear()+"年"+(date.getMonth()+1)+"月"+date.getDate()+"日";

    //页面加载所有的图片到一个对象，以免出现切换图片加载闪屏
    var img={};
    for(i=0;i<arr.length;i++){
        img[i]=arr[i];
    }

    //页面加载完成渲染第一张
    map.src =img[0];  
   
    
    //播放&暂停按钮 
    function bofang(){  
        if(!isBofang){
            start();
            boFang.textContent = "暂停"
            isBofang = true
        }else{
            stop()
            boFang.textContent = "播放"
            isBofang = false
        }
    }

    // 左侧箭头点击事件
    function upImg(){
        i=i+1;
        if(i>3){
            i=0;
        }
        map.src = img[i];
    }

    // 右侧箭头点击事件
    function downImg(){
        i=i-1;  
        if(i<0){
            i=9;
        }
        map.src = img[i];    
    }

    //循环播放
    function start(){
        if(i<=0){
            i=14;
        }else{
            i=i-1;
        }
        map.src = img[i];
        t=setTimeout(start,1000)         
    }

    //暂停播放
    function stop(){
        clearTimeout(t);
    }
    </script>
</body>
</html>

看了博友的分享，不用写爬虫，就可以拿到云图的url，很棒！正好课题项目也能用上

tingting@Wang

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
2
评论
js获取当前卫星云图url并播放

中央气象台卫星云图固定格式：图片url例子：http://image.nmc.cn/product/2019/03/29/WXCL/medium/SEVP_NSMC_WXCL_FY2G_EWVP_ACHN_LNO_PY_20190329010000000.JPG?v=1553823420861WXCL/medium/SEVP_NSMC_WXCL_FY2G_EWVP_ACHN_LNO_...
复制链接

扫一扫