Web GIS系列：
1.搭建簡易Web GIS網站：使用GeoServer+PostgreSQL+PostGIS+OpenLayers3
2.使用GeoServer+QGIS發布WMTS服務
3.使用GeoServer+OpenLayers發布和調用WMTS、Vector Tile矢量切片服務 .
4.Leaflet入門：添加點線面並導入GeoJSON數據
上一篇文章介紹了如何發布WMTS服務，這篇文章將繼續介紹如何調用WMTS服務。此外，還將介紹如何發布和調用矢量切片服務。
調用WMTS服務
OpenLayers3中提供了調用WMTS服務的接口。其主要思想是先構建切片信息，再傳入服務信息即可。切片信息包括切片名、切片大小、切片范圍等。這些切片信息都可以在GeoServer中Gridsets中找到，按照其中的切片信息構建相應的請求方法即可。
具體代碼如下：
//切片名
var gridNames = ['EPSG:4326:0', 'EPSG:4326:1', 'EPSG:4326:2', 'EPSG:4326:3', 'EPSG:4326:4', 'EPSG:4326:5', 'EPSG:4326:6', 'EPSG:4326:7', 'EPSG:4326:8', 'EPSG:4326:9', 'EPSG:4326:10', 'EPSG:4326:11', 'EPSG:4326:12', 'EPSG:4326:13', 'EPSG:4326:14', 'EPSG:4326:15', 'EPSG:4326:16', 'EPSG:4326:17', 'EPSG:4326:18', 'EPSG:4326:19', 'EPSG:4326:20', 'EPSG:4326:21'];
//切片大小
var resolutions = [0.703125, 0.3515625, 0.17578125, 0.087890625, 0.0439453125, 0.02197265625, 0.010986328125, 0.0054931640625, 0.00274658203125, 0.001373291015625, 6.866455078125E-4, 3.4332275390625E-4, 1.71661376953125E-4, 8.58306884765625E-5, 4.291534423828125E-5, 2.1457672119140625E-5, 1.0728836059570312E-5, 5.364418029785156E-6, 2.682209014892578E-6, 1.341104507446289E-6, 6.705522537231445E-7, 3.3527612686157227E-7];
//設置地圖投影
var projection = new ol.proj.Projection({
code: 'EPSG:4326',//投影編碼
units: 'degrees',
axisOrientation: 'neu'
});
//OSM地圖
var osmMap = new ol.layer.Tile({
source: new ol.source.OSM()
});
//地圖
var map = new ol.Map({
layers: [
osmMap,
new ol.layer.Tile({
source: new ol.source.WMTS({
//服務地址
url: 'http://localhost:8080/geoserver/gwc/service/wmts',
layer: 'your_layer_name',
//切片集
matrixSet: 'EPSG:4326',
format: 'image/png',
projection: projection,
//切片信息
tileGrid: new ol.tilegrid.WMTS({
tileSize: [256, 256],
extent: [-180.0, -90.0, 180.0, 90.0],//范圍
origin: [-180.0, 90.0],
resolutions: resolutions,
matrixIds: gridNames,
}),
//
style: 'KYH:CHINA',
wrapX: true
})
})
],
target: 'map2',
controls: ol.control.defaults({
attributionOptions: /** @type {olx.control.AttributionOptions} */ ({
collapsible: false
})
}),
view: new ol.View({
projection: projection,
})
});
map.getView().fit(bounds, map.getSize());
從中我們可以看到首先設置了切片名，切片大小等，之后新建一個ol.tilegrid.WMTS，將切片信息傳入，即可調用WMTS地圖服務。
效果如圖：
發布矢量切片Vector Tile服務
發布矢量切片Vector Tile服務可以參考官方文檔：安裝矢量切片插件
在這里，GeoServer是以插件的形式提供矢量切片發布服務的。方法是前往GeoServer官方網站中的下載頁面，在其中找到相對應的版本，找到插件列表中的Vector Tile即可下載。下載完成后，解壓縮，將4個jar文件拷貝到GeoServer/WEB-INF/lib中即可。之后重啟服務。
為了驗證插件是否安裝成功，選擇任意一個圖層，查看Tile Caching.如果圖中出現以下選項則說明插件安裝成功。
在Tile Layers中選擇相應的圖層，再選擇相應的格式，例如：EPSG:900913,就可以查看了。
調用Vector Tile服務
調用Vector Tile服務可以參考官方文檔：Vector Tiles Tutorial
這里使用了Mapbox的矢量切片格式。將其中的服務url改成自己的即可。代碼如下：
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'
})
})]
需要注意的是，與先前的發布不同，矢量切片服務發布之后是沒有樣式的。對於樣式，需要在前端使用OpenLayers寫相應的style，從而完成渲染。在這個案例中，只能使用EPSG:900913投影，如果需要修改投影，也同時需要修改tileGrid的相關參數。
PS：調用矢量切片可能會出現No 'Access-Control-Allow-Origin' header is present on the requested resource.報錯的情況，解決方法參見：解決Tomcat No 'Access-Control-Allow-Origin' header is present on the requested resource錯誤信息
最終效果如下圖：
所有的代碼請參見github: https://github.com/kkyyhh96/WebGIS
其中OpenLayers文件夾下的index.html文件。
或直接訪問: www.kkyyhh96.site/MapKYH
1.搭建簡易Web GIS網站：使用GeoServer+PostgreSQL+PostGIS+OpenLayers3
2.使用GeoServer+QGIS發布WMTS服務
3.使用GeoServer+OpenLayers發布和調用WMTS、Vector Tile矢量切片服務 .
4.Leaflet入門：添加點線面並導入GeoJSON數據