openlayers4加载tippecanoe矢量切片

2019独角兽企业重金招聘Python工程师标准>>>

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

 

转载于:https://my.oschina.net/u/1464512/blog/1631975