解决基于VectorGrid的矢量瓦片Y轴偏移的问题

灰太狼 2024-02-05 20:57 52阅读 0赞

**目录**

前言

一、GeoServer的瓦片

1、GeoWebcache缓存配置

2、矢量瓦片本地缓存

3、瓦片访问

二、VectorGrid加载本地瓦片

1、加载关键代码

2、默认模式的问题

3、问题分析

4、tms参数修改

总结

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

## 前言 ##

在前面的博文介绍中，在线连接如下：[浅谈前端自定义VectorGrid矢量瓦片样式][VectorGrid]，[基于VectorGrid加载GeoServer发布的矢量瓦片实例][VectorGrid_GeoServer]，这里介绍了在Leaflet中加载矢量瓦片，也支持样式的定制。这里采用的矢量瓦片是使用GeoServer发布出来的，而且在GeoServer中是用的900913的gridset。使用GeoServer是一种不错的解决方案，但是无疑要引入一个新的组件，如果容易存在访问瓶颈。因此，跟栅格瓦片的原理一样，我们是否可以类似于栅格瓦片的原理，直接访问已经生成好的矢量瓦片，来进行访问加速。

使用GeoServer瓦片存在几个问题，一个是瓦片访问性能依赖于GeoServer。在进行架构扩展时不太方便。在GeoServer发布的矢量瓦片请求格式跟Google的xyz瓦片访问不太一致，有一点点儿小复杂。在此背景下，我们尝试使用将矢量瓦片直接瓦片化，然后再使用VectorGrid进行展示，但是发现，使用自己切好的矢量瓦片的加载方式跟GeoServer发布的矢量瓦片，加载出来的效果不一致，Y轴出现了偏移。

本文将重点讲解，如何使用VectorGrid加载自己切好的矢量瓦片，同时解决其出现的Y轴偏转的问题，如果您在项目开发过程中也出现这个问题，可以从这篇博客中找到解决办法。

## 一、GeoServer的瓦片 ##

### 1、GeoWebcache缓存配置 ###

众所周知，在GeoServer甚至很多的应用系统当中，使用缓存来进行应用访问加速是常规的做法，也是很有效的方式。在gis中，缓存的使用就更频繁了。通过空间换时间，效率得到了很大的提升。首先在GeoServer中打开配置页面，查看GeoWebcache的详细位置，在地址栏中输入：

http://localhost:8083/geoserver/gwc/

然后可以看到以下的配置页面：

![124bf2d267844ce2bd6d62d577d62157.png][]

大家可以把页面拉倒最下面，有cache的配置说明：

![2dfe66e89f4e4806b139b4a38c701286.png][]

### 2、矢量瓦片本地缓存 ###

在上面看到的访问地址中，将地址复制下来，然后在windows的资源管理器中打开，如下：

C:\Users\Administrator\AppData\Local\Temp\geowebcache

![1d9966014a4c4fcbba266d7cedd4b90e.png][]

![f4d84f343e2642f0b9957f2bb1cdd47e.png][]

这里可以看到经过页面发布后的900913的矢量瓦片。注意，Geoserver的缓存生成规则是必须由前台发起访问，后台才会进行缓存。因此，如果第一次没有看到缓存，请先打开页面进行访问，访问方法可以参考之前的博客。

### 3、瓦片访问 ###

通过查看上面的瓦片发布地址可以看到，其瓦片的pbf访问路径与常见的xyz瓦片不一致。我们来看一下xyz矢量瓦片路径规则，示意参考如下：

![9a2def8a24274f3faaa6d7100468f35d.png][]

这种路径跟常见的栅格瓦片就是一样的了，可以采用同样的加载规则进行初始化。

![3c1840dc52b648deac303320c80b823d.png][]

## 二、VectorGrid加载本地瓦片 ##

### 1、加载关键代码 ###

关于如何在VectorGrid中加载本地矢量瓦片，在之前的博文中有一定叙述，这里将关键代码贴一下：

var vectorTileOptions = {
    			 layerURL: pbfUrl,
    			 rendererFactory: L.canvas.tile,           
    			 tms: true, 
    			 interactive: true,	//开启VectorGrid触发mouse/pointer事件
    			 vectorTileLayerStyles: vectorTileStyling
    		 };      
    		
    		var vectorTile = new L.vectorGrid.protobuf(pbfUrl, vectorTileOptions).addTo(map)
    
    		vectorTile.on('mouseover', function (e) {    
    			var properties = e.layer.properties;    
    			L.popup()
    			 .setContent(properties.province_c+";" + properties.province_n )
    			 .setLatLng(e.latlng)
    			 .openOn(map);  
    		});

### 2、默认模式的问题 ###

经过上述配置后，在浏览器中查看运行的效果，我们发现实际的效果跟我们的期望还是有一定差异的，准确来说。是矢量瓦片叠加后，整个Y轴反转了，如下图：

![393cd225a85c493d9d729c8aa03cdc2f.png][]

### 3、问题分析 ###

在gis中，通过观察地图的偏移位置，大致可以猜测出来问题的所在，在这里可以看到。X轴（经度）几乎是一致的，没有偏移。偏移的Y轴（纬度），由此很容易联想到Y轴的为止变换。

这里我们先来看一下VectorGrid中，对于y轴参数控制的说明，源文件：

Leaflet.VectorGrid.Protobuf.js

![f21315088ba444728adcd6c6bb8b5593.png][]

打开之后，我们找到Y轴控制的方法：\_getVectorTilePromise

_getVectorTilePromise: function(coords, tileBounds) {
    		var data = {
    			s: this._getSubdomain(coords),
    			x: coords.x,
    			y: coords.y,
    			z: coords.z
    // 			z: this._getZoomForUrl()	/// TODO: Maybe replicate TileLayer's maxNativeZoom
    		};
    		if (this._map && !this._map.options.crs.infinite) {
    			var invertedY = this._globalTileRange.max.y - coords.y;
    			if (this.options.tms) { // Should this option be available in Leaflet.VectorGrid?
    				data['y'] = invertedY;
    			}
    			data['-y'] = invertedY;
    		}
    		if (!this._isCurrentTile(coords, tileBounds)) {
    			return Promise.resolve({layers:[]});
    		}
    		xxx
    }

这里有一句话很重要：

if (this.options.tms) \{ // Should this option be available in Leaflet.VectorGrid?

就是这个配置引起的，默认情况下tms为true，所以y轴进行了处理。而默认情况是通过tms加载的，本地直接加载的方式并不是，因此我们要将tms标志设置为false。

### 4、tms参数修改 ###

在知道了问题所在之后，我们再来修改初始参数配置：

var vectorTileOptions = {
    			 layerURL: pbfUrl,
    			 rendererFactory: L.canvas.tile,           
    			 tms: false, //本地加载设为false
    			 interactive: true,	//开启VectorGrid触发mouse/pointer事件
    			 vectorTileLayerStyles: vectorTileStyling
    		 };

然后再刷新来看一下实际的效果：

![12003796db3b4722bcd03f3a34bf5dff.png][]

可以看到，矢量瓦片和底图就完美的贴合了，没有任何偏移。至此，Y轴偏移的问题解决。

![d7c0754e10fa4824805b1af1e62c4210.png][]

## 总结 ##

以上就是本文的主要内容，本文将重点讲解，如何使用VectorGrid加载自己切好的矢量瓦片，同时解决其出现的Y轴偏转的问题，如果您在项目开发过程中也出现这个问题，可以从这篇博客中找到解决办法。

[VectorGrid]: https://blog.csdn.net/yelangkingwuzuhu/article/details/134252862
[VectorGrid_GeoServer]: https://blog.csdn.net/yelangkingwuzuhu/article/details/134099451
[124bf2d267844ce2bd6d62d577d62157.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/30/fa6dcd6044f448d0aabd124a52339559.png
[2dfe66e89f4e4806b139b4a38c701286.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/30/ff8d3daeeb834ec1a72234776f6c78fb.png
[1d9966014a4c4fcbba266d7cedd4b90e.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/30/bd99834730764684b2a8b20d41c3aad2.png
[f4d84f343e2642f0b9957f2bb1cdd47e.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/30/ff5869047c8a4dfe81a77248be4936bd.png
[9a2def8a24274f3faaa6d7100468f35d.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/30/50e541c8c15549238524327d626ebaf3.png
[3c1840dc52b648deac303320c80b823d.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/30/1e5b8f7cac3340d389a89ea6ca7822ae.png
[393cd225a85c493d9d729c8aa03cdc2f.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/30/94d25e7f5f8446a997101b4c50dc041b.png
[f21315088ba444728adcd6c6bb8b5593.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/30/f4411170141948adabae04ec28128713.png
[12003796db3b4722bcd03f3a34bf5dff.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/30/36be2ef92d074e6d96b0f99ba877a5a9.png
[d7c0754e10fa4824805b1af1e62c4210.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/30/eab38ba13d244eacb83ec0fffa5ed6df.png