GeoServer入门学习：07-发布多层级TIF地图大图数据

一、概述

本篇文章介绍如何发布矢量切片数据，并且介绍了相关矢量切片插件的安装，以及使用OpenLayers进行图层数据的调用，和样式的修改等内容。

二、矢量切片的优点

矢量切片的优点是：
1、数据在客户端渲染（例如，OpenLayers），而不是在服务端。这允许不同的地图应用程序使用不同的样式去渲染一个地图，而不需要事先在服务端（比如GeoServer）进行预先的样式配置。
2、矢量切片的大小通常比图片小，这可以使得数据传输得更快以及使用更低的带宽。
3、GeoServer内嵌的GeoWebCache可以有效地存储矢量切片数据。由于样式由客户端配置，而不是在服务器配置，因此GeoWebCache只需要存储矢量切片，而不需要存储样式配置。
4、由于在客户端上可以获取到矢量数据，所以不需要相应地增加带宽，就可以绘制分辨率很高的地图。
5、客户端可以本地访问实际的要素信息（属性信息和几何信息），所以可以进行非常复杂和精细的要素渲染。
另一方面，矢量切片的主要缺点是需要对地理数据进行预处理，以便客户端能够完成所需的绘图（类似于图像瓦片地图的预处理数据）。考虑到这一点，矢量切片只能用于渲染。虽然是矢量格式，但是它们不可编辑，矢量切片是为了读取和渲染优化的格式，如果想在客户端编辑要素，最适合的是使用OGC的WFS。

三、矢量切片格式

GeoServer可以生成三种格式的矢量切片：GeoJSON，TopoJSON，MapBox Vector（MVT）。这些矢量切片格式也得到OpenLayers和其他客户端地图引擎的支持。
注意：当使用矢量切片时，请确保使用最新的客户端地图引擎，老版的地图引擎不支持矢量切片并会产生渲染错误。建议使用最新版的OpenLayers（目前最新版位v6.2.1）。

格式	MIME	描述
MapBox Vector（MVT）	application/x-protobuf;type=mapbox-vector	推荐的格式。这是一种高效的二进制格式，几乎所有的矢量切片应用程序都支持这种格式。 MVT是生产环境中首选的矢量切片格式。
GeoJSON	application/json;type=geojson	这是一种人类可读的JSON格式。虽然许多GIS应用程序支持GeoJSON数据集，但很少有矢量切片应用程序支持这种格式的切片。 OpenLayers支持这种格式的矢量切片。
TopoJSON	application/json;type=topojson	这是一种非常复杂，但有一点人类可读性的JSON格式，对多边形覆盖很好，但是很少有矢量切片应用程序支持它。 OpenLayers支持这种格式的矢量切片。

四、安装矢量切片插件

GeoServer的矢量切片插件是官方的插件，可以在GeoServer Download页面中下载。
1、在GeoServer官网的下载页面找到Vector Tiles链接，如下图所示：

或者直接打开下载地址进行下载：https://sourceforge.net/projects/geoserver/files/GeoServer/2.16.0/extensions/geoserver-2.16.0-vectortiles-plugin.zip/download
注意：其中的版本号一定要和您当前安装的GeoServer版本相一致，否则有可能会出现一些问题。当前演示用的GeoServer版本号是：2.16.0
2、将下载的内容解压（jar包），如下图所示：

3、将解压出来的文件复制到GeoServer的WEB-INF/lib文件夹下，如下图所示：

4、重新启动GeoServer。

5、接下来，验证矢量切片扩展是否已安装成功，打开GeoServer的Web管理界面，并登陆系统，然后打开《图层》管理页面，如下图所示：

6、如上图所示，在《图层》列表中单击任意一个矢量图层，然后会打开《编辑图层》页面，如下图所示：

7、在上图所示的页面中点击《Tile Caching》选项卡，如下图所示：

如果可以看到这些选项，那么就表示扩展已经安装成功了。

五、发布矢量切片

具体发布过程可以参考《GeoServer入门学习：04-发布Shapfile地图数据》文章，地址是：https://blog.csdn.net/gjysk/article/details/103101473

六、创建OpenLayers应用程序

1、创建OpenLayers的前端HTML项目。
2、下载最新版本的OpenLayers，可以从官网地址下载：https://openlayers.org/download
3、解压OpenLayers文件，并将压缩包中的以下文件复制到项目文件夹中：

ol.js
ol-debug.js
ol.css

4、在项目目录中创建名为index.html的文件，并且将一下代码复制到该文件中：

<!DOCTYPE html -->
<html>
 
<head>
    <title>Vector tiles</title>
    <script src="ol.js"></script>
    <link rel="stylesheet" href="ol.css">
    <style>
        html,
        body {
            font-family: sans-serif;
            width: 100%;
        }
 
        .map {
            height: 500px;
            width: 100%;
        }
    </style>
</head>
 
<body>
    <h3>Mapbox Protobuf - vector tiles</h3>
    <div id="map" class="map"></div>
    <script>
        var style_simple = new ol.style.Style({
            fill: new ol.style.Fill({
                color: '#ADD8E6'
            }),
            stroke: new ol.style.Stroke({
                color: '#880000',
                width: 1
            })
        });
 
        function simpleStyle(feature) {
            return style_simple;
        }
 
        var layer = 'opengeo:countries';
        var projection_epsg_no = '900913';
        var map = new ol.Map({
            target: 'map',
            view: new ol.View({
                center: [0, 0],
                zoom: 2
            }),
            layers: [new ol.layer.VectorTile({
                style: simpleStyle,
                source: new ol.source.VectorTile({
                    tilePixelRatio: 1,
                    tileGrid: ol.tilegrid.createXYZ({
                        maxZoom: 19
                    }),
                    format: new ol.format.MVT(),
                    url: '/geoserver/gwc/service/tms/1.0.0/' + layer +
                        '@EPSG%3A' + projection_epsg_no + '@pbf/{z}/{x}/{-y}.pbf'
                })
            })]
        });
    </script>
</body>
 
</html>

5、运行项目，并且打开index.html页面，并验证输出是否显示没有任何错误，然后会看到类似于如下的效果：

七、修改矢量切片的样式

就像前面所描述的那样，这些矢量切片是在客户端中渲染的，所以我们只需要更改客户端应用程序中相关的样式命令就能修改矢量切片的样式，而不需要对GeoServer（服务器端）进行任何更改，也不必在GeoServer中重新生成矢量切片。下面，我们示例几个简单的修改操作。
1、将填充颜色改为light green：

var style_simple = new ol.style.Style({
    fill: new ol.style.Fill({
        color: 'lightgreen'
    }),
    stroke: new ol.style.Stroke({
        color: '#880000',
        width: 1
    })
});

2、保存文件并刷新浏览器，可以看到地图的填充颜色变为如下图的效果了：

3、我们也可以构建基于属性的样式。这个数据集包含了一个属性（region_un），该属性包含国家所在的区域。让我们通过在现有样式下面添加另一个样式定义来高亮渲染非洲国家。

var style_highlighted = new ol.style.Style({
    fill: new ol.style.Fill({
        color: 'yellow'
    }),
    stroke: new ol.style.Stroke({
        color: '#880000',
        width: 1
    })
});

4、替换现有的样式函数：

function simpleStyle(feature) {
    return style_simple;
}

替换为下面这个：

function simpleStyle(feature) {
    if (feature.get("region_un") == "Africa") {
        return style_highlighted;
    }
    return style_simple;
}

5、保存文件并刷新浏览器，可以看到如下的效果：

如上图所示，可以看到非洲区域的填充颜色已经修改为黄色了。

八、参考资料

https://blog.csdn.net/qq_35732147/article/details/89354557

GeoServer入门学习：07-发布多层级TIF地图大图数据

猜你喜欢