如何在 OpenLayers3 中居中图块层

Question

我试图在 OpenLayers 3 中将图块层居中，但它似乎忽略了地图的中心属性。如果有帮助，我知道原始大图的高度和宽度。

这是我的代码（在 jsbin 中也可用）：

<!DOCTYPE html>
<html>
  <head>
 <title>XYZ</title>
 <link rel="stylesheet" href="http://openlayers.org/en/v3.13.0/css/ol.css" type="text/css">
 <script src="http://openlayers.org/en/v3.13.0/build/ol.js"></script>
  </head>
  <body>
 <div id="map" class="map" style="width: 100%; height: 500px; border: 1px solid #000;"></div>
 <script>
   var layer = new ol.layer.Tile({
  source: new ol.source.XYZ({
    url: 'http://thinker.cloudapp.net/test/{z}-{x}-{y}.png',
    wrapX: false
  })
   });

   var map = new ol.Map({
  target: 'map',
  layers: [layer],
  view: new ol.View({
    center: [0,0],
    zoom: 2
  })
   });
 </script>
  </body>
</html>

如何使地图居中，以及如何缩放以适合屏幕宽度或高度？

更新：

我更新了代码并添加了一个 jsbin link。如果有帮助，原图尺寸为4864x3328

我认为这与投影和以像素为单位设置网格大小有关，但我找不到任何有用的信息。

Answer 1

我的第一个答案不是很好。走这条路：

var pixelProj = new ol.proj.Projection({
  code: 'pixel',
  units: 'pixels',
  extent: [0, 0, 4864, 3328]
});

var layer = new ol.layer.Tile({
  source: new ol.source.XYZ({
    projection: pixelProj,
    wrapX: false,
    url: 'http://thinker.cloudapp.net/test/{z}-{x}-{y}.png'
  })
});

var map = new ol.Map({
  target: 'map',
  layers: [layer],
  view: new ol.View({
    zoom: 2,
    center: [1364, 2400],
    projection: pixelProj
  })
});

http://jsfiddle.net/jonataswalker/6f233kLy/

~~要实现这一点，您需要等到所有图块都加载完毕，然后再获得 layer extent, finally fit the view 到这个程度。~~

var tile_loading = 0, tile_loaded = 0; yourTileLayer.getSource().on('tileloadstart', function(evt){ ++tile_loading; }); yourTileLayer.getSource().on('tileloadend', function(evt){ ++tile_loaded; if(tile_loaded === tile_loading){ tile_loading = 0; tile_loaded = 0; // put some logic here to do just once // all tiles are loaded - get the layer extent var extent = yourTileLayer.getExtent(); map.getView().fit(extent, map.getSize()); } });

如何在 OpenLayers3 中居中图块层

how to center tile layer in OpenLayers3

javascript

openlayers-3