基于VectorGrid加载GeoServer发布的矢量瓦片实例

前言

一、关于VectorGrid

1、开源地址

2、本地示例

二、与LeafLet集成

1、新建html页面

2、地图初始化

3、pbf瓦片地址配置

4、pbf初始化

三、GeoServer跨域问题

1、web.xml配置

2、重启tomcat

总结

前言

回望10月，发生了一些变动，面向未来的选择，因此这个月几乎没有怎么输出。随着一些未知逐渐尘埃落定，依然选择在这里输出一些知识。

闲言少叙，在之前的博文中GeoServer扩展功能之发布矢量瓦片，简单介绍了如何在Geoserver中进行矢量瓦片的发布以及预览。在当时的场景下，在Geoserver默认的数据浏览框架下，进行了矢量瓦片的瓦片浏览。那么如果您需要在其他场景，比如Leaflet中进行矢量瓦片的展示，又该如何做呢？本文即解决这个问题，重点讲解在LeafLet中使用VectorGrid如何加载 Geoserver发布的矢量瓦片，以及在GeoServer中进行跨域访问设置的基本操作，让您在实践时遇到同样问题有地方参考。

一、关于VectorGrid

了解Leaflet的朋友应该清楚，在LeafLet中，它的插件是丰富应用开发的良好方式。使用者可以按照自己的需求进行定制加载，扩展能力比较强。这里简单介绍VectorGrid插件，以及其它可以选择的矢量瓦片展示插件。

·在Leaflet的官方网站上可以看到以下的介绍瓦片的介绍，其中有一个是关于Vector Tiles的介绍。

1、开源地址

Vector grid可以基于Leaflet进行GeoJson、TopoJson、pbf瓦片等矢量瓦片的加载展示。开源地址：Vector Grid 官网地址。将Vector Grid下载到本地后可以看到如下目录（受文章篇幅限制，不在此赘述）：

2、本地示例

在下载的docs目录下，有其自带的演示示例，是用于加载geojson的例子。geojson官网地址。可以直接在浏览器中进行浏览查看。打开效果如下：

二、与LeafLet集成

1、新建html页面

在文件夹中创建index_vectorgrid.html网页，示例代码如下：

<!DOCTYPE html>
<html>
<head><title>VectorGrid矢量瓦片加载演示</title><meta charset="utf-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0"><link rel="shortcut icon" type="image/x-icon" href="docs/images/favicon.ico" /><link rel="stylesheet" href="/2d/leaflet/leaflet.css" /><script src="/2d/leaflet/leaflet.js?v=1.0.0"></script><script src="https://unpkg.com/leaflet.vectorgrid@latest/dist/Leaflet.VectorGrid.bundled.js"></script><script src="https://unpkg.com/leaflet.vectorgrid@latest/dist/Leaflet.VectorGrid.js"></script><style>#map {margin: 0;padding: 0;position: absolute;width: 99%;height: 98%;}</style>
</head>
<body>
<div id="map"></div>
</body>
</html>

需要注意的是，这里引用的VectorGridjs是在线js，您也可以使用下载下来的js。作用是一样的。需要注意的是，这里我采用的leaflet.js是之前下载好的，如果本地没有可以选择引用在线的。在上述的代码中，定义了一个展现地图的Map容器。

2、地图初始化

还是老套路，采用如下的方法进行底图初始化。关键代码如下所示：

var mymap = L.map('map').setView([29.052934, 104.0625], 3);var tileLayer = L.tileLayer('http://localhost:8086/data/xxgc/q0403/{z}/{x}/{y}.png', {maxZoom: 7,minZoom:0
});tileLayer.addTo(mymap);

3、pbf瓦片地址配置

在查看pbf瓦片之前，需要在GeoServer中找到其地址的参考。操作步骤如下，打开GeoServer管理页面如下如所示：

用鼠标点击图中红色框中的超链接，TMS 1.0.0 进入如下的界面。

由于本文使用的是pbf的瓦片格式，因此找到以pbf后缀结束的瓦片（这个地址要记住，在后面会用到）。

http://localhost:8083/geoserver/gwc/service/tms/1.0.0/gisdev%3A2019_province_4326@EPSG%3A4326@pbf

4、pbf初始化

经过pbf瓦片配置后，就可以采用框架进行集成配置。关键代码如下：

const pbfUrl = "http://localhost:8083/geoserver/gwc/service/tms/1.0.0/gisdev%3A2019_province_4326@EPSG%3A900913@pbf/{z}/{x}/{y}.pbf";var vectorTileOptions = {layerURL: pbfUrl,rendererFactory: L.canvas.tile,           tms: true, 
};      
var vectorTile = new L.vectorGrid.protobuf(pbfUrl, vectorTileOptions).addTo(mymap)

到此，在Leaflet中将VectorGrid进行集成展示的例子就完成了。下面来看效果。

三、GeoServer跨域问题

在使用框架配置的同时，在Leaflet中可能会遇到瓦片加载不成功的问题。比如您的Geoserver是采用war与Tomcat进行部署的模式，极有可能会遇到瓦片跨域请求的问题导致您无法看到以上的效果。下面来讲解一下如何解决跨域。

1、web.xml配置

首先找到部署Geoserver的tomcat容器，这里仅讲解已war包部署的geoserver，其它的方式暂时没有尝试，后面如果有时间可以专门讲解一下。找到Geoserver部署工程的Web.xml文件。

打开web.xml文件，以tomcat8.5为例，大概是在194行左右，有以下的代码，被注释了，需要将注释打开。

<!-- 允许跨域访问><!-- Uncomment following filter to enable CORS in Tomcat. Do not forget the second config block further down.--><filter><filter-name>cross-origin</filter-name><filter-class>org.apache.catalina.filters.CorsFilter</filter-class><init-param><param-name>cors.allowed.origins</param-name><param-value>*</param-value></init-param><init-param><param-name>cors.allowed.methods</param-name><param-value>GET,POST,PUT,DELETE,HEAD,OPTIONS</param-value></init-param><init-param><param-name>cors.allowed.headers</param-name><param-value>*</param-value></init-param></filter>

同时还有以下的过滤器配置：

<!-- 允许跨域访问 --><!-- Uncomment following filter to enable CORS  --><filter-mapping><filter-name>cross-origin</filter-name><url-pattern>/*</url-pattern></filter-mapping>