时间戳

首页 > 解决方案 > 尝试在 XYZ 源上使用 minZoom 时出现内存问题

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

问题描述

我正在尝试设置最小缩放，以在 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 设置为不同的值，但没有运气。

标签： javascriptopenlayers

解决方案

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）。

推荐阅读