1

そのため、タイルがレンダリングされるまでパン/ズームインおよびズームアウトしているときに 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 オプションをいじってみましたが、役に立ちませんでした。また、私はここで、ズーム/パン中にマップがスタッターし、スムーズではないことを確認できます。どんな助けでも大歓迎です

4

1 に答える 1