其中包括 leaflet 和 mapbox。
WMTS:
var vectorLayerUrl = "http://localhost:8088/geoserver/gwc/service/wmts?"+
"REQUEST=GetTile&SERVICE=WMTS&VERSION=1.0.0&LAYER=traffic:test_road" +
"&STYLE=&TILEMATRIX=EPSG:900913:{z}&TILEMATRIXSET=EPSG:900913&" +
"FORMAT=application/x-protobuf;type=mapbox-vector&TILECOL={x}&TILEROW={y}";
TMS:
vectorLayerUrl = "http://localhost:8088/geoserver/gwc/service/tms/1.0.0/"+
"traffic:test_road@EPSG%3A900913@pbf/{z}/{x}/{y}.pbf";
- leaflet
L.vectorGrid.protobuf(vectorLayerUrl, {
layerURL: vectorLayerUrl,
rendererFactory: L.canvas.tile,
vectorTileLayerStyles: getVectorStyles("test_road", "speed"),
// tms: true, // 如果使用 TMS,则必须开启
}).addTo(map);
注意:如果使用TMS,则需要设置属性:
tms: true
- mapbox
var vectorLayer = {
"id": 'road-layer',
"type": "line",
"source": {
// "scheme": 'tms', // 如果使用 TMS,则必须开启
"type": 'vector',
"tiles": [vectorLayerUrl]
},
"source-layer": layerName,
"layout": {
"line-join": "round",
"line-cap": "round"
},
"paint": {
"line-color": getLineStyle('speed'),
"line-width": 3,
'line-opacity': 0.9
},
'minzoom': 8
};
map.addLayer(vectorLayer);
注意:如果使用TMS,则需要设置属性:
"scheme": 'tms'