当前位置：网站首页>GeoServer introductory study: 07 - release a larger multi-tiered TIF map data

GeoServer introductory study: 07 - release a larger multi-tiered TIF map data

2022-08-08 21:03:00 【thinking barefoot】

一、概述

This article describes how to publish vector tile data,And introduces the installation of related vector tile plug-ins,以及使用OpenLayersMake a call to the layer data,and style modifications.

二、Advantages of vector tiles

The advantage of vector slicing is that：
1、Data is rendered on the client side（例如,OpenLayers）,而不是在服务端.This allows different map applications to use different styles to render a map,No need to be on the server in advance（比如GeoServer）Do pre-style configuration.
2、Vector tiles are usually smaller in size than pictures,This can make data transfer faster and use lower bandwidth.
3、GeoServer内嵌的GeoWebCacheVector tile data can be stored efficiently.Since the style is configured by the client,rather than in the server configuration,因此GeoWebCacheOnly the vector tiles need to be stored,without the need to store style configuration.
4、Because the vector data can be obtained on the client,So there is no need to increase the bandwidth accordingly,You can draw high-resolution maps.
5、Clients have local access to the actual feature information（attribute information and geometric information）,So very complex and detailed feature rendering is possible.
另一方面,The main disadvantage of vector tiles is the need for preprocessing of geographic data,so that the client can complete the required drawing（Preprocessed data similar to image tile maps）.考虑到这一点,Vector tiles can only be used for rendering.Although in vector format,But they are not editable,Vector tiles are a format optimized for reading and rendering,If you want to edit features on the client side,The most suitable is to useOGC的WFS.

三、Vector tile format

GeoServerVector tiles can be generated in three formats：GeoJSON,TopoJSON,MapBox Vector（MVT）.These vector tile formats are also availableOpenLayersand other client-side map engines are supported.
注意：When using vector tiles,Make sure to use the latest client-side map engine,Older versions of Maps Engine do not support vector tiles and will produce rendering errors.建议使用最新版的OpenLayers（The latest version currentlyv6.2.1）.

格式	MIME	描述
MapBox Vector（MVT）	application/x-protobuf;type=mapbox-vector	推荐的格式. This is an efficient binary format,Almost all vector tiling applications support this format. MVTIs the preferred vector tile format in production environments.
GeoJSON	application/json;type=geojson	It's kind of human readableJSON格式. 虽然许多GIS应用程序支持GeoJSON数据集, But few vector tiling applications support tiling in this format. OpenLayersVector tiles in this format are supported.
TopoJSON	application/json;type=topojson	This is kind of very complicated,But there is a bit of human readabilityJSON格式,Good for polygon coverage,But few vector tiling applications support it. OpenLayersVector tiles in this format are supported.

四、Install the vector tile plugin

GeoServerThe Vector Tile plugin is the official plugin,可以在GeoServer Download页面中下载.
1、在GeoServerFound on the download page of the official websiteVector Tiles链接,如下图所示：

Or directly open the download address to download：https://sourceforge.net/projects/geoserver/files/GeoServer/2.16.0/extensions/geoserver-2.16.0-vectortiles-plugin.zip/download
注意：The version number in it must be the same as your current installationGeoServer版本相一致,Otherwise, some problems may occur.for the current demoGeoServer版本号是：2.16.0
2、Unzip the downloaded content（jar包）,如下图所示：

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

4、重新启动GeoServer.

5、接下来,Verify that the Vector Tile extension has been installed successfully,打开GeoServer的Web管理界面,and log into the system,然后打开《图层》管理页面,如下图所示：

6、如上图所示,在《图层》Click any vector layer in the list,然后会打开《编辑图层》页面,如下图所示：

7、Click on the page shown above《Tile Caching》选项卡,如下图所示：

If you can see these options,Then it means that the extension has been installed successfully.

五、Publish vector tiles

Please refer to the specific release process《GeoServer入门学习：04-发布Shapfile地图数据》文章,地址是：https://blog.csdn.net/gjysk/article/details/103101473

六、创建OpenLayers应用程序

1、创建OpenLayers的前端HTML项目.
2、下载最新版本的OpenLayers,It can be downloaded from the official website address：https://openlayers.org/download
3、解压OpenLayers文件,and copy the following files from the zip to the project folder：

ol.js
ol-debug.js
ol.css

4、在项目目录中创建名为index.html的文件,And copy the following code into the file：

<!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页面,and verify that the output shows no errors,Then you will see an effect similar to the following：

七、Modify the style of vector tiles

as described earlier,These vector tiles are rendered in the client,So we only need to change the relevant style commands in the client application to modify the style of the vector tiles,而不需要对GeoServer（服务器端）进行任何更改,也不必在GeoServerRegenerate vector tiles in .下面,We illustrate a few simple modification operations.
1、Change the fill color to 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、保存文件并刷新浏览器,You can see that the fill color of the map has changed to the effect as shown below：

3、We can also build attribute-based styles.This dataset contains one attribute（region_un）,This attribute contains the region in which the country is located.Let's highlight African countries by adding another style definition below the existing style.

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

4、Replaces existing style functions：

function simpleStyle(feature) {
    return style_simple;
}

Replace with the following：

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

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

如上图所示,You can see that the fill color of the African region has been changed to yellow.

八、参考资料

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

原网站

版权声明
本文为[thinking barefoot]所创，转载请带上原文链接，感谢
https://yzsam.com/2022/220/202208082055300969.html

当前位置：网站首页>GeoServer introductory study: 07 - release a larger multi-tiered TIF map data

GeoServer introductory study: 07 - release a larger multi-tiered TIF map data

边栏推荐

猜你喜欢

随机推荐