用向量圖磚(vector tiles) 自製陽春離線地圖 - 玩具烏托邦

後來發現 mapzen vector tile service 提供各種向量圖磚， 完全符合我的需要。

把一二十塊圖磚抓回來之後， 就可以用d3.js 自製陽春地圖了! skiptomain| skiptosidebar 2015年9月7日星期一 用向量圖磚(vectortiles)自製陽春離線地圖 受到 臺中公車達人的刺激， 我一直想要寫一個離線版的臺中公車地圖。

最好可以放在手機上。

我只需要大致的街道圖跟街道名稱， 不需要縮放(zoom)很多等級，所以並不需要完整龐大 [而且超出我的人腦跟電腦能力範圍]的OSM的圖資。

後來發現 mapzenvectortileservice提供各種向量圖磚，完全符合我的需要。

把一二十塊圖磚抓回來之後，就可以用d3.js自製陽春地圖了! (這篇並不需要寫程式也可以操作一下感受成果； 但最終還是對程式設計師比較有用。

) 先下載一塊向量圖磚來玩玩看： wgethttp://vector.mapzen.com/osm/roads/14/13684/7059.json 然後用jq.7059.json|less會看到「臺灣大道一段」 等等街道名稱。

把它上傳到 umap或mapbbcode會發現這一塊圖磚包含了臺中火車站， 切得整整齊齊的，好漂亮啊!如何計算網址的那些數字? 14是縮放層級(zoom)(0:全球；20:最細微)； 從臺中火車站的經度可以算出13684；從緯度可以算出7059。

詳見 這一頁，裡面有很多不同語言現成的程式碼。

所以你可以到geofabrik 找到你有興趣的地點、把網址的經緯度代入， 就可以得知你要的圖磚網址。

通常應該會需要很多塊圖磚。

所以我寫了一個小程式 slippy-tiles.py讓你一口氣抓很多圖磚： slippy-tiles.py-s20-z14-d/home/ckhung/tiles/ -u'http://vector.mapzen.com/osm/roads/{}.json' 120.63124.128120.73724.165 -s20：每抓一塊圖磚，就(讓伺服器)休息20秒。

答應我，當你下載很多圖磚的時候，請一定要讓伺服器休息； 請不要破壞公共資源。

-z14：縮放層級 -d/home/ckhung/tiles/：下載回來的圖磚都放這個目錄底下。

-u'http://vector.mapzen.com/osm/roads/{}.json'： 圖磚伺服器的網址。

如果省略這個參數， 預設就是從mapzen以geojson格式下載街道圖層(roads)。

120.63124.128120.73724.165： 你有興趣的地圖範圍的對角兩頂點的經緯度。

(先經度後緯度；兩點順序任意。

) 這幾個數值一樣可以從geofabrik讀出來。

(移動滑鼠的時候，注意右下角。

) 呵呵，騙你的啦。

上面的指令不會真的下載， 只會印出下載的指令。

請改用你自己的座標、 確認這個zoomlevel包含你要的資料、印出來的指令正確。

用力檢查無誤之後，即可真的執行： slippy-tiles.py...|bash。

再來把所有的圖磚串成一個檔：jq-s '{"type":"FeatureCollection","features":map(.features[])}' $(find/home/ckhung/tiles/-iname'*.json')>roads.json。

這個恐怕太大，無法上傳到umap。

然後請下載 我的cordova-examples。

本篇只需要其中的offline-map這個子目錄。

裡面的原始碼只有三個檔案，總共不到100列； 另外還有兩個很大的「向量圖檔」： roads.json跟landuse.json，就是用上述步驟產生的。

當你改用不同的圖層時，程式碼main.js應該很容易小修改； 要改顏色請到map.css。

除了geojson之外，mapzen還提供.topojson/.mvt/.vtm 等等格式的向量圖磚。

至於圖層，除了街道及土地使用狀況之外， 還有水文、建築物、PoI等等選擇。

也可以用"all"選取所有圖層。

d3.js超強大。

看起來有點難學；不過學會了之後， 寫出來的程式超簡潔。

其實它有一個d3.geo.tile.js外掛， 讓地圖程式撰寫的門檻大幅降低。

像是 「Chrome禁讀令」那篇的第二個例子tc-streets.tgz 就是從d3.js原作者 MikeBostock的範例改來的。

我也還看不太懂，就胡亂把遠端的tileserver網址改成本地目錄， 竟然這樣就成功了!不過現在這篇並不需要很多zoomlevel的圖磚， 而且目前我也還不太會用d3，所以沒用到d3.geo.tile.js， 而是直接把地圖當成一個普通的svg圖來縮放比較簡單。

臺灣的 oxxo大大有一系列的d3.js教學文， 有空時要來K一下啊... 用cordova編譯、放到手機上後，縮放超不順， 有一種麥芽糖拉不開的感覺...。

手機版目前也沒有顯示街道或土地名稱的功能。

geojson檔太大，應該改用topojson比較好。

這些缺點以後若有改進我再回這裡補充說明。

張貼於 下午4:59 以電子郵件傳送這篇文章BlogThis！分享至Twitter分享至Facebook分享到Pinterest 標籤： 程式設計, 網站介紹, 講義/教學文, javascript, jq, OpenStreetMap 2則留言: treegb2016年6月5日下午1:23openstreetmap好像可以下載地圖但我不太清楚.回覆刪除回覆ckhung2016年6月7日上午10:01嗯，可以下載，而且國網中心有映射：https://lists.openstreetmap.org/pipermail/talk-tw/2016-May/001289.html不過沒研究過怎麼用。

也許找一個現成的docker來用比較快。

刪除回覆回覆回覆新增留言載入更多… 因為垃圾留言太多，現在改為審核後才發佈，請耐心等候一兩天。

較新的文章 較舊的文章 首頁 訂閱： 張貼留言(Atom) 訂閱 發表文章 Atom 發表文章 留言 Atom 留言 近期文章 載入中… 所有文章 所有文章 十月(1) 九月(8) 八月(3) 七月(1) 六月(2) 五月(5) 四月(2) 二月(4) 十一月(3) 十月(4) 九月(6) 八月(2) 七月(2) 六月(2) 五月(4) 四月(4) 三月(2) 二月(3) 一月(2) 十二月(1) 十月(2) 九月(2) 八月(4) 七月(2) 六月(2) 五月(1) 四月(2) 三月(1) 二月(3) 一月(3) 十二月(1) 十一月(4) 十月(3) 九月(6) 八月(5) 七月(6) 五月(3) 四月(2) 三月(2) 二月(2) 一月(2) 十二月(6) 十一月(5) 十月(2) 九月(9) 八月(7) 七月(4) 六月(1) 五月(5) 四月(6) 三月(3) 二月(6) 一月(4) 十二月(2) 十一月(2) 十月(1) 八月(9) 六月(3) 五月(2) 四月(2) 三月(4) 二月(2) 一月(1) 十二月(2) 十一月(4) 十月(1) 九月(6) 八月(5) 七月(7) 六月(2) 五月(4) 四月(3) 三月(8) 二月(8) 一月(6) 十二月(1) 十一月(2) 九月(6) 八月(5) 六月(2) 五月(2) 三月(1) 二月(2) 一月(1) 十二月(1) 十一月(1) 十月(2) 九月(4) 八月(1) 五月(4) 四月(2) 三月(2) 二月(2) 一月(1) 十二月(1) 十一月(1) 九月(6) 八月(4) 七月(2) 六月(3) 五月(1) 四月(1) 三月(3) 二月(1) 一月(1) 十一月(1) 十月(1) 九月(1) 八月(1) 七月(2) 六月(2) 五月(2) 四月(3) 三月(1) 二月(3) 一月(1) 十二月(3) 十一月(4) 十月(5) 九月(6) 八月(3) 六月(3) 五月(7) 四月(5) 三月(4) 二月(2) 一月(4) 十二月(4) 十一月(8) 十月(5) 九月(7) 八月(3) 七月(4) 六月(6) 五月(10) 留言 載入中… 固定讀者 資訊人權貴ㄓ疑 載入中… 英文閱讀噗摘要 Plurk.com 標籤 3d (3) 工作事項 (14) 工商服務時間 (6) 中文問題 (13) 文字編輯器 (6) 比賽 (3) 幼教 (3) 打工 (8) 地理資訊 (10) 好笑 (1) 羽量級linux (12) 自由文化 (6) 行銷 (8) 求助 (2) 命令結果代換 (8) 服務 (2) 注意力經濟 (11) 物理 (1) 長尾 (1) 非自由軟體 (3) 活動 (11) 炫耀文 (3) 相片整理 (13) 美工繪圖 (23) 音樂 (4) 旅遊 (8) 站務公告 (1) 健康 (2) 密碼學 (2) 推廣策略 (5) 教育 (6) 理財 (6) 視窗環境 (14) 終端機 (3) 軟體介紹 (37) 麻瓜教學文 (46) 智慧財產權 (1) 硬體 (6) 程式設計 (52) 雲端 (28) 搜尋技巧 (7) 新聞 (2) 會議 (9) 補助 (2) 試算表 (14) 資料視覺化 (6) 資訊安全 (26) 遊戲 (1) 電腦之外的工具 (2) 電腦教室 (6) 實驗室 (1) 網頁爬蟲 (9) 網頁設計 (11) 網站介紹 (15) 網路工具 (29) 網路控管 (5) 網路設定 (9) 影片 (11) 徵才 (5) 徵文 (5) 徵圖 (2) 數位落差 (1) 數學 (9) 標準 (2) 窮人樂活小工具 (30) 練英文 (10) 趣聞 (2) 隨身碟開機 (37) 檔案系統 (14) 聲音 (11) 講義/教學文 (266) 隱私 (23) 瀏覽器 (14) 簡報 (3) AI/機器學習 (27) android (43) aws (1) container (16) cordova (5) drgeo (2) drupal (5) javascript (19) jq (9) livecd (6) moodle (1) OpenStreetMap (13) QueryPath (6) regexp (14) SimplyMepis (11) slax (5) VM虛擬機 (24) VoIP (4) wiki (6) linux好站 鳥哥的私房菜 朝陽資工王德譽老師 關於格主 朝陽資管洪朝貴 最近30天流量 License Thisworkby Chao-KueiHungis licensedunderaCreative CommonsAttribution-ShareAlike2.5TaiwanLicense. 智慧,不是財產。

智慧,是廣告看板。

您願意轉貼或大量節錄, 是我的榮幸。