一、為什麼使用矢量切片（vector tiles）？

矢量切片的優點是：

  • 數據在客戶端渲染（例如，OpenLayers），而不是在伺服器端。這允許不同的地圖應用程序使用不同的樣式去渲染一個地圖，而不需要事先在伺服器端（比如GeoServer）進行預先的樣式配置。
  • 矢量切片的大小通常比圖片小，這可以使得數據傳輸得更快以及使用更低的帶寬。
  • GeoServer內嵌的GeoWebCache可以有效地存儲矢量切片數據。由於樣式由客戶端配置，而不是在伺服器配置，因此GeoWebCache只需要存儲矢量切片，而不需要存儲樣式配置。
  • 由於在客戶端上可以獲取到矢量數據，所以不需要相應地增加帶寬，就可以繪製解析度很高的地圖。
  • 客戶端可以本地訪問實際的要素信息（屬性信息和幾何信息），所以可以進行非常複雜和精細的要素渲染。

另一方面，矢量切片的主要缺點是需要對地理數據進行預處理，以便客戶端能夠完成所需的繪圖（類似於圖像瓦片地圖的預處理數據）。考慮到這一點，矢量切片只能用於渲染。（怪叔叔：雖然是矢量格式，但是它們不可編輯，矢量切片是為了讀取和渲染優化的格式，如果想在客戶端編輯要素，最適合的是使用OGC的WFS）。

二、矢量切片格式

GeoServer可以生成三種格式的矢量切片：GeoJSON，TopoJSON，MapBox Vector（MVT）。這些矢量切片格式也得到OpenLayers和其他客戶端地圖引擎的支持。

注意：當使用矢量切片時，請確保使用最新的客戶端地圖引擎，老版的地圖引擎不支持矢量切片並會產生渲染錯誤。建議使用最新版的OpenLayers（目前最新版位v5.3.0）。

MVT是生產環境中首選的矢量切片格式。

三、安裝GeoServer的矢量切片插件

GeoServer的矢量切片插件是官方的插件，可以在GeoServer download頁面中下載。

1.下載和你的GeoServer版本對應的矢量切片插件。

注意：一定要版本對應。

2. 將下載的內容解壓（jar包）並複製到GeoServer的WEB-INF/lib文件夾下。

3. 重新啟動GeoServer。

接下來，驗證矢量切片擴展是否已安裝成功：

1. 打開GeoServer的Web管理界面。

2. 單擊"圖層"並隨意選擇一個矢量圖層。

3. 點擊"TileCaching"面板

4. 滾動頁面到"Tile Image Formats"部分，除了標準的GIF/PNG/JPEG格式之外，你還應該看到以下內容：

如果你看到了這些選項，那麼就表示擴展已經安裝成功了。

四、發布GeoWebCache中的矢量切片

我們將通過GeoWebCache發布矢量切片，並在自定義的OpenLayers中發布發布該圖層。

在本教程中，我們將使用opengeo:countries來展示這些功能，只要稍加處理，任何圖層都可以具有這樣的功能。

註：下載Admin 0 - Countries shapefile並將該圖層發布為opengeo:countries。

1. 在GeoServer管理界面，單擊"Tile Layers"。

2. 在圖層列表中單擊"opengeo:countires"。

3. 默認情況下，切片格式是image/jpeg和image/png。選中下列矢量切片格式：

4. 點擊"保存"。

我們的這一個圖層已經準備好了。

五、創建OpenLayers應用程序

1. 在GeoServer數據目錄中創建一個www/vectortiles文件夾。

2. 下載最新版本的OpenLayers。

3. 將以下文件從下載的壓縮包裏解壓到步驟1創建的目錄中：

  • ol.js
  • ol-debug.js
  • ol.css

4. 在文本編輯器中，創建具有以下內容的新文件：

<!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, // oversampling when > 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保存在上面創建的文件夾中。

6. 導航到 http//localhost:8080/geoserver/www/vectortiles/index.html 並驗證輸出是否顯示沒有任何錯誤。

注意：如果你的GeoServer伺服器部署在 http://localhost:8080/geoserver/ 以外的伺服器上，那麼請自行調整上面的URL。

這些矢量切片是由OpenLayers客戶端渲染的。

六、為矢量切片修改樣式

由於這些矢量切片是在客戶端中渲染的，所以我們只需要更改客戶端應用程序中相關的樣式命令就能修改矢量切片的樣式，而不需要對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. 保存文件並刷新瀏覽器。


推薦閱讀：
相關文章