使用Google Maps JavaScript API加入TGOS主題地圖

API使用範例:於Google Maps圖台套疊TGOS主題地圖

 

情境假設:

此範例示範如何在Google Maps JavaScript API的開發環境下,介接TGOS提供的主題地圖服務作為搭配的圖層使用。使用者僅需呼叫TGOS提供Google Maps API專用JavaScript程式碼,即可再少量的網頁客製化之後,輕鬆地在Google Maps圖台套疊TGOS主題地圖。使用者如果需要更多的地圖功能,則需依照Google Maps API所提供的內容再進行加值開發。

TGOS MAP主題地圖代理程式建置方式:

1.     引用外部JavaScript

範例中我們引用兩個JavaScript檔案來配合使用,第一個是Google Maps JavaScript API,另一個則是TGOS提供的JavaScript檔,其內部已經針對在Google Maps API的環境下客製化引用TGOS電子地圖的部份進行設定。引用方式如下:

    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp">
    </
script>            <!--
使用Google Map API建立圖台-->

          <script src="/TGOS_MAP_API/Web/Sample_Codes/TGOSMapAPI/QuickExample/TGThemeLayer_Google/TGThemeLayer_GoogleMaps.js"></script>
                                        
<!--
引用TGThemeLayer_ GoogleMaps.js -->

2.     建立圖台的地圖物件

在輸出新的主題地圖之前,須先建立一個可放置主題地圖的圖台,其中包含加入需要之底圖圖層與設定初始顯示中心,程式碼如下:

 

        function initialize() {                                                                           // 建立圖台的地圖物件

         var myLatLng = new google.maps.LatLng(25.036, 121.551); 

         var mapOptions = {                                                                           //地圖設定

             zoom: 17,                                                                                         //設定初始縮放比例

             center: myLatLng,                                                                          //初始顯示中心

             mapTypeId: google.maps.MapTypeId.ROADMAP

         };

         map = new google.maps.Map(

             document.getElementById('TGMap'),

             mapOptions);

3.    使用TGOS金鑰取得主題地圖權限

與其它TGOS MAP API相同,TGOS主題地圖服務需要通過權限驗證方能使用。因此產生TGThemeAgent物件時,需要在其TGKey屬性設定TGOS金鑰(AppIDAPIKey),方能呼叫權限允許之主題地圖圖資。

4.    建立TGOS 主題地圖

最後一個步驟為加入想要呈現之主題地圖服務,因Google Maps之坐標系統在程式中綁定為EPSG3857(Web麥卡托坐標系統),故不用另外設定坐標系統,在建立主題地圖中僅需設定想呈現之服務名稱與圖層代碼,程式碼如下:

agentLayer = new TGOS.TGThemeAgent(                 // 建立主題地圖圖層

          new TGOS.TGKey(appID, apiKey),                          // 申請的 appID  apiKey

 

輸入其相對應之服務名稱與圖層代碼,對照表請參照圖資欄位表,須注意的是在輸入服務圖層代碼時,圖層代碼前須重複輸入服務代碼,若圖層代碼第一碼非英文的話,則其服務圖層代碼有特殊寫法如下:

        TGOS.TGMapServiceId.SCHOOL,                             // 服務名稱代碼

new Array(TGOS.TGMapId.SCHOOL.SCHOOL_B, TGOS.TGMapId.SCHOOL.SCHOOL_C,
         TGOS.TGMapId.SCHOOL.SCHOOL_D, TGOS.TGMapId.SCHOOL.SCHOOL_E,
         TGOS.TGMapId.SCHOOL.SCHOOL_F),
          // 
服務圖層代碼列表(可為一項或多項)

TGOS.TGMapId.FLOOD_P['1DR450']
// 當圖層代碼第一碼非英文之寫法,FLOOD_P為服務名稱代碼,1DR450為服務圖層代碼

opts);                                                                                // 其他的地圖設定

 

回到上方