基于OpenLayers创建非地理自定义切片地图遇问题求助

背景 #

我正在用OpenLayers为网页游戏制作自定义切片地图，需要支持3个不同细节层级的缩放。之前用Leaflet实现过，但Leaflet存在已知问题，转用OpenLayers后遇到了两个关键问题。

现有代码 #

index.html #

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Custom Canvas Tiles</title>
    <link rel="stylesheet" href="node_modules/ol/ol.css">
    <style>
      *, body {
        margin: unset;
      }
      .map {
        width: 100%;
        height: 100vh;
      }
    </style>
  </head>
  <body>
    <div id="map" class="map"></div>
    <!-- Pointer events polyfill for old browsers -->
    <script src="https://unpkg.com/elm-pep@1.0.6/dist/elm-pep.js"></script>
    <script type="module" src="main.js"></script>
  </body>
</html>

main.js #

import Map from 'ol/Map';
import TileLayer from 'ol/layer/Tile';
import View from 'ol/View';
import XYZ from 'ol/source/XYZ';
import Projection from 'ol/proj/Projection';
import { getCenter } from 'ol/extent';
import TileGrid from 'ol/tilegrid/TileGrid'; // 新增导入

// 基础级别（z=2）的图像尺寸
const baseWidth = 1400;
const baseHeight = 800;
// 切片尺寸
const tileSize = [280, 400];
// 三个缩放级别：z=2,3,4
const zoomLevels = [2, 3, 4];

// 计算每个级别的分辨率：基础级别分辨率为1，每升一级分辨率减半
const resolutions = zoomLevels.map(zoom => 1 / Math.pow(2, zoom - 2));

// 自定义投影，范围对应最高级别（z=4）的像素范围
const maxWidth = baseWidth * Math.pow(2, zoomLevels[zoomLevels.length-1] - zoomLevels[0]);
const maxHeight = baseHeight * Math.pow(2, zoomLevels[zoomLevels.length-1] - zoomLevels[0]);
const projection = new Projection({
  code: 'pixel-map',
  units: 'pixels',
  extent: [0, 0, maxWidth, maxHeight],
});

// 自定义切片网格，匹配你的切片方案
const tileGrid = new TileGrid({
  origin: [0, 0], // 切片原点（左上角）
  tileSize: tileSize,
  resolutions: resolutions,
  zoomFactor: 2,
  minZoom: zoomLevels[0],
  maxZoom: zoomLevels[zoomLevels.length-1],
});

const tileLayer = new TileLayer({
  source: new XYZ({
    url: '/tiles/{z}/{x}/{y}.png',
    wrapX: false,
    tileGrid: tileGrid, // 使用自定义切片网格
    minZoom: zoomLevels[0],
    maxZoom: zoomLevels[zoomLevels.length-1],
  }),
  extent: [0, 0, baseWidth, baseHeight], // 基础级别范围
});

const view = new View({
  projection: projection,
  center: getCenter([0, 0, maxWidth, maxHeight]),
  zoom: zoomLevels[0], // 初始缩放设为最低级别（z=2）
  minZoom: zoomLevels[0],
  maxZoom: zoomLevels[zoomLevels.length-1],
  extent: [0, 0, maxWidth, maxHeight],
  constrainResolution: true, // 强制对齐到整数缩放级别
});

const map = new Map({
  target: 'map',
  layers: [tileLayer],
  view: view
});

问题分析与解决 #

缩放问题 #

• 问题根源：你设置了视图的minZoom:2，但初始zoom:0，OpenLayers会自动将视图调整到允许的最低缩放级别（即2），所以地图从级别2开始加载。同时，XYZ源的zoom参数无效，需通过minZoom和maxZoom控制层级范围。
• 解决办法：
  • 将视图的初始zoom值设为与minZoom一致（即2）。
  • 确保源和视图的minZoom/maxZoom完全匹配，这里设为2、3、4三个级别，对应你的三个细节层级。
  • 添加constrainResolution: true，强制视图只能停在你定义的整数缩放级别上。

范围问题 #

• 问题根源：你使用了过大的视图范围，且未自定义切片网格，导致OpenLayers按默认球面墨卡托网格计算切片位置，错误请求不存在的第三行切片，同时漏请求x=4的切片。
• 解决办法：
  • 定义自定义TileGrid，匹配你的切片规则：原点设为图像左上角，分辨率按缩放级别减半（每升一级切片数量翻倍），tileSize固定为280x400。
  • 投影范围对应最高缩放级别的图像尺寸（z=4时，图像是基础尺寸的4倍：5600x3200），确保视图不会超出实际地图范围。
  • 图层范围设为基础级别的图像尺寸（1400x800），避免加载无关区域的切片。

内容的提问来源于stack exchange，提问作者Asad ali