由于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的加载能留下痕迹,方便大家。