Openlayers Pbf 矢量切片性能不佳答案

【问题标题】：Openlayers Pbf vector tiles bad performanceOpenlayers Pbf 矢量切片性能不佳
【发布时间】：2021-01-17 03:15:22
【问题描述】：

因此，在渲染完成后，我在平移/放大和缩小直到渲染图块之前使用 pbf 矢量图块时遇到性能问题（例如，如果您在渲染图块之前尝试放大和平移，屏幕将很快冻结）一切顺利。可能需要注意的是，我正在为 android/IOS 实现离线地图功能，并且我已经在我的设备上存储了 pbf 切片。所以这就是我目前正在做的事情：

// create vector tile layer
const layer = new VectorTileLayer({
  source: new VectorTileSource({
    format: new MVT(),
    url: 'offline-pbfs/{z}/{x}/{y}.pbf', // Url on device
    tileLoadFunction: this.tileload,
    maxZoom: 14
  })
});

// custom load tiles function for loading tiles from device storage
private tileload = (tile, url) => {
  tile.setLoader((extent, resolution, projection) => {
    this.file.readAsArrayBuffer(this.file.dataDirectory, url)
      .then(data => {
        const format: any = tile.getFormat();
        tile.setFeatures(format.readFeatures(data, {extent}));
    })
    .catch(err => logger.error(err, 'Error loading tile', url));
  });
}

// obtain and apply osm-bright-style.json
this.offlineMapService.getOfflineMapStyle().subscribe(styleData => {
  applyStyle(layer, styleData, 'openmaptiles').then((_: any) => {
    this.map.addLayer(layer);
  });
})

我尝试过使用 renderOrder、renderBuffer、renderMode、declutter 选项，但没有帮助。另外我here 你可以看到在缩放/平移地图时出现口吃，而且不流畅。任何帮助将不胜感激

【问题讨论】：

标签： openlayers openlayers-3 openlayers-5 openlayers-6 vector-tiles

【解决方案1】：

每次缩放、平移等都会重新设置特征的样式，如果每次都重新定义样式，则速度会很慢。如果您可以将样式保存为每个要素一次的变量，那么在随后的缩放中从变量中获取样式，而不是再次创建样式。

【讨论】：