2013年6月28日 星期五

如何在網頁上放 OpenStreetMap 及 GPX 軌跡

本文分享兩個主題
  • 如何放單純的地圖(可互動操作)
  • 如何在網頁上放地圖並顯示 GPX 軌跡在地圖上

如何放單純的地圖(可互動操作)

  1. 連到 http://www.openstreetmap.org/
  2. 點選畫面最上面的 "Export" 功能
  3. 用滑鼠拖拉地圖區域
  4. 選擇格式
    • OpenStreetMap XML Data, 這是 XML 資料檔
    • Map Image (shows standard layer), 這是下載成圖片, 有 png,jpg,svg,pdf 格式
    • Embeddable HTML, 網頁的 HTML 語法 --- 選這個,系統就會給你一段 <iframe 開頭的 html 碼
譬如這段 HTML
<iframe frameborder="0" height="350" marginheight="0" marginwidth="0" scrolling="no" src="http://www.openstreetmap.org/export/embed.html?bbox=118.05,20.8,124.63,26.26&layer=mapnik&marker=23.97120,121.21765" style="border: 1px solid black;" width="425"></iframe><br /> <small><a href="http://www.openstreetmap.org/?lat=23.53&lon=121.34&zoom=7&layers=M&mlat=23.97120&mlon=121.21765">View Larger Map</a></small>
會產生這樣的地圖:

View Larger Map

如何在網頁上放地圖並顯示 GPX 軌跡在地圖上

這比較複雜一點,我的方法是用 leaflet 這個 library 來畫地圖。 leaflet 可以加 plugin,配合 leaflet-gpx,就能畫 GPX 軌跡。
我參考作者的 demo,簡化之後:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script src="http://kcwu.csie.org/~kcwu/geo/leaflet.js"></script>

<script src="http://kcwu.csie.org/~kcwu/geo/leaflet-gpx/gpx.js"></script>
<script src="http://kcwu.csie.org/~kcwu/geo/osm-gpx.js"></script>

<style type="text/css"> @import url('http://kcwu.csie.org/~kcwu/geo/osm-gpx.css');</style>
<section id='gpx_container' class=gpx ></section>
<script type="application/javascript">
    simple_gpx($('#gpx_container'),
            "http://kcwu.csie.org/~kcwu/geo/gpx/20130518 鷹仔尖.gpx",
            { title: '20130518 鷹仔尖.gpx', height: 400 });
</script>


上面這段 HTML code 可以做出下面這樣的地圖

使用說明:

  • 一般使用只要改 simple_gpx 那三行就夠了,剩下不用動。
  • 用到的檔案只有 osm-gpx.js 是我寫的,於 public domain 釋出。其他檔案是各 project 自己的(BSD或MIT授權),可自由使用。
  • 若同一頁會用多次,gpx_container 要改成其他名字(不能跟其他的重複,不然會錯亂)。前兩行(jquery.min.js 跟 leaflet.js)總共只要寫一次就好。