dice war advance
DESCRIPTION
Dice War Advance. USING Google earth Api with KML Team16 B00902045 林俊豪 B00902077 張原榜 B00902093 賴建霖 B00902037 吳雨澄. 工作分配. 林俊豪 – 遊戲 流程 賴建霖 – AI 設計 、拔兔毛 吳雨澄 – 網頁美工 、拔兔毛 張原榜 – Earth API 、 KML 、拔兔毛. 、兔子. 遊戲介面. 遊戲介面. Google Earth API. - PowerPoint PPT PresentationTRANSCRIPT
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