OpenLayers添加OS Leisure图层显示空白粉色屏，求简易修复方案

开发者阿泽

2026-6-14

修复OS Leisure图层显示问题的简易方法

核心问题分析

你的代码错误地将ol.View的配置放到了OpenLayers.Layer.XYZ的选项里——View是地图实例的专属属性，不属于单个图层，这会导致图层无法匹配地图的投影与视图参数，进而引发瓦片加载失败、网格偏移的问题。

分步修复

移除Layer配置中的View属性
直接删除原代码里的view配置块，View需要在创建ol.Map实例时单独设置。

修正XYZ图层的投影与瓦片参数
OS Leisure服务采用EPSG:27700投影，需确保图层的投影、分辨率、范围、zoom范围与服务完全匹配：

var osLeisure = new OpenLayers.Layer.XYZ(
  "OS Leisure",
  'https://api.os.uk/maps/raster/v1/zxy/Leisure_27700/{z}/{x}/{y}.png?key=' + apiKey, 
  {
    type: 'base',
    visible: true,
    projection: 'EPSG:27700',
    extent: [-238375.0, 0.0, 900000.0, 1376256.0],
    resolutions: [896.0, 448.0, 224.0, 112.0, 56.0, 28.0, 14.0, 7.0, 3.5, 1.75],
    origin: [-238375.0, 1376256.0],
    minZoom: 0, // 对应resolutions数组的索引0，OS Leisure服务zoom从0开始
    maxZoom: 9  // 对应resolutions数组的最后一个索引
  }
);

配置地图View的正确参数
创建地图实例时，单独设置View的投影与中心点，确保和图层参数一致：

var map = new ol.Map({
  target: 'map',
  layers: [osLeisure],
  view: new ol.View({
    projection: 'EPSG:27700',
    extent: [-238375.0, 0.0, 900000.0, 1376256.0],
    center: ol.proj.fromLonLat([-2.968, 54.425], 'EPSG:27700'),
    zoom: 7 // 对应resolutions数组的索引7（分辨率值为7.0）
  })
});