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

深藏阁楼爱情的钟 2024-02-20 09:59 22阅读 0赞

**目录**

前言

一、关于VectorGrid

1、开源地址

2、本地示例

二、与LeafLet集成

1、新建html页面

2、地图初始化

3、pbf瓦片地址配置

4、pbf初始化

三、GeoServer跨域问题

1、web.xml配置

2、重启tomcat

总结

--------------------

## 前言 ##

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

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

## 一、关于VectorGrid ##

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

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

![5c3540fbbc7249439ba35c3fbcfc37e4.png][]

![527a8e89553b430c98118cef104d2647.png][]

### 1、开源地址 ###

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

![7d6ec86342e34609a8999e269f4977dc.png][]

### 2、本地示例 ###

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

![846a27a486714025a8fbd9a65e2d668b.png][]

## 二、与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、地图初始化 ###

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

### 3、pbf瓦片地址配置 ###

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

![8800e56b7d1f41b58a559d0e27997e6c.png][]

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

![734ad9a1013d42828d5c6a86eed5474c.png][]

由于本文使用的是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进行集成展示的例子就完成了。下面来看效果。

![99ffc4c74d0b4cc1a8d7e7a58b7492a5.png][]

![8dd44375ed8a45fc8eadee28c21e1c2e.png][]

## 三、GeoServer跨域问题 ##

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

### 1、web.xml配置 ###

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

![a7c270f32a4f4fea8a328f7aa2222b40.png][]

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

<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>

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

<filter-mapping>
            <filter-name>cross-origin</filter-name>
            <url-pattern>/*</url-pattern>
        </filter-mapping>

### 2、重启tomcat ###

将web.xml配置后，保存配置文件后，需要重启整个tomcat，如果没有大的问题后，大概率是没有问题的。可以看到正常的功能展示。

## 总结 ##

以上就是本文的主要内容，本文重点讲解在LeafLet中使用VectorGrid如何加载 Geoserver发布的矢量瓦片，以及在GeoServer中进行跨域访问设置的 基本操作，让您在实践时遇到同样问题有地方参考。行文仓促，如有不当，欢迎各位朋友在评论区中批评指正。

[GeoServer]: https://blog.csdn.net/yelangkingwuzuhu/article/details/133364479
[5c3540fbbc7249439ba35c3fbcfc37e4.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/20/fe5a69b623a6460c9cb22a0386a43f4c.png
[527a8e89553b430c98118cef104d2647.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/20/a646299bd1e74f79b64b5e64768775eb.png
[Vector Grid]: https://github.com/Leaflet/Leaflet.VectorGrid
[7d6ec86342e34609a8999e269f4977dc.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/20/0e1f686567b4401089840d0b69c92bb6.png
[geojson]: http://file///F:/3dpro/2d/Leaflet.VectorGrid/docs/demo-geojson.html
[846a27a486714025a8fbd9a65e2d668b.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/20/a5895198b2884f73962c65ada292f3de.png
[8800e56b7d1f41b58a559d0e27997e6c.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/20/1eb9d563c86d47fcb55f4e1e08a12ae5.png
[734ad9a1013d42828d5c6a86eed5474c.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/20/4b678bde69f940bd8a01b3afef301fd5.png
[99ffc4c74d0b4cc1a8d7e7a58b7492a5.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/20/127e8dddaadb45b48028deeb60f35773.png
[8dd44375ed8a45fc8eadee28c21e1c2e.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/20/fec4ff60548f45ef97626894ea81452f.png
[a7c270f32a4f4fea8a328f7aa2222b40.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/20/3f7afad64cec43ba829cf88c1ba05284.png