Dice War Advance: Integrating Google Earth API with KML for Enhanced Gameplay

1. Dice War Advance USING Google earth Apiwith KML Team16 B00902045林俊豪 B00902077張原榜 B00902093賴建霖 B00902037吳雨澄

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

3. 遊戲介面

4. 遊戲介面

5. Google Earth API Google Earth API是Google提供一系列操作Google Earth Plug-in的JavaScriptFunction 使用前必須先安裝Google EarthPlug-in www.google.com/earth/explore/products/plugin.html 之後在網頁引入GoogleEarth API就可以使用Google Earth

6. 如何插入Google Earth 首先在<script>引入http://www.google.com/jsapi 設立一個<div>並且設定id 呼叫google.earth.createInstance(divId, initCB, failureCB)，呼叫成功網頁出現Google earth 模組 Ps.Earthapi目前不需要api key

7. 如何插入Google Earth(續) • 依照建立成功與否會呼叫initCB或者failureCB，兩個函數都會傳入一個參數。該參數裡面包含了所有操作earth的函數。

8. Earth 物件介紹 –Camera 、Lookat • Earth提供了兩種設定視角的方式 Camera 、Lookat • Camera– 設定攝影機位置Latitude Longitude Altitude AltitudeModeHeading  Tilt  Roll  • Lookat – 設定注視位置Latitude Longitude Altitude AltitudeMode Heading Ttilt Range 

10. Earth 物件介紹 –Placemark • Placemark用來設定各種地理資訊，可以加到earth instance讓earth顯現各種地理標示。 • 地理資訊可以分為三類 • Point • LineString • Polygon • 一個Placemark只能儲存一個地理資訊，如果想要讓多個地理資訊屬於同一個Placemark，必須使用MultiGeometry將所有資訊包起來。

11. 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)

12. Earth 物件介紹 –Event Earth Plugin、Placemark可以加入各式各樣的Event，例如： click 、mouseover、viewchangeend google.earth.addEventListener(listenedObject, event , execute function); google.earth.removeEventListener(listenedObject, event , execute function); function name(event){event.preventDefault()}

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

14. 要放入100個點要重複做100次 當要放LineString、PolyGon 以上步驟會變得更複雜，如果使用函式、迴圈需要一堆變數儲存這些值 有兩個方法 1.使用資料庫儲存 2.將資訊寫入Kml，再由earth plug-in讀取

15. KML • 全名為Keyhole Markup Language • 基於XML標準開發，用於顯示地理數據 • 跟XML語法相同處 • 只能一個root tag • Tag必須要跟著Closing tag • Case-Sensitive

16. KML file 開頭

17. KML file 結尾

18. KML file - camera

19. KML file - placemark

20. KML - Earth API fetch KML google.earth.fetchKml( earth instance , url, function(kmlObject){}); 之後再earth.getFeatures().appendChild(kmlObject) 如果只想要取得Kml的其中一個標籤的內容可以用 kmlObject.getElementByUrl(url+”#”+tagId)

21. 遇到的問題 Fetch同一個Kmlfile會得不到KmlObject getElementByUrl似乎無法用在cameralookat上 getElementByUrl無法在function外使用

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

23. Reference Google Earth API guide developers.google.com/earth/documentation/index Google Earth API reference developers.google.com/earth/documentation/reference/ Google Kml reference developers.google.com/kml/documentation/kmlreference Wiki – KML zh.wikipedia.org/wiki/KML

24. Q&A