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