0

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 と関係があるかもしれないと思いますが、それ以上の方向性がなければ、何をすべきかを推測しているだけのようです。

4

1 に答える 1

1

これを正しく機能させるには、ピクセル プロジェクションを作成する必要があります。次にfit、(前者の代わりにfitExtent) を使用して、既に考えているように、画像の全範囲にズームできます。

OpenLayers 3 に変換された OpenLayers 2 コード全体は次のようになります。

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());
于 2015-07-06T09:12:49.647 に答える