CODEWITHSUNDEEP
openlayers-3
Vincent Poirier
Vincent Poirier

Reputation: 4315

OpenLayers 3, static tiles and XYZ coordinates

The goal is to be able to zoom onto a high-res picture (11520x11520) that I have split into 256x256 squares. I took the large image and resized it to 80%, 60%, 40%, 20% and 8.89%. Then, for each of the images from 100% to 8.89%, I split them. It's to make an interactive video game map like this: http://www.ark-survival.net/en/dynamic-livemap/

I have tried this:

var map = new ol.Map({
    target: 'ark_map',
    layers: [
        new ol.layer.Tile({
        source: new ol.source.XYZ({
                url: 'images/map/{z}/map_{x}_{y}.png',
                tileSize: 256,
                maxZoom: 5
            })
        })
    ],
    view: new ol.View({
        center: [50, 50],
        zoom: 5,
        minZoom: 0
    })
});

The result: I only see the top left corner on any zoom used. I've seen many examples and many questions, but combining static tiles and XYZ (on pixels) has never come up.

Here is the JS Fiddle.

How do you combine static tiles and XYZ coordinates based on a pixel system?

Upvotes: 4

Views: 3089

Answers (1)

ahocevar
ahocevar

Reputation: 5647

You have a very weird tile layout. What you describe maps to this set of resolutions:

var resolutions = [
  45/4,
  45/4/2*0.889,
  45/4/4*0.889,
  45/4/6*0.889,
  45/4/8*0.889
];

With that, you can configure an ol.tilegrid.TileGrid:

new ol.tilegrid.TileGrid({
  origin: [0, 11520],
  resolutions: resolutions
})

See updated fiddle for the full code: https://jsfiddle.net/6moqu7q8/4/.

Upvotes: 1

Related Questions