博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
openlayers4加载tippecanoe矢量切片
阅读量:5876 次
发布时间:2019-06-19

本文共 1587 字,大约阅读时间需要 5 分钟。

hot3.png

由于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的数据库,对应的里面存的数据有可能如下格式:

231456_qmuE_1464512.png

这样的话,前台传递过来的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文件里的内容,照样还是不能显示。

敲破脑袋想了一个变通的办法,解决办法如下:

第一:写一个过滤器,内容如下:

182108_kL3X_1464512.png

第二:将该文件编译,打包成jar,放到tomcat的lib目录下。编译打包别忘了增加tomcat的runtime库。

第三:修改tomcat的conf/web.xml文件增加如下内容:

182404_3zjI_1464512.png

第四:重新启动tomcat,打浏览器,记得清除一下缓存,然后加载测试页面如下:

<图片因为涉及到保密数据,这里图片就不再贴出来了>

瓦片正确被加载进来了。

后记:关于ol支持4326的pbf瓦片的问题,几经测试,暂时得出如下结论:

第一,数据源geojson里的投影系可以是4326。

第二,使用切片工具切片的时候,不用指定-s EPSG:3857这样的参数,按照切片工具说明,4326的是默认支持的坐标系。只有geojson里的数据是3857的时候才能指定上述参数,并且必须指定上述参数。

第三,4326的坐标系切完片后,在ol里新建矢量瓦片层的时候,也是要指定3857的投影。

根据实际测试,按照上述方法,确实是可以正常显示瓦片的。但是否科学目前不得而知。

望有路过知道的朋友关于4326的加载能留下痕迹,方便大家。

 

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

你可能感兴趣的文章
学习笔记之软考数据库系统工程师教程(第一版)
查看>>
基本网络概念
查看>>
将 ASP.NET Core 2.0 项目升级至 ASP.NET Core 2.1 RC 1
查看>>
js提交图片转换为base64
查看>>
学习CodeIgniter框架之旅(二)继承自定义类
查看>>
Y2161 Hibernate第三次考试 2016年8月18日 试卷分析
查看>>
Angular CLI 使用教程指南参考
查看>>
PHP 程序员的技术成长规划
查看>>
用于守护进程的出错处理函数
查看>>
memcached 分布式聚类算法
查看>>
禁止body滚动允许div滚动防微信露底
查看>>
Xtreme8.0 - Kabloom dp
查看>>
jquery css3问卷答题卡翻页动画效果
查看>>
MDK5.00中*** error 65: access violation at 0xFFFFFFFC : no 'write' permission的一种解决方法
查看>>
Android 集成支付宝支付详解
查看>>
SQL分布式查询、跨数据库查询
查看>>
C#------连接SQLServer和MySQL字符串
查看>>
Arcgis Licensemanager 不能启动的原因之一(转载)
查看>>
(原)Android在子线程用handler发送的消息,主线程是怎么loop到的?
查看>>
$digest already in progress 解决办法——续
查看>>