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的加载能留下痕迹，方便你们。