admin管理员组文章数量:1187482
I am trying to add this layer to an OSM with a display projection similar to the other layers, however this code results in a blank pink screen. The grid lines are skewed but no tiles are displayed. Is there a simple fix to allow this layer in the layer switcher?
var osLeisure = new OpenLayers.Layer.XYZ(
"OS Leisure",'/{z}/{x}/{y}.png?key=' + apiKey,
{
type: 'base',
visible: true,
view: new ol.View({
projection: 'EPSG:27700',
displayProjection: "EPSG:31467",
transitionEffect: 'resize',
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: 7,
maxZoom: 20,
center: ol.proj.fromLonLat([ -2.968, 54.425 ]),
zoom: 14
})
}
);
I am trying to add this layer to an OSM with a display projection similar to the other layers, however this code results in a blank pink screen. The grid lines are skewed but no tiles are displayed. Is there a simple fix to allow this layer in the layer switcher?
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,
view: new ol.View({
projection: 'EPSG:27700',
displayProjection: "EPSG:31467",
transitionEffect: 'resize',
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: 7,
maxZoom: 20,
center: ol.proj.fromLonLat([ -2.968, 54.425 ]),
zoom: 14
})
}
);
- You must set the projection and tilegrid for the source, see labs.os.uk/public/os-data-hub-examples/os-maps-api/… Also if the view is in a different projection set the extent on the tilegrid, not the view. – Mike Commented Jan 25 at 19:59
- I have tried this as below but still not tiles are displayed. – ALD2355 Commented Jan 26 at 15:15
- var osLeisure = new OpenLayers.Layer.XYZ("OS Leisure",'api.os.uk/maps/raster/v1/zxy/Leisure_27700{z}/{x}/{y}.png?key=' + apiKey, { type: 'base', visible: true, projection: 'EPSG:27700', displayProjection: "EPSG:31467", transitionEffect: 'resize', tileGrid: { 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 ] }, extent: [ -238375.0, 0.0, 900000.0, 1376256.0 ], }); – ALD2355 Commented Jan 26 at 15:22
2 Answers
Reset to default 0Base your code on the OS examples - see https://labs.os.uk/public/os-data-hub-examples/os-maps-api/zxy-example-change-style#openlayers for adding a layer switcher. You cannot mix Openlayers 2 code with later versions or reproject tiles with it. This will display OS Leisure and OSM in an OpenLayers 10 EPSG:31467 view:
proj4.defs("EPSG:27700", "+proj=tmerc +lat_0=49 +lon_0=-2 +k=0.9996012717 +x_0=400000 +y_0=-100000 +ellps=airy +towgs84=446.448,-125.157,542.06,0.15,0.247,0.842,-20.489 +units=m +no_defs");
proj4.defs("EPSG:31467", "+proj=tmerc +lat_0=0 +lon_0=9 +k=1 +x_0=3500000 +y_0=0 +ellps=bessel +towgs84=612.4,77,440.2,-0.054,0.057,-2.797,2.55 +units=m +no_defs +type=crs");
ol.proj.proj4.register(proj4);
const tilegrid = new ol.tilegrid.TileGrid({
resolutions: [ 896.0, 448.0, 224.0, 112.0, 56.0, 28.0, 14.0, 7.0, 3.5, 1.75 ],
extent: [ -238375.0, 0.0, 900000.0, 1376256.0 ],
});
const map = new ol.Map({
layers: [
new ol.layer.Tile({
title: 'OS Leisure',
type: 'base',
source: new ol.source.XYZ({
url: 'https://api.os.uk/maps/raster/v1/zxy/Leisure_27700/{z}/{x}/{y}.png?key=' + apiKey,
projection: 'EPSG:27700',
tileGrid: tilegrid
})
}),
new ol.layer.Tile({
title: 'OpenStreetMap',
type: 'base',
visible: false,
source: new ol.source.OSM()
})
],
target: 'map',
view: new ol.View({
projection: 'EPSG:31467',
center: ol.proj.fromLonLat([ -2.968, 54.425 ], 'EPSG:31467'),
zoom: 14
})
});
// Add layer switcher control to the map.
const layerSwitcher = new ol.control.LayerSwitcher();
map.addControl(layerSwitcher);
This code appears to work using OpenLayers 2:
// Register and transform projections
proj4.defs("EPSG:27700",
"+proj=tmerc +lat_0=49 +lon_0=-2 +k=0.9996012717 +x_0=400000 +y_0=-100000
" +
"+ellps=airy +towgs84=446.448,-125.157,542.06,0.15,0.247,0.842,-20.489
+units=m +no_defs"
);
proj4.defs("EPSG:3857",
"+proj=merc +a=6378137 +b=6378137 +lat_ts=0.0 +lon_0=0.0 +x_0=0.0 +y_0=0 +k=1.0 " +
"+units=m +nadgrids=@null +wktext +no_defs"
);
OpenLayers.Projection.addTransform("EPSG:3857", "EPSG:27700",
function(coordinates) {
return proj4("EPSG:3857", "EPSG:27700").forward(coordinates);
});
OpenLayers.Projection.addTransform("EPSG:27700", "EPSG:3857",
function(coordinates) {
return proj4("EPSG:27700", "EPSG:3857").inverse(coordinates);
});
// Create the EPSG:27700 projection object
var proj27700 = new OpenLayers.Projection("EPSG:27700");
var proj3857 = new OpenLayers.Projection("EPSG:3857");
var osLeisure = new OpenLayers.Layer.XYZ(
"OS Leisure",
"https://api.os.uk/maps/raster/v1/zxy/Leisure_27700/${z}/${x}/${y}.png?
key=APIKEY",
{
projection: proj27700,
displayProjection: proj3857,
//displayProjection: new OpenLayers.Projection("EPSG:4326"
units: "m",
numZoomLevels: 18,
maxResolution: 896,
maxExtent: new OpenLayers.Bounds(-238375.0, 0.0, 700000.0, 1376256.0),
displayOutsideMaxExtent: true,
tileOrigin: new OpenLayers.LonLat(-238375.0, 1376256.0),
resolutions: [896, 448, 224, 112, 56, 28, 14, 7, 3.5, 1.75, 0.875],
transitionEffect: 'resize',
attribution: 'Contains OS data © Crown copyright and database
rights 2025 <a href=//www.ordnancesurvey.co.uk>UK Ordnance
Survey</a>',
}
);
本文标签： OpenLayersOS Leisure LayerStack Overflow
版权声明：本文标题：OpenLayers - OS Leisure Layer - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1738344354a2077780.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论