如何在OpenLayers中使用EPSG:3857时缩小时仅显示单个世界？

要在EPSG:3857投影下实现缩放级别0时只显示单个世界，你需要修正以下代码问题：

核心问题分析 #

你之前的代码错误在于给TileGrid传入了EPSG:4326的范围，而非转换后的EPSG:3857范围；同时缺少对视图的范围限制，导致地图可被拖出单个世界区域。

修改后的完整代码 #

const sourceEPSG = "EPSG:4326";
const epsg = 'EPSG:3857';
const osmExtent = [-180, -85, 180, 85];
const wholeExtent = [-180, -90, 180, 90];

// 将坐标范围转换为EPSG:3857格式
const epsgOSMExtent = ol.proj.transformExtent(osmExtent, sourceEPSG, epsg);
const epsgWholeExtent = ol.proj.transformExtent(wholeExtent, sourceEPSG, epsg);

// 设置EPSG:3857投影的有效显示范围
ol.proj.get(epsg).setExtent(epsgOSMExtent);

const osm = new ol.source.OSM();

// 关键修正：给TileGrid传入EPSG:3857格式的范围
osm.setTileGridForProjection(
  epsg,
  ol.tilegrid.createXYZ({ extent: epsgOSMExtent })
);

const tileLayer = new ol.layer.Tile({ source: osm });

const map = new ol.Map({
  target: "map",
  layers: [tileLayer],
  view: new ol.View({
    projection: epsg,
    center: [0, 0],
    zoom: 3,
    // 限制视图边界，禁止拖出单个世界区域
    extent: epsgOSMExtent,
    // 锁定最小缩放级别为0，确保初始状态为单个世界
    minZoom: 0
  }),
  controls: ol.control.defaults.defaults({ attribution: false, zoom: false })
});

#map {
  width: 1024px;
  aspect-ratio: 360/170;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/openlayers/10.2.1/ol.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/openlayers/10.2.1/dist/ol.min.js"></script>

<div style="background-color: red;" id="map"></div>

关键修改说明 #

• TileGrid范围修正：ol.tilegrid.createXYZ的extent参数必须使用转换后的epsgOSMExtent（EPSG:3857坐标），确保瓦片仅在单个世界范围内加载。
• 视图边界限制：给ol.View添加extent属性，阻止用户拖动地图超出单个世界区域。
• 投影范围设置：保留ol.proj.get(epsg).setExtent(epsgOSMExtent)，确保投影的有效边界正确匹配显示需求。

修改后，缩放级别0时地图将仅显示单个世界，且无法拖动到重复的世界区域。

内容的提问来源于stack exchange，提问作者Eric G