使用JavaScript加载OpenLayers地图时，如何仅显示单个切片而非重复？

嘿，我懂你遇到的困扰——用XYZ源加载单个切片时，OpenLayers会自动把这个切片重复平铺来填满整个地图，完全不是你想要的效果。咱们可以通过限制图层和视图的范围，并匹配切片的对应缩放级别，来实现只显示单个切片的需求，具体操作如下：

问题根源 #

OpenLayers的XYZ瓦片源默认会根据当前视图的范围和缩放级别，自动重复请求瓦片以覆盖整个可视区域，所以单个切片就会被无限平铺。要阻止这种行为，我们得明确告诉图层「只在指定地理范围内显示这个切片」，同时限制地图视图不能超出这个范围。

具体实现步骤 #

1. 确定切片的地理范围：先明确你的切片对应EPSG:3857坐标系下的范围。假设你的切片是Zoom级别10下的标准256x256瓦片，以你设置的中心点为基准，计算出这个瓦片的精确范围。
2. 设置图层的extent属性：让切片图层仅在这个范围内可见，超出范围就不渲染。
3. 锁定视图的范围与缩放级别：确保地图不能拖动到切片范围外，并且只能在切片对应的缩放级别查看，避免缩放后切片重复或消失。

修改后的完整代码 #

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <title>tiles-test</title> 
    <link rel="stylesheet" href="ol.css" type="text/css"> 
    <script src="https://openlayers.org/en/v4.6.5/build/ol.js"></script> 
    <script src="http://code.jquery.com/jquery-3.2.1.min.js"></script> 
</head> 
<body> 
    <div id="map" style="width: 100%; height: 600px;"></div> <!-- 给地图设置固定高度 -->
    <script type="text/javascript"> 
        // 转换中心点到EPSG:3857坐标系
        const center = ol.proj.transform([30, 30], 'EPSG:4326', 'EPSG:3857');
        // 获取Zoom10级别下单个256x256瓦片的尺寸（单位：米）
        const zoom10TileSize = ol.tilegrid.getForProjection('EPSG:3857').getTileSize(10);
        // 计算单个切片对应的地理范围
        const tileExtent = ol.extent.fromCenterAndSize(center, zoom10TileSize, zoom10TileSize);

        var map = new ol.Map({ 
            layers: [ 
                new ol.layer.Tile({ 
                    source: new ol.source.OSM(), 
                }), 
                new ol.layer.Tile({ 
                    source: new ol.source.XYZ({ 
                        urls: ['../1.png'], // 仅保留单个切片地址
                        projection: 'EPSG:3857',
                        // 自定义瓦片网格，限定只加载Zoom10级别的瓦片
                        tileGrid: new ol.tilegrid.TileGrid({
                            extent: ol.proj.get('EPSG:3857').getExtent(),
                            resolutions: ol.tilegrid.getForProjection('EPSG:3857').getResolutions().slice(0, 11),
                            tileSize: 256
                        })
                    }),
                    extent: tileExtent // 图层仅在该范围内渲染
                }), 
            ], 
            target: 'map', 
            controls: ol.control.defaults({ 
                attributionOptions: ({ collapsible: false }) 
            }), 
            view: new ol.View({ 
                center: center,
                zoom: 10,
                extent: tileExtent, // 限制视图不能超出切片范围
                minZoom: 10,
                maxZoom: 10 // 固定缩放级别，避免缩放导致切片重复
            }) 
        }); 
    </script> 
</body> 
</html>

代码关键点说明 #

• 计算瓦片范围：通过ol.extent.fromCenterAndSize，以中心点为基准，结合对应Zoom级别的瓦片尺寸，算出单个切片的地理边界。
• 图层extent：设置后，切片图层只会在指定范围内渲染，不会再重复平铺到其他区域。
• 视图限制：extent阻止用户拖动到切片之外，minZoom和maxZoom锁定在切片对应的缩放级别，避免缩放引发的异常显示。
• 自定义tileGrid：确保XYZ源只加载对应Zoom级别的瓦片，不会尝试请求其他级别的资源。

这样修改后，你的地图就只会在指定地理范围内显示单个切片，不会再出现无限重复的情况啦！

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