使用tippecanoe把GeoJSON製做成供mapbox展現的矢量切片vectortile

 

本文記錄一下把geojson格式的數據製做成本地的矢量切片，並在mapbox中展現的過程。

1.切片

1.1 矢量數據須要先轉換爲geojson，若是是shp格式能夠使用QGIS或者下載shp2gwojson進行轉換。

1.2 使用tippecanoe進行切片，tippecanoe能從大量的 GeoJSON、Geobuf 或 CSV 特徵集合中建立矢量瓦片。

在 Mac OSX 系統上安裝 tippecanoe 比較簡單，直接在 Terminal（終端）中輸入下面的代碼：brew install tippecanoe 便可。windows平臺須要藉助Cygwin從源碼安裝，可參考這裏。

1.3 Cygwin64 Terminal中切換到數據目錄，輸入：

1 tippecanoe -o outfile.mbtiles -Z8  -z20 infile.geojson

參數說明: -o outfile 輸出的切片，是.mbtiles格式的文件，該文件是一個sqlite庫

                -Z 是切片的最小zoom, -z 切片的最大zoom

                infile能夠是多個，這樣會按照圖層分別存放切片

特別注意，-e 可用於將 tile 寫入指定的目錄而不是 mbtiles 文件，想要將矢量瓦片發佈到 Web 服務的開發者能夠使用這個功能（第三部分有介紹）。

參數詳細介紹能夠參考官方文檔。

2.查看

 mbtiles格式的查看須要使用mbview，這一個node項目

能夠 npm install -g mbview 命令安裝後，進入 .mbtiles 目錄，輸入mbview  filename.mbtiles，這是會報缺乏token的異常：

 

因而加入了MAPBOX_ACCESS_TOKEN的參數（能夠註冊mapbox帳號獲取token），然而仍是報錯...

 

 無奈之下看了源碼，發現token須要用MapboxAccessToken名稱：

 

修改後，再執行命令，顯示啓動了服務

 

同時瀏覽器也地圖，顯示切片地圖。

 

瀏覽器F12能夠查看加載的瓦片。

 

3.展現

 mbtiles能夠經過node-mbtiles及其餘mbtiles-server發佈出來，作爲數據源給mapbox展現。

本文介紹另一種使用方式，即不依賴map server 把切片以ZXY文件組織的方式放入web服務器中，mapbox使用形如 http://localhost:9002/laketile/{z}/{x}/{y}.pbf的地址訪問。

在1.3部分說過 -e outdir 參數能夠將切片放入目錄，生成的結果以下圖：

而後在nginx中添加如下配置把pbf發佈出來：

1 location /laketile {
2        alias   E:/code/00test/MapBox/mbutil/lake;
3        add_header 'Access-Control-Allow-Origin' '*';
4 }

在mapbox中添加代碼顯示數據：

 1 map.on('load', function(){
 2   map.addLayer({
 3     "id": "lake",
 4     "type": "fill",
 5     "source": {
 6       type: 'vector',
 7       tiles: ['http://localhost:9002/laketile/{z}/{x}/{y}.pbf']
 8     },
 9     "source-layer": "lake",
10     'layout': {},
11     'paint': {
12       'fill-color': '#088',
13       'fill-opacity': 0.8
14     }
15   });
16 });

打開瀏覽器，發現沒有顯示數據，console報 Unimplemented type 3 的錯誤。

 

 

 經過不懈努力發現原來是tippecanoe在製做切片進行了gzip壓縮，而瀏覽器不知道.pbf是壓縮過的，不過tippecanoe是很強大的，留了不少參數，加上 --pC就能夠生成爲壓縮的切片。

1 tippecanoe -e lakepbf -pC -Z8 -z14 -f lake.geojson

再次發佈、訪問就沒問題了。這種方式會生成不少小文件，不方便管理，可是對於須要離線部署、數據量不大的狀況仍是挺有用的，不須要專門的map server，能夠和前端代碼一塊兒放入nginx。

若有不清楚的地方，歡迎留言交流~