一、首先要切片
注意首先要下载 GeoServer 的矢量切片插件(参见:https://zhuanlan.zhihu.com/p/62751184)
安装完矢量切片插件后,发布图层时,需要勾选如下:
然后找到发布的矢量切片图层
打开预览,并且查看浏览器中的源码,查看它的调用方式(在后面OpenLayers调用它时可以用同样的方式去调用):
二、OpenLayers 调用
<template>
<div>
<div id="map" ref="rootmap">
</div>
</div>
</template>
<script>
import "ol/ol.css";
import { Map, View } from "ol";
import {VectorTile as VectorLayerTile,Tile} from 'ol/layer'
import {Style,Fill,Stroke} from 'ol/style';
import {VectorTile as VectorSourceTile,OSM,WMTS} from 'ol/source'
import {createXYZ} from 'ol/tilegrid';
import WMTSTileGrid from 'ol/tilegrid/WMTS'
import MVT from 'ol/format/MVT'
import {Projection} from 'ol/proj'
import {GeoJSON} from 'ol/format'
export default {
name: 'OlVectorTiles',
data() {
return {
map: null,
baseUrl: 'http://localhost:8080/geoserver/gwc/service/wmts',
params: null,
gridsetName: null
};
},
mounted() { //可以出来结果
this.gridsetName = 'EPSG:4326',
this.params = {
'REQUEST': 'GetTile',
'SERVICE': 'WMTS',
'VERSION': '1.0.0',
'LAYER': 'test-world:opengeo_countries',
'STYLE': '',
'TILEMATRIX': this.gridsetName + ':{z}',
'TILEMATRIXSET': this.gridsetName,
'FORMAT': 'application/json;type=geojson',
'TILECOL': '{x}',
'TILEROW': '{y}'
};
//切片名
let matrixIds = ['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'];
//分辨率
let 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];
//底图
let tileOSM = new Tile({
source: new OSM()
});
//切片策略
let tileGrid = new WMTSTileGrid({
tileSize: [256,256],
extent: [-180.0,-90.0,180.0,90.0], //范围
origin: [-180.0, 90.0], //切片原点
resolutions: resolutions, //分辨率
matrixIds: matrixIds //层级标识列表,与地图级数保持一致
});
//设置地图投影
let projection = new Projection({
code: 'EPSG:4326',
units: 'degrees',
axisOrientation: 'neu'
});
let vectorSource = new VectorSourceTile({
url: this.urlConstruct(),
format: new GeoJSON({}), //切片格式
projection: projection,
tileGrid: tileGrid
});
let vectorLayer = new VectorLayerTile({
source: vectorSource,
wrapX:false,
});
let views = new View({
center: [0, 0],
projection: projection,
zoom: 2,
resolutions: resolutions,
extent: [-180.0,-90.0,180.0,90.0]
});
this.map = new Map({
layers: [tileOSM, vectorLayer],
view: views,
target: 'map',
});
},
methods:{
urlConstruct(){
let url = this.baseUrl + '?';
for (let param in this.params){
url = url + param + '=' + this.params[param] + '&';
}
url = url.slice(0, -1);
return url;
}
}
};
</script>
<style>
#map{
height:800px;
width: 1400px;
}
/*隐藏ol的一些自带元素*/
.ol-attribution,.ol-zoom { display: none;}
</style>