我正在尝试创建一个基于web的地图游戏与Openlayers。游戏将有三个缩放级别与不同的细节。我用传单做了一个，但它有一个已知的问题。现在我正在尝试opnelayer，但我遇到了多个问题。
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, see https://caniuse.com/#feat=pointer -->
<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 ImageLayer from 'ol/layer/image'
import Static from 'ol/source/ImageStatic';
import View from 'ol/View';
import XYZ from 'ol/source/XYZ';
import Projection from 'ol/proj/Projection';
import { getCenter } from 'ol/extent';
const extentLayer = [0, 0, 1400, 800];
const extentView = [-28000000, -16000000, 28000000, 24000000];
const projectionView = new Projection({
code: 'pixel-map',
units: 'pixels',
extent: extentView,
});
const tileLayer = new TileLayer({
source: new XYZ({
url: '/tiles/{z}/{x}/{y}.png',
wrapX: false,
tileSize: [280, 400],
zoom: 0,
minZoom: 2,
maxZoom: 4,
}),
extentLayer,
});
const view = new View({
projectionView,
center: getCenter(extentView),
zoom: 0,
minZoom: 2,
maxZoom: 4,
extent: extentView
});
const map = new Map({
target: 'map',
layers: [
tileLayer,
],
view
});
程度我的基础图像是[1400,800]。我把它分成了10块(5x2)。在下一个缩放级别上，一个贴图被分成四个更详细的贴图(任何缩放级别上的所有贴图都是[280,400])。最后两个贴图[4,0]和[4,1]不是由地图请求的。相反，它会尝试加载我根本没有的第三行贴图。我想一定是视野范围的问题。
我已经多次阅读文档，但我无法解决这些问题。我试图遵循一些例子(没有很多)，使视图范围相同的图像，但它没有工作，我最终与大值，只有他们显示瓷砖。
您需要为source指定投影，并且应该为tile网格和投影使用相同的范围
const extent = [0, 0, 1400, 800];
const projection = new Projection({
code: 'pixel-map',
units: 'pixels',
extent,
});
const tileLayer = new TileLayer({
source: new XYZ({
url: '/tiles/{z}/{x}/{y}.png',
tileSize: [280, 400],
projection,
maxZoom: 2,
maxResolution: 1,
}),
});
const view = new View({
projection,
center: getCenter(extent),
zoom: 0,
});
const map = new Map({
target: 'map',
layers: [
tileLayer,
],
view
});