Tilemill + tilestream + mapbox.js 自制地圖

感謝Mapbox，帶來了一整套完整的地圖方案。

你可以把你的地圖放在Mapbox的網站上。也可以使用他們提供的開源軟體自己架設地圖服務。

Mapbox的地圖方案包括web，ios和android。 不過android目前屬于不成熟階段。但是相信很快就會成熟起來。

一個比較舒服的地圖自制流程如下：

Qgis 處理各種GIS資料，導出為shp或GeoJson等格式 ==> TileMill 生成 .mbtile ==> tilestream 線上地圖服務 或 直接由Android/IOS SDK 渲染地圖。

QGIS的使用推薦教程：http://www.qgistutorials.com/en/

TileMill教程：https://www.mapbox.com/tilemill/docs/crashcourse/introduction/

TileStream的資料稍微少些，這裡重點講下。

首先，假設你在TileMill教程中導出的地圖檔案為abc.mbtile

存放在/Users/fangjian/Documents/MapBox/export

假設你已經安裝了nodejs ，然後安裝tilestream. 

sudo npm install -g tilestream

裝好以後啟動服務

tilestream --tiles=/Users/fangjian/Documents/MapBox/export

更多設定參見: http://linuxdev.dk/articles/tilestream-openlayers-and-drupal-7

這個時候通路：http://localhost:8888

已經可以看到地圖了。點地圖圖示進入到地圖頁面後，點“i"圖示可以看到這個地圖服務的網址。如：http://localhost:8888/v2/abc/{z}/{x}/{y}.png

下面把這個範例拿來用：https://www.mapbox.com/mapbox.js/example/v1.0.0/external-layers/

儲存為mapbox.html

其中的網址部分改成：var stamenLayer = L.tileLayer('http://localhost:8888/v2/abc/{z}/{x}/{y}.png'

打開mapbox.html，就可以看到地圖了。

如果使用mapbox.js

對應的tilejson為 http://localhost:8888/v2/abc.json

如果想解包為純靜态的圖檔，用mbutil https://github.com/mapbox/mbutil

sudo easy_install mbutil

mb-util abc.mbtiles abc

abc/metadata.json為tilejson檔案

abc/z/x/y.png是瓦片檔案

abc/z/x/y.grid.json是UTFGRID檔案

進一步了解詳見 http://blog.thematicmapping.org/2012/11/exploring-mapbox-stack-mbtiles-tilejson.html