1. Geolocation and HTML5
葉永信 2012

2. outline
● what is geolocation?
● why geolocation?
● how geolocation?
● geolocation application
○ google map
○ html5
● conclusion

3. what is geolocation?
● 地理位置?
○ 成大
○ 成大醫院
○ 成大醫院醫學院
○ 成大醫院醫學院資訊室
○ 圖書館上方3樓

4. what is geolocation?
● 必需要有標準的描述方式
○ 經緯度
● 經緯度就是絕對位置
● 唯一位置?
● 地球是圓的嗎?

5. what is geolocation?
● 其實你由Global Position System所取得的經
緯度
● 取決於你所使用的球體定義模型
● 所以, 台灣用的標準是?
○ TWD67
○ TWD97
● 為什麼要定自己的標準?

6. what is geolocation?
● 地球不是圓的
● 地圖是平的吧
● 那兩地間的距離如何計算?
○ 由成大醫院到本校區距離0度5分3秒?
○ 這樣要怎麼使用呀 XD

7. what is geolocation?
● 球體模型對映到平面地圖
○ 稱為投影
● 投影座標又有數種
○ 橫麥卡托
○ 直麥卡托
○ 其它

8. what is geolocation?
1. 球體模型
2. 投影座標系統
3. 計算距離
4. 那麼常用的導航, 又要如何製作?
a. 向左轉、向右轉
b. 現在速度
c. 還有多久到達
d. 路況

9. why geolocation?
1. 民生應用
a. 導航
b. 美食地圖
c. 綠色地圖
d. 房地產價值
2. 環境調查
a. 淹水點
b. 淹水深
c. 山崩範圍
d. 地震點
3. 軍事應用

10. how geolocation?
● 怎麼收
a. 收訊號，GPS收進來是什麼格式?
b. 硬體，序列阜、藍芽、網路來的?
c. 電腦、手機、平板
● 怎麼存
a. 存資料
b. 點、線、面
c. 影像
d. 點雲

11. how geolocation?
● 怎麼疊
a. 不同的資料來源
b. 不同球體模型
c. 不同投影系統
d. 不同格式
● 如何應用，用在那裡?
a. 最多的應用, 我在那裡?
b. 你在那裡?
c. 怎麼到你那邊?

12. how geolocation?
● 怎麼收?
a. 只有比較好的GPS才能設定球體模型及投影系統
b. GPS由序列阜進來
i. 純文字資料
ii. 天空有幾個衛星
iii. 現在的經緯度(北緯23度3分4秒、東經121度4分6
秒)
c. wifi訊號?
i. goeip?
ii. google 收集的wifi訊號與位置?

13. how geolocation?
● 怎麼存?(數化)
a. 向量
i. 點、線、面
ii. kml、GML、SHP
b. 點陣
i. tif...
c. 格網
i. 等間距xyz檔
ii. 等間距z, 2維或3維矩陣
d. 點雲
i. 不等間距xyz

14. how geolocation?
● 怎麼疊?
a. 轉換成統一座標
● 然後用軟體秀圖
a. ArcGIS
b. QGIS
c. uDIG
d. ...
● 那如果自己寫的呢?
a. dotSpatial
b. mapwingis
c. geotools
d. ...

15. how geolocation?
● 怎麼用? ex:
a. 路線導航
i. 資料結構
ii. 電腦圖學
iii. 最短路徑
iv. 具權重最短路徑
v. 蟻行法、基因法、其它法
b. 植生指數計算NDVI

16. google map
1. how to using google map?
a. javascript & html
b. google API
i. get a google API key first
2. why google map is so fast?
a. LOD(Level Of Detail)
b. 影像金字塔

17. building your own google map
● how to building your own google map?
○ MapServer
○ GeoServer
○ MapGuide Server
○ ...
● Open source implement
○ OSM(OpenStreetMap)
○ ...

18. HTML5 geolocation API
function success(position) {
alert(position.coords.latitude, position.coords.longitude);
}
function error(msg) {
alert(msg);
}
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(success, error);
} else {
error('not supported');
}

19. HTML5 & iPad
● 你將不用存取硬體
● 不需要管你用什麼球體模型
● 不需要轉換座標
● 不需要....
● 就可以輕鬆製作一張跟著你移動的地圖

20. conclusion
● 更新頻率
● 向量圖
● 衛星影像圖
● 成本
● 資料程式約8:2