如何轉換MapTile圖像以查看

Question

我已經使用MapTiler創建了一個圖像的圖塊集。 MapTiler生成OL 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());