Как преобразовать изображение MapTile для просмотра

Question

Я создал набор фрагментов изображения с использованием MapTiler. MapTiler генерирует 2 сценарий ПР, который центрирует черепичное изображение в окне просмотра с помощью следующего кода:

var map, layer; 
var mapBounds = new OpenLayers.Bounds(0.000000, -9350.000000, 14450.000000, 0.000000); 
var mapMinZoom = 0; 
var mapMaxZoom = 6; 
var mapMaxResolution = 1.000000; 
var gridBounds = new OpenLayers.Bounds(0.000000, -9350.000000, 14450.000000, 0.000000); 
function init() { 
    var options = { 
    controls: [], 
    maxExtent : gridBounds, 
    minResolution: mapMaxResolution, 
    numZoomLevels: mapMaxZoom+1 
    }; 
    map = new OpenLayers.Map('map', options); 
    layer = new OpenLayers.Layer.XYZ("MapTiler layer", "${z}/${x}/${y}.png", { 
    transitionEffect: 'resize', 
    tileSize: new OpenLayers.Size(256, 256), 
    tileOrigin: new OpenLayers.LonLat(gridBounds.left, gridBounds.top) 
    }); 
    map.addLayer(layer); 
    map.zoomToExtent(mapBounds); 

Я хочу использовать Ol3 для отображения плиточной карты, но не знаю, как реализовать эквивалентные Ol3 методы для достижения этой цели , Используя следующий скрипт, я могу отобразить черепичное изображение, но я не могу понять, как центрировать плитки в представлении.

map = new ol.Map({ 
    target: 'map', 
    layers: [ 
    new ol.layer.Tile({ 
     source: new ol.source.OSM({ 
     url: map_path + '{z}/{x}/{y}.png' 
     }) 
    }) 
    ], 
    view: new ol.View({ 
    center: [0, 0], 
    zoom: 2 
    }) 
}); 

Я проверил степень карты, которая оказывается быть:

-20037508,342789244, -20037508.342789244,20037508.342789244,20037508.342789244

Мой плиточные степени изображение приводится в коде OL2, но я не знают, как использовать эту информацию в OL3. Я думаю, что это может иметь какое-то отношение к трансформации или fitExtent, но без дальнейшего направления, кажется, я просто догадываюсь, что делать.

Answer 1

Вам понадобится создать пиксельную проекцию для правильной работы. Затем вы можете использовать fit (замена для прежнего fitExtent), как вы уже подозревали, чтобы увеличить изображение до полной степени.

Целые OpenLayers 2 код переводится в OpenLayers 3 будет выглядеть следующим образом:

var mapBounds = [0.000000, -9350.000000, 14450.000000, 0.000000]; 
var mapMaxZoom = 6; 
var gridBounds = [0.000000, -9350.000000, 14450.000000, 0.000000]; 
var projection = new ol.proj.Projection({ 
    code: 'pixels', 
    units: 'pixels', 
    extent: gridBounds 
}); 
var map = new ol.Map({ 
    target: 'map', 
    view: new ol.View({ 
    extent: mapBounds, 
    projection: projection 
    }) 
}); 
var layer = new ol.layer.Tile({ 
    source: new ol.source.XYZ({ 
    url: '{z}/{x}/{y}.png', 
    projection: projection, 
    maxZoom: mapMaxZoom 
    }) 
}); 
map.addLayer(layer); 
map.getView().fit(mapBounds, map.getSize());