我在Geoserver（2.13.0）上有用MSSQL DataStore配置的图层 . 我为同一版本安装了矢量图块扩展 . 安装后，通过选择下拉结果显示TileLayers预览pbf .
http://localhost:8080/geoserver/gwc/demo/mystate:State?gridSet=EPSG:900913&format=application/x-protobuf;type=mapbox-vector
而且，当来自OpenLayers客户端的请求同样结果时 .
<html>
<head>
<title>Vector tiles</title>
<script src="./js/build-ol.js"></script>
<link rel="stylesheet" href="./css/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 gridsetName = 'EPSG:900913';
var gridNames = ['EPSG:900913:0', 'EPSG:900913:1', 'EPSG:900913:2', 'EPSG:900913:3', 'EPSG:900913:4', 'EPSG:900913:5', 'EPSG:900913:6', 'EPSG:900913:7', 'EPSG:900913:8', 'EPSG:900913:9', 'EPSG:900913:10', 'EPSG:900913:11', 'EPSG:900913:12', 'EPSG:900913:13', 'EPSG:900913:14', 'EPSG:900913:15', 'EPSG:900913:16', 'EPSG:900913:17', 'EPSG:900913:18', 'EPSG:900913:19', 'EPSG:900913:20'];
var baseUrl = 'http://localhost:8080/geoserver/gwc/service/wmts';
var style = 'StateStyle';
var format = 'application/x-protobuf;type=mapbox-vector';
var infoFormat = 'text/html';
var layerName = 'myState:State';
var projection = new ol.proj.Projection({
code: 'EPSG:900913',
units: 'm',
axisOrientation: 'neu'
});
var resolutions = [156543.03390625, 78271.516953125, 39135.7584765625, 19567.87923828125, 9783.939619140625, 4891.9698095703125, 2445.9849047851562, 1222.9924523925781, 611.4962261962891, 305.74811309814453, 152.87405654907226, 76.43702827453613, 38.218514137268066, 19.109257068634033, 9.554628534317017, 4.777314267158508, 2.388657133579254, 1.194328566789627, 0.5971642833948135, 0.29858214169740677, 0.14929107084870338];
params = {
'REQUEST': 'GetTile',
'SERVICE': 'WMTS',
'VERSION': '1.0.0',
'LAYER': layerName,
'STYLE': style,
'TILEMATRIX': gridsetName + ':{z}',
'TILEMATRIXSET': gridsetName,
'FORMAT': format,
'TILECOL': '{x}',
'TILEROW': '{y}'
};
function constructSource() {
var url = baseUrl + '?'
for (var param in params) {
url = url + param + '=' + params[param] + '&';
}
url = url.slice(0, -1);
var source = new ol.source.VectorTile({
url: url,
format: new ol.format.MVT({}),
projection: projection,
tileGrid: new ol.tilegrid.WMTS({
tileSize: [256, 256],
origin: [-2.003750834E7, 2.003750834E7],
resolutions: resolutions,
matrixIds: gridNames
}),
wrapX: true,
});
return source;
}
var layer = new ol.layer.VectorTile({
source: constructSource()
});
var view = new ol.View({
center: [0, 0],
zoom: 2,
projection: projection,
extent: [-20037508.34, -20037508.34, 20037508.34, 20037508.34]
});
var map = new ol.Map({
layers: [layer],
target: 'map',
view: view
});
map.getView().fit([-13603589.920418553, 6450443.998733485, -12407892.278044553, 7757990.05940472], map.getSize());
</script>
</body>
</html>
但在同一个例子中，我想使用GetTile为wmts应用样式 . 我根据documentation尝试了以下代码不工作：
<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 = 'myState:State';
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: 'http://localhost:8080/geoserver/gwc/service/wtms/1.0.0/' + layer +
'@EPSG%3A'+projection_epsg_no+'@pbf/{z}/{x}/{-y}.pbf'
})
})]
});
</script>
</body>
</html>
您能否建议我如何使用ol.format.MVT（）从GeoServer应用我的自定义样式和getTile？