Geek Answers Handbook

OpenLayers 3, static tiles and XYZ coordinates

The goal is to be able to scale a high resolution image (11520x11520), which I divided into 256x256 squares. I took a 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 separate them. This is to make an interactive video game map as follows: http://www.ark-survival.net/en/dynamic-livemap/

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

Result: I see only the upper left corner for any zoom used. I saw many examples and many questions, but the combination of static tiles and XYZ (in pixels) never came up.

Here is the JS Fiddle .

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

+4
1

. , :

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

ol.tilegrid.TileGrid:

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

. : https://jsfiddle.net/6moqu7q8/4/.

+1

More articles:


All Articles