看天氣的好助手，即時衛星雲圖 (動畫 + 可自由輸入時間版)

change log 2007.08.24：初使版本。 2007.10.02：修正在blogger無法顯示的問題。 2008.10.15：因中央氣象局修改雲圖網址，故修正部份程式碼 2009.07.14：修改程式碼，以截取中央氣象局的新版雲圖資訊

之前海芋曾經說過，在硬是要學中看到好手大大實做衛星雲圖，而海芋今天沿著此構想，將程式碼重寫，並且加入了中國大陸及香港的衛星雲圖。

而此次，並不再動畫版和非動畫版，但海芋仍然有替大家分開準備，但分開準備的版本不能並存，這點請千萬要注意！

至於此次的程式，使用者可以自由輸入要觀測的時間，如3小時等等，再按〔更改〕鈕即可更改，但因台灣連中國大陸的頻寬較慢，所以如果點選中國大陸的衛星雲圖，可能要有心理準備喔！

而預設的長度和寬度一樣是250*250，一樣是從width和height改數字，至於顯示時間，也是預設以12小時的雲圖，若您要更改數值，請自行更改。

說了這麼多，趕緊給大家程式碼吧，首先先給大家的，是可自由輸入顯示時間及選擇地區的程式碼！

<script src="http://kaiuisme0120.googlepages.com/weather_global.js"></script>
<a href="http://inote.tw/"><img onload="getSatelliteURL(12,0)" src="http://bp3.blogger.com/_FK45VGwW6no/RsrmkpmdFqI/AAAAAAAADec/oKBD-l1YOy0/s400/%E6%9C%AA%E5%91%BD%E5%90%8D.GIF" style="display:none"/></a><a target="_blank" id="satellite" href="http://www.cwb.gov.tw/V5/observe/satellite/sat.htm#top"><img width="250px" height="250px" name="picSatellite" /></a>
<form>
<input type="radio" name="satelliteChoice" value="0" checked onclick="StopSatellite(this.form.changeTime.value,this.value)">台灣
<input type="radio" name="satelliteChoice" value="1" onclick="StopSatellite(this.form.changeTime.value,this.value)">中國
<input type="radio" name="satelliteChoice" value="2" onclick="StopSatellite(this.form.changeTime.value,this.value)" >香港
<input type="radio" name="satelliteChoice" value="3" onclick="StopSatellite(this.form.changeTime.value,this.value)" >東亞
<input type="radio" name="satelliteChoice" value="4" onclick="StopSatellite(this.form.changeTime.value,this.value)" >全球
<div>
連續顯示<input type="text" size="2" name ="changeTime" value="12">小時的雲圖
<input type="button" value="更改 " onclick="StopSatellite(this.form.changeTime.value,'satelliteChoice')"></div>
</form>
<div align="right">Power by <a target="_blank" href="http://www.inote.tw/2007/08/blog-post_24.html">海芋小站</a></div>

因為這是放在海芋的GooglePages，因為有流量限制，所以可以的話，請幫忙分流喔，不然可能常常會看到叉燒包，冏！
若要更改圖片的寬度，請更改width值，若要更改圖片的長度，則請更改height值。預設為250*250。
JS檔下載網址：http://kaiuisme0120.googlepages.com/weather_global.js

或者將以下的內容，存為JavaScript檔案，記得存成UTF-8編碼，再放到自己的網路空間。

//Author Site:http://www.inote.tw/
//Author:海芋
var satelliteArrayCount = 0;
var showSatelliteImglength;
var satellite = new Array();
var satelliteCache = new Array(200);
var satelliteCacheNumber = 0;
var satelliteId;

function getSatelliteURL(picNumber, map)
{
if(date) delete date;
var date = new Date();
var dYear = date.getFullYear();
var dMonth = date.getMonth();
var dDay = date.getDate();
var dHour = date.getHours();
var dMin = date.getMinutes();
var picURL;
var PostfixURL = ".jpg";
var delayTime = 30;

if (satelliteCacheNumber > 200)
 satelliteCacheNumber = 0;

if(map == 1)
{
 picURL = "http://www.cma.gov.cn/tqyb/images/forecast/products/yuntu/l/sevp_nsmc_wxcl_asc_fff_achn_ffff_py_";
 PostfixURL = "fffff.jpg";
 document.getElementById("satellite").href="http://www.cma.gov.cn/tqyb/nephogram.html";
}
else if(map == 2)
{
 picURL = "http://www.hko.gov.hk/wxinfo/intersat/mtsat_400/";
 PostfixURL = "30mtsat_7_36Ne.png";
 document.getElementById("satellite").href="http://www.hko.gov.hk/wxinfo/intersat/satpicc_s.shtml";
}
else
 document.getElementById("satellite").href="http://www.cwb.gov.tw/V6/observe/satellite/sat.htm#top";

if (map != 1)
{
 date.setMinutes(date.getMinutes()- delayTime);
 delayTime = 60;
}
else
{
 date.setMinutes(date.getMinutes()- 480);
 delayTime = 30;
 date.setMinutes(date.getMinutes()- delayTime);
}

for(var i=0;i<picNumber;i++)
{
 if (map == 1)
 {
  for (var j=0;j<2;j++)
  {
   picURL = "http://www.cma.gov.cn/tqyb/images/forecast/products/yuntu/l/sevp_nsmc_wxcl_asc_fff_achn_ffff_py_";
   dYear = date.getFullYear();
   dMonth = date.getMonth();
   dHour = date.getHours();
   dMin= date.getMinutes();
   dDay = date.getDate();
  
   if(dMin >= 30) dMin = "30";
   else dMin = "00";
  
   if (++dMonth < 10) dMonth = '0' + dMonth;
   if (dHour < 10) dHour = '0' + dHour;
   if (dDay < 10) dDay = '0' + dDay;
   picURL = picURL + dYear+ dMonth+ dDay+ dHour+ dMin + PostfixURL;
  
   satelliteCache[satelliteCacheNumber]= new Image();
   satelliteCache[satelliteCacheNumber++].src = picURL;
   satellite.push(picURL);
   date.setMinutes(date.getMinutes()- delayTime);
  }
 }
 else
 {
  dYear = date.getFullYear();
  dMonth = date.getMonth();
  dHour = date.getHours();
  dDay = date.getDate();
 
  if (++dMonth < 10) dMonth = '0' + dMonth;
  if (dHour < 10) dHour = '0' + dHour;
  if (dDay < 10) dDay = '0' + dDay;
 
  if (map == 2){
   picURL = "http://www.hko.gov.hk/wxinfo/intersat/mtsat_400/";
   dMin="01";
   picURL += "" + dYear + dMonth + dDay + dHour + dMin + "+";
   date.setMinutes(date.getMinutes()- 540);

   dHour = date.getHours();
   dDay = date.getDate();
  
   if (dHour < 10) dHour = '0' + dHour;
   if (dDay < 10) dDay = '0' + dDay;

   picURL += "" + dDay + dHour + PostfixURL;

   date.setMinutes(date.getMinutes()+ 540);
  }
  else
  {
   picURL = "http://www.cwb.gov.tw/V6/observe/satellite/Data/";
  
   if(map == 0) picURL += "s3p/s3p-";
   else if(map == 3) picURL += "s1p/s1p-";
   else picURL += "s0p/s0p-";

   picURL += "" + dYear + "-" + dMonth + "-" + dDay + "-" + dHour + "-00"+PostfixURL;
  }
  satelliteCache[satelliteCacheNumber] = new Image();
  satelliteCache[satelliteCacheNumber++].src = picURL;
  satellite.push(picURL);

  date.setMinutes(date.getMinutes()- delayTime);
 }
}

if (picNumber == 1)
 document.images.picSatellite.src = satellite.pop();
else
{
 satelliteArrayCount = 0;
 satelliteId = setTimeout("showSatelliteImg()",1000);
}
}
function showSatelliteImg()
{
showSatelliteImglength = satellite.length-1;
satelliteArrayCount--;
if (!(satelliteArrayCount+1))
 satelliteArrayCount = showSatelliteImglength;
document.images.picSatellite.src=satellite[satelliteArrayCount];
satelliteId = setTimeout("showSatelliteImg()",1000);
}

function StopSatellite(picNumber,map)
{
var satelliteChoice;
for (var i = 0; i <satelliteCacheNumber; i++)
{
 if(satelliteCache[satelliteCacheNumber])
 delete satelliteCache[satelliteCacheNumber];
}
while (satellite.pop());

if (isNaN(map))
{
 satelliteChoice = document.getElementsByName(map);
 for(var i=0;i<satelliteChoice.length;i++)
 {
  if(satelliteChoice[i].checked)
   map = satelliteChoice[i].value;
 }
}

if(satelliteId)
 clearTimeout(satelliteId);

if(isNaN(picNumber))
 picNumber = 12;
else
{
 if (picNumber > 48) picNumber = 48;
 else if(picNumber <=0) picNumber = 12;
}
getSatelliteURL(picNumber,map);
}

然後，再將<script src="http://kaiuisme0120.googlepages.com/weather_global.js"></script>，改為<script src="您的網路空間檔案路徑"></script>即可。

相關實驗連結：

• 看天氣的好助手，即時雷達回波圖 (動態版)
• 看最新雨量統計圖，就在自己網誌中！ (動畫 + 可自由輸入時間版)

(非經同意請勿全文轉貼，僅歡迎「部份引用」，引用時請註明「網站名稱」及「文章網址」)
本文網址:

搜尋本站其它文章: