是否可以在 Openlayers 中获取 XYZ 源的中心(或范围)? (我不是在谈论获取视图的中心,而是获取源本身定义的地图的中心。)
VectorSource
确实有 getExtent
函数,但不幸的是 XYZ 没有这样的方法。
不幸的是,使用 source.getTileGrid().getExtent()
似乎不起作用;这是一个最小的可重现示例:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/ol.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/ol.css">
</head>
<body>
<div id="map" class="map"></div>
<script type="text/javascript">
const src = new ol.source.XYZ({
url: 'https://s3.eu-central-1.amazonaws.com/old-maps/the-hague-1944/tiles/{z}/{x}/{y}.jpg'
})
const ext = src.getTileGrid().getExtent();
console.log(ext);
</script>
</body>
</html>
(我用了这张地图。)
这会返回[-20037508.342789244, -20037508.342789244, 20037508.342789244, 20037508.342789244]
,就好像中心是 [0, 0, 0, 0]。当然事实并非如此,如果我使用不同的地图,结果的范围完全相同。
# Get the geographic coordinates of the file's left top and right bottom
lt = mercantile.lnglat(gt[0], gt[3])
rb = mercantile.lnglat(gt[0] + (ds.RasterXSize * gt[1]),
gt[3] + (ds.RasterYSize * gt[5]))
您需要使用测试地图来查看瓦片正在加载的位置以及缩放级别,方法是将其与 TileDebug 层叠加。 这表明图块在缩放级别 10 到 16 之间可用,在级别 16 时,X 值范围为 33503 到 33583,Y 值范围为 21602 到 21655。有了这些信息,您可以设置一个受约束的图块网格,其中只应请求有效的图块:
const tilegrid = ol.tilegrid.createXYZ({maxZoom: 16});
const extent = ol.extent.createEmpty();
ol.extent.extend(extent, tilegrid.getTileCoordExtent([16, 33504, 21602]))
ol.extent.extend(extent, tilegrid.getTileCoordExtent([16, 33583, 21655]))
const src =new ol.source.XYZ({
url: 'https://s3.eu-central-1.amazonaws.com/old-maps/the-hague-1944/tiles/{z}/{x}/{y}.jpg',
tileGrid: new ol.tilegrid.TileGrid({
origins: tilegrid.getResolutions().map((r, i) => tilegrid.getOrigin(i)),
resolutions: tilegrid.getResolutions(),
tileSizes: tilegrid.getResolutions().map((r, i) => tilegrid.getTileSize(i)),
minZoom: 10,
extent: extent,
})
});
范围将以 EPSG:3857 坐标表示,如果需要,您可以使用 transformExtent
转换为 LonLat。