OpenLayers矢量图块样式优化

如何解决OpenLayers矢量图块样式优化

我是openlayers和vector层的新手，并且面临性能问题。我有3层，每层包含数千个功能。是对图层进行样式设置的正确方法，还是我们可以采取其他措施进一步提高图层的速度，即使在低端计算机上也是如此。对于Geoserver图层组，还可以执行其他操作。由于它具有许多层，我们如何有效地设置其样式以及如何从层组中获取这些层。

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,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,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);
}