OpenLayers：海量图形渲染之矢量切片

近来由于在工作中涉及到了海量图形渲染的问题，因此我开始研究相干的解决方案。在咨询了很多朋侪之后发现矢量切片似乎是行业内最常用的一种解决方案，于是我便开始研究它该如何利用。
一、什么是矢量切片

矢量切片按照我的明白就是用栅格切片的方式把矢量数据也切成金字塔，只不外切割的不是栅格图片，而是矢量数据的形貌性文件。
矢量切片的特点

因此矢量切片它就兼具矢量数据与栅格数据的优点，比如说：

• 矢量瓦片相比于栅格图片更加灵活，可以直接访问矢量要素，由于矢量数据是以要素为单位的，而栅格数据它就是一个图片那就难以直接访问到详细的要素了。
  
• 可直接在客户端获取请求指定地物的信息，无须再次请求服务器。由于空间数据和属性数据一起被请求到客户端了，无需再次请求了。
  
• 样式可改变和定制。由于我们拿到的只是矢量数据，因此就可以在客户端自由的给它设置样式。
  
• 相比于原始矢量数据，矢量瓦片更小巧，进行了重新编码并切分，在被请求时可以只返回请求地区和相应级别的数据。这个优点也就是我想利用它的来由，我盼望矢量切片可以资助我解决海量图形渲染的问题。
  
• 数据更新快，乃至可以说是及时的，当数据库中的空间数据变革后，再次请求的数据是更新后的数据。
  

二、发布矢量切片服务

如何发布矢量瓦片服务，详细要看你利用的是什么WebGIS服务器，不同的WebGIS服务器操纵的步骤可能都不一样，需要专门去查阅相干资料。我在实验的过程中是利用GeoServer来发布矢量切片的。
GeoServer中发布矢量切片

1.下载Vector Tiles 插件

GeoServer中无法直接实现矢量切片，需要下载对应的插件。
插件在官网中就可以下载（Download - GeoServer），但是注意要到自己所安装的对应geoserver版本的下载页面中去下载插件，如果下载了其它版本下的插件，可能会在启动geoserver时导致报错。
由于我安装的是2.21.5版本的geoserver，因此就进入这个版本的下载页面。

然后下滑到下面的 Extensions 部门就可以找到对应的插件。

2.安装Vector Tiles插件

将下载的插件解压之后得到如下的这些文件，复制其中的.jar文件（jar包）。

将复制好的文件放到geoserver的 WEB-INF/lib目录下，这个目录中都是各种.jar文件，比力好辨认。

3.检查Vector Tiles插件是否安装乐成

安装插件乐成后重新启动GeoServer，然后打开GeoServer的图层页面

然后随便选择一个矢量图层

然后进入Tile Caching页面

滚动页面到 "Tile Image Formats" 部门，除了标准的GIF/PNG/JPEG格式之外，如果你悦目到以下的内容就表现插件安装乐成了。

4.发布矢量切片

发布矢量切片的过程也很简单，首先将自己预备的数据创建为一个矢量图层（详细的步骤我就不多说了）。
这里我就随便选择了一个GeoServer中的美国人口的矢量面图

点击进入“图层编辑”页面，然后再进入“Tile Caching”选项卡

滚动页面到 "Tile Image Formats" 部门，勾选application/json;type=geojson、application/json;type=topojson和application/vnd.mapbox-vector-tile这几个选项（注意：这三个选项对应了三种不同格式的矢量切片数据，我们每勾选一种就会GeoServer就会制作发布一种对应格式的矢量切片）

最后点击保存，一个带有矢量切片的图层就预备好了。
三、OpenLayers中加载矢量切片

1.加载TMS服务的矢量切片

网上绝大多数的文章中都是加载的TMS服务的矢量切片，这种加载方式看起来还是比力简单的，但是我在实际利用的时候却发现“困难重重”实际上用起来比力麻烦。
获取TMS服务地点

首先第一步我们要搞清晰我们所发布的矢量瓦片的TMS服务的url地点是什么。可以打开Goeserver去查察。
点击左上角的logo进入首页

在首页点击TMS的链接

进入的这个页面中就记载了现在我的这台GeoServer服务器上发布的全部TMS服务的url。

找到之前设置了矢量切片的图层的链接（例如我下面的这个美国人口的图层）

这其中以geojson、topojson和pbf末端的url就是矢量切片的url。

然后就可以拿到一个类似于http://localhost:8080/geoserver/gwc/service/tms/1.0.0/topp%3Astates@EPSG%3A4326@geojson如许的url。这个url由几个部门组成：

• http://localhost:8080/geoserver/gwc/service/tms/1.0.0 这部门在同一个GeoServer服务器上是固定的。
  
• /topp%3Astates 这部门表现图层名，其中的%3A是冒号的URL编码情势，以是我这里的图层就叫做topp:states
  
• @EPSG%3A4326 这部门表现投影，我这利用的是 EPSG:4326
  
• @geojson 这部门表现数据的格式
  

一个完备的TMS的url还不止上面的这些，它应该还要包括切片的详细信息，例如：http://localhost:8080/geoserver/gwc/service/tms/1.0.0/topp%3Astates@EPSG%3A4326@geojson/3/2/1.geojson
背面的/3/2/1分别代表切片的层级、列号和行号。
加载TMS矢量切片的方式

OpenLayers中加载矢量切片都需要利用VectorTile 图层 + VectorTile数据源的方式来实现。
创建VectorTile 图层时可以通过style属性给请求到的矢量瓦片数据设置样式。
创建VectorTile数据源时则重要是要设置三个属性：

• url，即矢量瓦片服务的地点，由于OpenLayers中不支持直接请求TMS服务，以是需要通过请求XYZ服务的方式请求TMS，因此url要写成"http://localhost:8080/geoserver/gwc/service/tms/1.0.0/BeiJiang%3Abj@EPSG%3A4326@geojson/{z}/{x}/{-y}.geojson"的情势，也就是用占位符{z}、{x}、{y}来表现切片的层级、列号和行号。但是这里有一点特别的地方在于利用的是{-y}，之以是如许写是由于XYZ瓦片的y坐标从顶部开始向下递增，TMS瓦片的y坐标从底部开始向上递增，也就是说他们的y轴方向相反，以是url中要写成{-y}进行转换。
  
• format，这个属性是用来将矢量数据转换为Feature的，如果矢量切片的数据范例是geojson就利用GeoJSON转换器，如果矢量切片的数据范例是pbf就利用MVT转换器（这些转换器都是OpenLayers封装好的的都在ol/format目录下面）。
  
• tileGrid，这个属性应该用来定义切片规则的，详细怎么定义的我也搞不懂。这里由于我们利用的是加载XYZ服务的方式，以是可以直接利用OpenLayers内置的createXYZ函数来直接创建适合XYZ服务的tileGrid。但是在利用createXYZ函数时特别要注意，其中的extent属性默认为 EPSG:3857 投影的范围，如果你像我一样利用的是其它的投影（例如 EPSG:4326）,那就必须要手动将这个属性设置为你所利用的投影的范围，否则请求的url将会404（不要问我是怎么知道的