Ошибка памяти при попытке использовать minZoom на XYZ-источнике

Question

Я пытаюсь установить минимальное увеличение, при котором для отображения источника XYZ на моей карте в OpenLayers, но всякий раз, когда я его устанавливаю, у всей карты возникает проблема с памятью и происходит сбой. maxZoom работает просто отлично.

Первоначально я использовал OpenLayers в React, но, столкнувшись с этой проблемой, я сократил ее как можно больше, чтобы посмотреть, смогу ли я это исправить (я не смог). Вот мой код сейчас:

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 включено).