Dr. Kuang's Utilities

NASA GMAO空品預報服務網頁

 
  • Feb 08, 2023
  • views
>

網頁內容說明

NASA GMAO classic_geos_cf

  • 位置：https://fluid.nccs.nasa.gov/cf/classic_geos_cf/
  • 連動選項(此4項使用同一個action POST)
    • field(污染項目)、
    • fcst(預報起始時間)、
    • tau(前置小時-顯示起始時間)
    • region(預先設定之地區，包括africa/alaska/atlantic/australia/brazil/camer/carib/eafrica/eastasia/europe/global/greenland/hawaii/india/indian/indonesia/midatl/mideast/nasia/natl/npac/nps/ortho/pacific/safrica/sam/sevseas/siberia/sps/usa/wafrica/等31處)
  • 動作選項
    • control_form：animate(1=連續播放或2=下載mp4檔案)
<a href="/cf/classic_geos_cf/?
one_click=1&
tau=024&
stream=GEOSCFFC&
level=0&
region=nam&
fcst=20230205T120000&
field=no2sfc&
animate=1">
NASA GMAO 空品預報圖檔播放器
NASA GMAO 空品預報圖檔播放器(visit classic_geos_cf site)
  • 共啟動8個外部.js
    • slicknav is a responsive mobile menu plugin for jQuery.
    • HAniS - the HTML5 Image AnimationS webapp
<script async="" src="https://www.google-analytics.com/analytics.js"></script>
<script src="/static/js/respond.js"></script>
<script src="/static/js/new_jquery.min.js"></script>
<script src="/static/js/jquery-ui.js"></script>
<script type="text/javascript" src="/static/js/hanis_min.js"> </script>
<script language="javascript" id="_fed_an_ua_tag" src="https://dap.digitalgov.gov/Universal-Federated-Analytics-Min.js?agency=NASA&subagency=GSFC&dclink=true"></script>
<!--  if 'gram' not in request.endpoint %}-->
<script src="/static/js/jquery.slicknav.js"></script>
<!--  else %}
  <script src="/static/js/jquery.slicknav_gram.js"></script>
   endif %}-->
<script src="/wxmaps/static/plots/ops-notice.js"></script>

將選擇結果傳遞到下一網頁

  • 共有3處POST
    1. 左側下拉選單之結果(field、region、fcst、tau等4項)。適用<div id="slicknav_menu">內容

(1) 污染項目

<form action="/cf/classic_geos_cf/" method="POST">

<!-- streams -->
<div class="category-wrapper">
<p>FIELDS</p>
</div>
<div class="category-wrapper"><p>Surface</p>
  <ul>
    <li><a href="/cf/classic_geos_cf/?one_click=1&amp;tau=000&amp;stream=GEOSCFFC&amp;level=0&amp;region=nam&amp;fcst=20230206T120000&amp;field=o3sfc" role="menuitem" tabindex="-1">O3</a></li>
    <li><a href="/cf/classic_geos_cf/?one_click=1&amp;tau=000&amp;stream=GEOSCFFC&amp;level=0&amp;region=nam&amp;fcst=20230206T120000&amp;field=no2sfc" class="active" role="menuitem" tabindex="-1">NO2</a></li>
    <li><a href="/cf/classic_geos_cf/?one_click=1&amp;tau=000&amp;stream=GEOSCFFC&amp;level=0&amp;region=nam&amp;fcst=20230206T120000&amp;field=cosfc" role="menuitem" tabindex="-1">CO</a></li>
    <li><a href="/cf/classic_geos_cf/?one_click=1&amp;tau=000&amp;stream=GEOSCFFC&amp;level=0&amp;region=nam&amp;fcst=20230206T120000&amp;field=so2sfc" role="menuitem" tabindex="-1">SO2</a></li>
    <li><a href="/cf/classic_geos_cf/?one_click=1&amp;tau=000&amp;stream=GEOSCFFC&amp;level=0&amp;region=nam&amp;fcst=20230206T120000&amp;field=pm25sfc" role="menuitem" tabindex="-1">PM2.5</a></li>
  </ul>
</div>

(2) 地區

<div class="category-wrapper">
  <p>REGIONS</p>
    <!-- drop down for many items -->
    <select name="region" onchange="window.location.href=this.value">
      <option value="/cf/classic_geos_cf/?one_click=1&amp;tau=000&amp;stream=GEOSCFFC&amp;level=0&amp;region=africa&amp;fcst=20230206T120000&amp;field=no2sfc">Africa</option>
...
      <option value="/cf/classic_geos_cf/?one_click=1&amp;tau=000&amp;stream=GEOSCFFC&amp;level=0&amp;region=wafrica&amp;fcst=20230206T120000&amp;field=no2sfc">Western Africa</option>
    </select>
</div>

(3) fcst

<!-- fcst initial time -->

<div class="category-wrapper">
  <p>FORECAST INITIAL TIME</p>
  <!-- arrow up -->
  <a href="/cf/classic_geos_cf/?one_click=1&amp;tau=024&amp;stream=GEOSCFFC&amp;level=0&amp;region=nam&amp;fcst=20230205T120000&amp;field=no2sfc" tabindex="-1"><div class="arrow-up"></div></a>
  <!-- arrow left -->
  <a href="/cf/classic_geos_cf/?one_click=1&amp;tau=000&amp;stream=GEOSCFFC&amp;level=0&amp;region=nam&amp;fcst=20230205T120000&amp;field=no2sfc" tabindex="-1"><div class="arrow-left"></div></a>
  <!-- select menu -->
  <select name="fcst" onchange="window.location.href=this.value">
    <option value="/cf/classic_geos_cf/?one_click=1&amp;tau=000&amp;stream=GEOSCFFC&amp;level=0&amp;region=nam&amp;fcst=20190101T120000&amp;field=no2sfc">01Jan2019 12z</option>
...
    <option value="/cf/classic_geos_cf/?one_click=1&amp;tau=000&amp;stream=GEOSCFFC&amp;level=0&amp;region=nam&amp;fcst=20230206T120000&amp;field=no2sfc">06Feb2023 12z</option>
</select>

(4) tou

<!-- lead hour -->            
<div class="category-wrapper">
<p>FORECAST LEAD HOUR</p>
<!-- <div class="arrow-up"></div> -->
<!-- arrow left -->
    <a href="/cf/classic_geos_cf/?one_click=1&amp;tau=000&amp;stream=GEOSCFFC&amp;level=0&amp;region=nam&amp;fcst=20230206T120000&amp;field=no2sfc" tabindex="-1"><div class="arrow-left"></div></a>
<select name="tau" onchange="window.location.href=this.value">
  <option value="/cf/classic_geos_cf/?one_click=1&amp;tau=000&amp;stream=GEOSCFFC&amp;level=0&amp;region=nam&amp;fcst=20230206T120000&amp;field=no2sfc" selected="">000h 06Feb2023 12z</option>
...
  <option value="/cf/classic_geos_cf/?one_click=1&amp;tau=120&amp;stream=GEOSCFFC&amp;level=0&amp;region=nam&amp;fcst=20230206T120000&amp;field=no2sfc">120h 11Feb2023 12z</option>
</select>
  <!-- arrow right -->
      <a href="/cf/classic_geos_cf/?one_click=1&amp;tau=003&amp;stream=GEOSCFFC&amp;level=0&amp;region=nam&amp;fcst=20230206T120000&amp;field=no2sfc" tabindex="-1"><div class="arrow-right"></div></a>
  <!-- <div class="arrow-down"></div> -->
    </div>
  <br>
</form>
  1. <div id="menu-container">內容，與前述一致
  2. 啟動動畫控制。此處的時間、污染項目等變數均已修正為前述選擇結果。
<form action="/cf/classic_geos_cf/" method="POST" name="control_form" class="animate"> 
  <a href="/cf/classic_geos_cf/?one_click=1&amp;tau=000&amp;stream=GEOSCFFC&amp;level=0&amp;region=nam&amp;fcst=20230206T120000&amp;field=no2sfc&amp;animate=1" style="text-decoration:none;">
    <input value=" ANIMATE " type="button"></a>
  <a href="/cf/classic_geos_cf/?one_click=1&amp;tau=000&amp;stream=GEOSCFFC&amp;level=0&amp;region=nam&amp;fcst=20230206T120000&amp;field=no2sfc&amp;animate=2" style="text-decoration:none;">
    <input value=" DOWNLOAD MOVIE " type="button"></a>
</form>

animate 畫面html內容

  • 除了前述主畫面之內容外，在檔頭(<head>)還多了內部js程式，啟動HAniS及slicknav相關模組
    • function setwin()：設定視窗
    • function hloop()：持續播放png檔案群組。檔案群組為主畫面POST之結果。
function setwin() {
  var head = document.getElementById("top-box");
  var nav = document.getElementById("menu-container");
  var foot = document.getElementById("footer");

  var newW = window.innerWidth - (nav.offsetLeft + nav.offsetWidth);
  var newH = window.innerHeight - foot.offsetHeight - head.offsetHeight;

  HAniS.setWindowSize(newW, newH);
}
window.addEventListener("resize", function() {
  setwin();
},false);
$(window).bind('resize', function(e)
{
  if (window.RT) clearTimeout(window.RT);
  window.RT = setTimeout(function()
  {
    this.location.reload(false); /* false to get page from cache */ 
  }, 100);
});
function hloop(){
  HAniS.setup('bottom_controls\=startstop, step, refresh, looprock,speed, capture \n bottom_controls_style\=padding-top:20px;padding-right:5px;padding-bottom:20px;padding-left:5px;
    \n speed_labels\=Slower, Faster 
    \n dwell\=200ms \n pause\=2000 
    \n start_looping\=true 
    \n enable_smoothing=t 
    \n window_size=div 
    \n filenames\=/cf/static//plots/6fa2664a-288c-313a-a6af-67fd160fec32.png, ... /cf/static//plots/967b9e27-eb9a-3331-8b4f-04adea686227.png','handiv');
  setwin;
};
window.onload = hloop;
</script>    
<script type="text/javascript">
    $(document).ready(function(){
      $("#menu").slicknav();
    });
  </script>

NASA GMAO FLUID home

  • 位置：https://fluid.nccs.nasa.gov/cf_map/index
  • 點擊地圖或下拉選單觸發DATAGRAMS CGI選單畫面
  • 由網頁取得資訊做為下一步html之內容
    • forecast_date, forecast_hour
    • cmp(Colormap Options, =[jet(青紅), plasma(黃紫), viridis(黃綠)])
    • national_dd(國家測點)、world_dd(其他國家測點)
    • aero_dd(各洲測點aeronet測點，africa/asia/aus/europe/na/sa_dd)
    • mc_dd:mega_city
    • ac_dd：ACTIVE CAMPAIGNS計畫測點，包括above(ABOVE)/ace(ACEPOL)/mosaic(MOSAIC)/or(ORACLES)/scoape(SCOAPE)/wecan(WE-CAN)

  • leaflet.js + GeoTiff

  • 共啟動11個外部.js
    • esri leaflet API
    • stuartmatthews/leaflet-geotiff, plugin for displaying geoTIFF raster data, geotiff and browserify is generated during build-up process. 
      <script src="/static/js/respond.js"></script>
<script src="/static/js/leaflet.js"></script>
<script src="/static/js/geotiff.browserify.js"></script>
<script src="/static/js/plotty.js"></script>
<script src="/static/js/leaflet-geotiff.js"></script>
<script src="/static/js/leaflet-geotiff-plotty.js"></script>
<script src="/static/js/leaflet-geotiff-vector-arrows.js"></script>
<script src="https://ihcantabria.github.io/Leaflet.CanvasLayer.Field/dist/leaflet.canvaslayer.field.js"></script>
<script src="https://unpkg.com/esri-leaflet@2.5.1/dist/esri-leaflet.js" integrity="sha512-q7X96AASUF0hol5Ih7AeZpRF6smJS55lcvy+GLWzJfZN+31/BQ8cgNx2FGF+IQSA4z2jHwB20vml+drmooqzzQ==" crossorigin=""></script>
<script src="/static/js/new_jquery3.min.js"></script>
<script src="/static/js/jquery.slicknav.js"></script>
  • 內部js程式，啟動esri leaflet相關模組
    • see custom.js
    • 前述測站點選、或地圖上點擊，都會啟動popup、為觸發新網頁之方法
var popupContent = '<form action="/cf_map/gram/" id="popup-form" method="POST">'
  + '<p>Coordinates: <br>Latitude: '+lat+'<br>Longitude: '+lng+'</p>'
  + '<input type="hidden" id="lat" name="lat" value="'+lat+'" />'
  + '<input type="hidden" id="lon" name="lon" value="'+lng+'" />'
  + '<input type="hidden" id="product" name="product" value="no2" />'
  + '<input type="hidden" id="plot_type" name="plot_type" value="surf_plot" />'
  + '<input type="submit" value="Get Forecast Data" onclick="showLoader();">'
  + '</form>'
  + '<form action="/cf_map/hist/" method="POST">'
  + '<input type="hidden" id="lat" name="lat" value="'+lat+'" />'
  + '<input type="hidden" id="lon" name="lon" value="'+lng+'" />'
  + '<input type="hidden" id="product" name="product" value="no2" />'
  + '<input type="hidden" id="num_days" name="num_days" value="30"/>'
  + '<br><input type="submit" value="Get Historical Data" onclick="showLoader();">'
  + '</form>';

NASA GMAO DATAGRAMS

  • 這2個網頁提供測站(或指定地點)之時間序列數據，包括預報(gram)及歷史數據
  • 位置
    • 未來5天預報：https://fluid.nccs.nasa.gov/cf_map/gram/
    • 指定起始日與日數之歷史數據：https://fluid.nccs.nasa.gov/cf_map/hist/
  • 按照使用者指定之項目產生測站逐時空品與氣象時間序列圖檔如下
<img src="/cf_map/static/plots/cf_map_grams/plots/2023-02-06T12:00:00.000000000/cf_surf_plot_pm25_23.0_120.25.png" alt="my_plot" style="width:100%;height:100%">

心得評論

  • 傳統等濃度圖、時序圖等的圖面品質非常高，可以直接用在報告中。
  • leaflet的解析度相對低很多，應用領域似乎只用以尋找測點，
    • 並沒有發展其他的應用、沒有前後時間與播放鍵、沒有發展其它解析度tiff
    • 而測點也可以用下拉選單，似乎也不必從圖上點擊。
Search