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提示“在潜在的内存不足崩溃之前已暂停”（对于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)（包括minResolution）。

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

1 个答案: