Changes between Version 6 and Version 7 of oid/WorkLog/08-09-22


Ignore:
Timestamp:
Sep 22, 2008, 9:46:15 PM (16 years ago)
Author:
jazz
Comment:

--

Legend:

Unmodified
Added
Removed
Modified

  • oid/WorkLog/08-09-22

    v6 v7  
    4848
    4949    <script src="http://alderaan.arc.nasa.gov/maps/nasamaps.js" type="text/javascript"></script>
    50     // 底下有一些名稱為 NASA_MARS 開頭的常數是定義在 nasamaps.js 中
     50    // 底下有一些名稱為 NASA_MARS 開頭的變數是定義在 nasamaps.js 中
    5151
    5252.. 略 ..
    … …  
    5454    if (GBrowserIsCompatible()) {
    5555      // 產生 GMap2 的 Google Map 底圖物件，並宣告 mapTypes 屬性包括六種 GMapType
     56      // - 參考 http://code.google.com/apis/maps/documentation/reference.html#GMap2
     57      // GMap2(container, opts?) - container 是 DOM 的 DIV 元件, opts 是型態為 GMapOptions 的物件
     58      // - 參考 http://code.google.com/apis/maps/documentation/reference.html#GMapOptions
     59      // GMapOptions 具備 mapTypes 屬性，其型態為 Array of GMapType (GMapType 的陣列)
     60      // 這裡定義的 NASA_MARS 開頭的變數是定義在 nasamaps.js 中
    5661      map = new GMap2( document.getElementById("map"), {mapTypes:[NASA_MARS_VISIBLE_MAP, NASA_MARS_VISIBLE_MAP_NPOLAR, NASA_MARS_VISIBLE_MAP_SPOLAR, NASA_MARS_ELEVATION_MAP, NASA_MARS_ELEVATION_MAP_NPOLAR, NASA_MARS_ELEVATION_MAP_SPOLAR]});
    5762   
    5863      map.addControl(new GLargeMapControl());               // 加入左上角比例尺規控制列
     64      // - 參考 http://code.google.com/apis/maps/documentation/reference.html#GHierarchicalMapTypeControl
     65      // addRelationship(parentType,  childType,  childText?,  isDefault?)
     66      // - parentType 跟 childType 都是 GMapType 物件
    5967      mtc = new GHierarchicalMapTypeControl();              // 產生自訂階層式控制列
    6068      mtc.addRelationship(NASA_MARS_VISIBLE_MAP,NASA_MARS_VISIBLE_MAP_NPOLAR);     // 把 North Polar 加到 Visible 下
    … …  
    7684    }
    7785}}}
    78  * 上面有一段的 DOM 可以用 Firefox 的 DOM Inspector 去看
     86 * 上面有一段的 DOM 可以用 Firefox 的 DOM Inspector 去看，就可以理解在寫什麼了.
    7987[[Image(GoogleMapDOM.jpg)]]
    8088 * 繼續解析 [http://alderaan.arc.nasa.gov/maps/nasamaps.js nasamaps.js]
    … …  
    8593
    8694function TMSBaseLayer( baseurl, levels ) {
     95  // 產生一個 GTileLayer 物件
     96  // - 參考 http://code.google.com/apis/maps/documentation/reference.html#GTileLayer
     97  // GTileLayer(copyrights,  minResolution,  maxResolution,  options?)
     98  // - copyrights = 授權字串, minResolution: 最小比例尺數字, maxResolution: 最大比例尺數字
    8799  var layer = new GTileLayer(null, 0, levels);
     100  // GTileLayer.isPng() 是抽象函數(Abstract), 必須重新定義
     101  // - 原型為 isPng() 回傳 Boolean
    88102  layer.isPng = function() { return false };
     103  // GTileLayer.getTileUrl 是抽象函數(Abstract), 必須重新定義
     104  // - 原型為 getTileUrl(tile,  zoom) 回傳 String, 其中 tile 是 GPoint 物件(內含<x,y>座標), zoom 是比例尺的數字
     105  // 從底下的實作，我們不難發現用 GTileLayer 達成使用自己的背景圖替代 Google Map 預設背景圖的目標
     106  // ToDo: 接下來就是要找出怎麼產生符合 GTileLayer 不同比例尺的背景圖 jpg 檔案
    89107  layer.getTileUrl = function(tile, zoom) {
    90108    var y = Math.pow(2, zoom)-tile.y-1;
    … …  
    92110    return url;
    93111  };
     112  // 回傳 GTileLayer 物件
    94113  return layer;
    95114}
    96115
     116// 產生不同的 GMapType 物件
     117// - 參考 http://code.google.com/apis/maps/documentation/reference.html#GMapType
     118// GMapType(layers,  projection,  name,  opts?)
     119// - layers 型態為 GTileLayer
     120// - projection 型態為 GProjection ,這裡的 GMercatorProjection 是 GProjection 的實作(implementation)
     121// - name 型態為字串(String) 也就是要顯示在畫面上自訂的按鈕名稱
    97122var NASA_MOON_VISIBLE_MAP = new GMapType( [TMSBaseLayer("http://mw1.google.com/mw-planetary/lunar/lunarmaps_v1/clem_bw/",9)],
     123// - 參考 http://code.google.com/apis/maps/documentation/reference.html#GMercatorProjection
     124// GMercatorProjection(zoomlevels): 使用 mercator projection 座標系
     125// - zoomlevels 型態為數字, 代表有幾種比例尺, 像這裡的比例尺是 0-9 總共 10 種
    98126                                          new GMercatorProjection(10), "Visible" );
    99127
    100 var NASA_MOON_VISIBLE_MAP_NPOLAR = new GMapType( [TMSBaseLayer("http://byss.arc.nasa.gov/maps/moon/visible_north/",8)],
    101                                               new PolarStereographicProjection(8,NORTH),
    102                                               "North Polar" );
    103 
    104 var NASA_MOON_VISIBLE_MAP_SPOLAR = new GMapType( [TMSBaseLayer("http://byss.arc.nasa.gov/maps/moon/visible_south/",8)],
    105                                               new PolarStereographicProjection(8,SOUTH),
    106                                               "South Polar" );
    107 
    108 var NASA_MOON_ELEVATION_MAP = new GMapType( [TMSBaseLayer("http://mw1.google.com/mw-planetary/lunar/lunarmaps_v1/terrain/",7)],
    109                                           new GMercatorProjection(10), "Elevation" );
    110 
    111 var NASA_MOON_ELEVATION_MAP_NPOLAR = new GMapType( [TMSBaseLayer("http://byss.arc.nasa.gov/maps/moon/terrain_north/",6)],
    112                                               new PolarStereographicProjection(8,NORTH),
    113                                               "North Polar" );
    114 
    115 var NASA_MOON_ELEVATION_MAP_SPOLAR = new GMapType( [TMSBaseLayer("http://byss.arc.nasa.gov/maps/moon/terrain_south/",6)],
    116                                               new PolarStereographicProjection(8,SOUTH),
    117                                               "South Polar" );
    118 
    119 var NASA_MARS_VISIBLE_MAP = new GMapType( [TMSBaseLayer("http://byss.arc.nasa.gov/maps/mars/visible/",9)],
    120                                           new GMercatorProjection(10), "Visible" );
    121 
    122 var NASA_MARS_VISIBLE_MAP_NPOLAR = new GMapType( [TMSBaseLayer("http://byss.arc.nasa.gov/maps/mars/visible_north/",8)],
    123                                               new PolarStereographicProjection(8,NORTH),
    124                                               "North Polar" );
    125 
    126 var NASA_MARS_VISIBLE_MAP_SPOLAR = new GMapType( [TMSBaseLayer("http://byss.arc.nasa.gov/maps/mars/visible_south/",8)],
    127                                               new PolarStereographicProjection(8,SOUTH),
    128                                               "South Polar" );
    129 
    130 var NASA_MARS_ELEVATION_MAP = new GMapType( [TMSBaseLayer("http://byss.arc.nasa.gov/maps/mars/terrain/",8)],
    131                                           new GMercatorProjection(10), "Elevation" );
    132 
    133 var NASA_MARS_ELEVATION_MAP_NPOLAR = new GMapType( [TMSBaseLayer("http://byss.arc.nasa.gov/maps/mars/terrain_north/",7)],
    134                                               new PolarStereographicProjection(8,NORTH),
    135                                               "North Polar" );
    136 
    137 var NASA_MARS_ELEVATION_MAP_SPOLAR = new GMapType( [TMSBaseLayer("http://byss.arc.nasa.gov/maps/mars/terrain_south/",7)],
    138                                               new PolarStereographicProjection(8,SOUTH),
    139                                               "South Polar" );
    140128}}}