打开图层压缩的图块，直到页面缩放

Question

初始加载时，地图图块被压扁或有时无法正确显示，如下图所示。当页面放大和缩小（不是地图）时，这是固定的。

这是在 2K 屏幕上查看页面时的情况，有什么解决方法的建议吗？

Answer 1

我仍然不确定为什么会发生这种情况，但是我发现在加载完成后调用地图上的 updateSize 方法可以解决问题。

我在我用来跟踪磁贴何时加载的方法中使用它：

checkTilesLoaded() {
    let totalStarted = 0;
    let totalLoaded = 0;

    this.state.source.on('tileloadstart', () => {
        totalStarted += 1;
    });

    this.state.source.on('tileloaderror', () => {
        totalLoaded += 1;

        if (totalLoaded === totalStarted) tilesLoaded();
    });

    this.state.source.on('tileloadend', () => {
        totalLoaded += 1;

        if (totalLoaded === totalStarted) tilesLoaded();
    });

    const tilesLoaded = () => {

        this.map.updateSize();

        this.setState({
            mapLoaded: true
        });
    }
}

打开图层压缩的图块，直到页面缩放

Open Layers squished tiles until page zoomed

javascript

openlayers