I am using OpenLayers to create a map. I am providing my own source using XYZ. I want to be able to display my tiles at a certain extent and not go out of this extent. How can i do this ?
proj4.defs('EPSG:2326', '+proj=tmerc +lat_0=22.31213333333334 +lon_0=114.1785555555556 +k=1 +x_0=836694.05 +y_0=819069.8 +ellps=intl +towgs84=-162.619,-276.959,-161.764,0.067753,-2.24365,-1.15883,-1.09425 +units=m +no_defs');
register(proj4);
var projection = get('EPSG:2326');
var extent = [795233.5770899998, 794267.8361200001, 872991.5360700004, 853188.3580900002];
var hkorigin = [-4786700.0, 8353100.0];
var resolutions = [
156543.03392800014 , 78271.51696399994 , 39135.75848200009 , 19567.87924099992 ,
9783.93962049996 , 4891.96981024998 , 2445.98490512499 , 1222.992452562495 ,
611.4962262813797 , 305.74811314055756 , 152.87405657041106 , 76.43702828507324 ,
38.21851414253662 , 19.10925707126831 , 9.554628535634155 , 4.77731426794937 ,
2.388657133974685 , 1.1943285668550503 , 0.5971642835598172 , 0.29858214164761665 ,
0.14929107082380833
];
var tileGrid = new TileGrid({
extent: extent,
origin: hkorigin,
resolutions: resolutions,
tileSize: [256,256]
});
this.map = new Map({
target: 'map',
layers: [
new TileLayer({
source: new XYZ({
projection: projection,
tileGrid: tileGrid,
url: 'assets/tile/{z}/{x}/{y}.png'
})
}),
],
view: new View({
center: hk2326center,
projection: projection,
zoom: 0
})
});