openlayers4加載tippecanoe矢量切片

因爲tippecanoe切片出來的格式mvt格式因此，加載的時候，須要使用以下方法加載：

前端調用，關鍵是數據源source的構造，下面是mvt格式的調用格式：

var source = new ol.source.VectorTile({
                    format: new ol.format.MVT({maxzoom:22}),
                    url: 'pbf_tile/{z}/{x}/{y}.pbf',

                    projection: "EPSG:3857",

                    tileSize: 256,
                });

注意，pbf文件裏的數據是已經通過gzip壓縮過的，因此須要配置response header增長以下兩個頭參數：

Content-Encoding:gzip

Content-Type:application/x-protobuf

若是是後臺使用mbtiles文件保存瓦片，這個文件實際上是sqlite的數據庫，對應的裏面存的數據有可能以下格式：

這樣的話，前臺傳遞過來的zxy座標裏，z，x都是正確的，y須要作以下轉換操做：

y= (1 << z) - 1 - y

tile_row = (1 << curVal.zoom_level) - 1 - curVal.tile_row

這樣，就和數據庫裏的zoom_level->z，tile_column->x，tile_row->y，對應了，經過執行sql語句就能夠查詢到tile_data後回寫到response裏，注意回寫前要設置頭信息：

Content-Encoding:gzip

Content-Type:application/x-protobuf

特別說明：

若是pbf瓦片是以文件目錄的形式保存並放到tomcat下的，經過

url: 'pbf_tile/{z}/{x}/{y}.pbf',

這樣的參數，徹底能夠正常請求到瓦片，矢量瓦片卻不能正常顯示出來。緣由以下：

pbf文件裏自己保存的是通過gzip壓縮過的數據，瀏覽器請求到該文件後，response header裏沒有

Content-Encoding:gzip

Content-Type:application/x-protobuf

這兩項，致使瀏覽器並不會對請求到的pbf文件進行gzip解壓縮。

但若是在tomcat裏的server.xml裏配置啓用壓縮標誌，又會致使tomcat自做聰明的把pbf文件再壓縮一次，而後瀏覽器拿到後解壓縮，獲得的仍是pbf文件裏的內容，照樣仍是不能顯示。

敲破腦殼想了一個變通的辦法，解決辦法以下：

第一：寫一個過濾器，內容以下：

第二：將該文件編譯，打包成jar，放到tomcat的lib目錄下。編譯打包別忘了增長tomcat的runtime庫。

第三：修改tomcat的conf/web.xml文件增長以下內容：

第四：從新啓動tomcat，打瀏覽器，記得清除一下緩存，而後加載測試頁面以下：

<圖片由於涉及到保密數據，這裏圖片就再也不貼出來了>

瓦片正確被加載進來了。

後記：關於ol支持4326的pbf瓦片的問題，幾經測試，暫時得出以下結論：

第一，數據源geojson裏的投影系能夠是4326。

第二，使用切片工具切片的時候，不用指定-s EPSG:3857這樣的參數，按照切片工具說明，4326的是默認支持的座標系。只有geojson裏的數據是3857的時候才能指定上述參數，而且必須指定上述參數。

第三，4326的座標系切完片後，在ol裏新建矢量瓦片層的時候，也是要指定3857的投影。

根據實際測試，按照上述方法，確實是能夠正常顯示瓦片的。可是否科學目前不得而知。

望有路過知道的朋友關於4326的加載能留下痕跡，方便你們。