尝试在 XYZ 源上使用 minZoom 时出现内存问题

Question

我正在尝试设置最小缩放比例以在 OpenLayers 的地图中显示 XYZ 源，但每当我设置它时，整个地图都会出现内存问题并崩溃。 maxZoom 工作正常。

我最初在 React 中使用 OpenLayers，但在运行解决这个问题后，我尽可能地剥离它以查看是否可以修复它（我不能）。这是我的代码：

import 'ol/ol.css';
import {Map, View} from 'ol';
import TileLayer from 'ol/layer/Tile';
import OSM from 'ol/source/OSM';
import XYZ from 'ol/source/XYZ.js';

const map = new Map({
  target: 'map',
  layers: [
    new TileLayer({
      source: new OSM()
    }),
    new TileLayer({
      source: new XYZ({
        url: 'http://myserver.com/tiles/{z}/{x}/{y}/',
        minZoom: 14,
        maxZoom: 19
      })
    })
  ],
  view: new View({
    center: [0, 0],
    zoom: 3
  })
});

我打算做的是在缩放级别 3 加载地图，然后当您缩放到级别 14 时，myserver.com 瓦片开始显示。使用上面的代码，页面只会加载和加载，直到 Chrome 显示 "Paused before potential out-of-memory crash"（Firefox 基本相同）。如果我去掉这一行：

minZoom: 14,

加载正常。我试过将 minZoom 设置为不同的值，但没有成功。

Answer 1

maxResolution 将是图块在缩放级别 14 时的分辨率。它是唯一的，所以稍微增加它以包括级别 14，然后图层将仅在级别 14 和更高级别可见

import 'ol/ol.css';
import {Map, View} from 'ol';
import TileLayer from 'ol/layer/Tile';
import OSM from 'ol/source/OSM';
import XYZ from 'ol/source/XYZ.js';
import {createXYZ} from 'ol/tilegrid';

const map = new Map({
  target: 'map',
  layers: [
    new TileLayer({
      source: new OSM()
    }),
    new TileLayer({
      source: new XYZ({
        url: 'http://myserver.com/tiles/{z}/{x}/{y}/',
        maxZoom: 19
      }),
      maxResolution: createXYZ().getResolution(14) * 1.01
    })
  ],
  view: new View({
    center: [0, 0],
    zoom: 3
  })
});

如果您希望图层保持可见但在缩放 19 后不显示任何附加细节 maxZoom: 19 就足够了。如果不希望它可见，请在图层上设置 minResolution: createXYZ().getResolution(19)（包含最小分辨率）。

尝试在 XYZ 源上使用 minZoom 时出现内存问题

Memory issue when trying to use minZoom on XYZ source

javascript

openlayers