USING GOOGLE EARTH API WITH KMLTEAM16

B00902045 林俊豪B00902077 張原榜B00902093 賴建霖B00902037 吳雨澄

Dice War Advance

工作分配

林俊豪 – 遊戲流程賴建霖 – AI 設計、拔兔毛吳雨澄 – 網頁美工、拔兔毛張原榜 – Earth API 、 KML 、拔兔毛

、兔子

遊戲介面

遊戲介面

Google Earth API

Google Earth API 是 Google 提供一系列操作Google Earth Plug-in 的 JavaScript Function

使用前必須先安裝 Google Earth Plug-inwww.google.com/earth/explore/products/

plugin.html之後在網頁引入 Google Earth API 就可以使用

Google Earth

如何插入 Google Earth

首先在 <script> 引入http://www.google.com/jsapi

設立一個 <div> 並且設定 id呼叫 google.earth.createInstance(divId,

initCB, failureCB) ，呼叫成功網頁出現 Google earth 模組

Ps.Earth api 目前不需要 api key

如何插入 Google Earth( 續 )

依照建立成功與否會呼叫 initCB 或者 failureCB ，兩個函數都會傳入一個參數。該參數裡面包含了所有操作 earth 的函數。

Earth 物件介紹 – Camera 、 Lookat

Earth 提供了兩種設定視角的方式 Camera 、 Lookat

Camera – 設定攝影機位置Latitude Longitude Altitude AltitudeMode Heading  Tilt  Roll 

Lookat – 設定注視位置Latitude Longitude Altitude AltitudeMode Heading Ttilt Range 

Earth 物件介紹 – Placemark

Placemark 用來設定各種地理資訊，可以加到earth instance 讓 earth 顯現各種地理標示。

地理資訊可以分為三類 Point LineString Polygon

一個 Placemark 只能儲存一個地理資訊，如果想要讓多個地理資訊屬於同一個 Placemark ，必須使用MultiGeometry 將所有資訊包起來。

Earth 物件介紹 – Style

使用 Style 可以為地理資訊設定顏色、圖案placemark.setStyleSelector(earth.createStyle())之後使用

placemark.getStyleSelector().getXStyle() 可以取得各種 Style()

StyleSelector 底下總共有四種 Style LebelStyle – 設定文字大小、顏色 IconStyle – 設定 Point 的大小、圖案、顏色 LineStyle – 設定 LineString(Polygon 邊線 ) 的寬度、顏色 PolyStyle – 設定 Polygon 內部的顏色

=> 顏色有自己的 object(color)

ps.api 色碼和 html 色碼順序不一樣…(agbr)

Earth 物件介紹 – Event

Earth Plugin 、 Placemark 可以加入各式各樣的Event ，例如：

click 、 mouseover 、 viewchangeendgoogle.earth.addEventListener(listenedObjec

t, event , execute function);google.earth.removeEventListener(listenedO

bject, event , execute function);function name(event)

{event.preventDefault()}

それて

當我們想要放一個點在 earth plugin 上我們要：Earth.createPlacemark 、 Earth.createPointPoint.setLatitude 、 Point.setLongitude …Placemark.setGeometry(Point)Earth.getFeatures().appendChild(Placemark)

要放入 100 個點要重複做 100 次當要放 LineString 、 PolyGon 以上步驟會變得更

複雜，如果使用函式、迴圈需要一堆變數儲存這些值有兩個方法1. 使用資料庫儲存2. 將資訊寫入 Kml ，再由 earth plug-in 讀取

KML

全名為 Keyhole Markup Language基於 XML 標準開發，用於顯示地理數據跟 XML 語法相同處

只能一個 root tag Tag 必須要跟著 Closing tag Case-Sensitive

KML file 開頭

KML file 結尾

KML file - camera

KML file - placemark

KML - Earth API fetch KML

google.earth.fetchKml( earth instance , url, function(kmlObject){});

之後再earth.getFeatures().appendChild(kmlObject)

如果只想要取得 Kml 的其中一個標籤的內容可以用kmlObject.getElementByUrl(url+”#”+tagId)

遇到的問題

Fetch 同一個 Kml file 會得不到 KmlObjectgetElementByUrl 似乎無法用在 camera lookat

上getElementByUrl 無法在 function 外使用

デモ

http://w.csie.org/~b00902045/web/diceWarAdvance.htm

Reference

Google Earth API guidedevelopers.google.com/earth/documentation/index

Google Earth API referencedevelopers.google.com/earth/documentation/reference/

Google Kml reference

developers.google.com/kml/documentation/kmlreference

Wiki – KML zh.wikipedia.org/wiki/KML

Q&A