1

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
      })
    });

enter image description here

As you can see in the image the coordinates are not in the extent that i want. I want the top left to be (807501.27, 830030.30) and bottom right to be (829929.04,814994.07)

  • Show your code, how did you add your tiles to your map? – bugmenot123 Aug 14 at 8:15
  • added the code !! I do get the map but with this i do not get it under the coordinates that i want. – UzmakiAshim Aug 14 at 8:21
  • 2
    The extent on the TileGrid prevents tiles which lie completely outside the extent being requested but don't clip any which lie partially in the extent. To do that specify extent as an option on your TileLayer – Mike Aug 14 at 9:25
  • When i do what you said it does not display anything. – UzmakiAshim Aug 16 at 1:48
  • It is retrieving the PNG file, however it is not displaying anything. My extent is : [795233.5770899998, 794267.8361200001, 872991.5360700004, 853188.3580900002] – UzmakiAshim Aug 16 at 2:15

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.