OpenLayers Vector tiles Styling Optimization - openlayers-6

Question

I am new to openlayers and vector layer and i am facing performance problem. I have 3 layers and each layer containing thousands of features. Is it the correct way of styling the layer or is there anything else we can do to further make it even faster even on low end computer. What else can be done in case of geoserver layergroup. How can we efficiently style it since it has many layers and how to get the layers from the layer group.
var gridsetName = "EPSG:900913";
var baseUrl = "http://localhost:8080/geoserver/gwc/service/wmts";
var style = "";
var format = "application/vnd.mapbox-vector-tile";
var layerCache = {};
var gardening_area_uncertainity = new Style({
stroke: new Stroke({
color: "rgba(200,20,20,0.8)",
width: 2,
}),
});
var gardening_point = new Style({
image: new Circle({
stroke: new Stroke({
width: 1,
color: "red",
}),
radius: 2,
}),
});
var layers = [
{
layer: "city:gardenings_point_uncertainity",
style: gardening_area_uncertainity,
},
{ layer: "city:gardening_aiming_area", style: gardening_area_uncertainity },
{ layer: "city:gardening_aiming_point", style: gardening_point },
];
var key = 0;
var styleForLayer = null;
var layerFeature = function (feature) {
//console.log("Type is:",feature.type_)
if (feature.get("layer") === "gardening_aiming_point") key = 1;
else if (feature.get("layer") === "gardenings_point_uncertainity") key = 2;
else if (feature.get("layer") === "gardening_aiming_area") key = 3;
styleForLayer = layerCache[key];
if (!styleForLayer) {
switch (feature.get("layer")) {
case "gardening_aiming_area":
styleForLayer = gardening_area_uncertainity;
break;
case "gardenings_point_uncertainity":
styleForLayer = gardening_area_uncertainity;
break;
case "gardening_aiming_point":
styleForLayer = gardening_point;
break;
}
layerCache[key] = styleForLayer;
}
return styleForLayer;
};
var i;
var view = new View({
center: [0, 0],
zoom: 2,
// constrainResolution:true,
extent: [-20037508.34, -20037508.34, 20037508.34, 20037508.34],
});
var map = new Map({
layers: [
new TileLayer({
preload: Infinity,
source: new OSM({ cacheSize: 20000 }),
}),
],
target: "map",
view: view,
});
map
.getView()
.fit([-20037508.34, -20037508.34, 20037508.34, 20037508.34], map.getSize());
map.on("moveend", (evt) => {
console.log(map.getView().getZoom());
});
function constructSource() {
var url = baseUrl + "?";
for (var param in params) {
url = url + param + "=" + params[param] + "&";
}
url = url.slice(0, -1);
var source = new VectorTileSource({
url: url,
format: new MVT({}),
tileGrid: new WMTS({
tileSize: [256, 256],
origin: [-2.003750834e7, 2.003750834e7],
resolutions: resolutions,
}),
});
return source;
}
for (i = 0; i < layers.length; i++) {
//console.log('Layer',layers[i])
var params = {
REQUEST: "GetTile",
SERVICE: "WMTS",
VERSION: "1.0.0",
LAYER: layers[i].layer,
STYLE: style,
TILEMATRIX: gridsetName + ":{z}",
TILEMATRIXSET: gridsetName,
FORMAT: format,
TILECOL: "{x}",
TILEROW: "{y}",
};
var layer = new VectorTileLayer({
source: constructSource(),
preload: Infinity,
renderMode: "image",
style: layers[i].style,
});
map.addLayer(layer);
}