1 / 24

Dice War Advance

Dice War Advance. USING Google earth Api with KML Team16 B00902045 林俊豪 B00902077 張原榜 B00902093 賴建霖 B00902037 吳雨澄. 工作分配. 林俊豪 – 遊戲 流程 賴建霖 – AI 設計 、拔兔毛 吳雨澄 – 網頁美工 、拔兔毛 張原榜 – Earth API 、 KML 、拔兔毛. 、兔子. 遊戲介面. 遊戲介面. Google Earth API.

jenaya
Télécharger la présentation

Dice War Advance

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  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 

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

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

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

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

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

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

  15. KML file 開頭

  16. KML file 結尾

  17. KML file - camera

  18. KML file - placemark

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

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

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

  22. 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

  23. Q&A

More Related