Openlayers Pbf 矢量瓦片性能不佳

Question

因此，我在平移/放大和縮小直到渲染圖塊之前使用 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 選項，但沒有幫助。 另外我在這里你可以看到在縮放/平移地圖時口吃，它只是不平滑。 任何幫助將不勝感激

Answer 1

每次縮放、平移等都會重新設計功能，如果每次都重新定義樣式，它會很慢。 如果您可以將樣式保存為每個特征一次的變量，則在后續縮放時從變量中獲取樣式，而不是再次創建樣式。