Question

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

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

＆＃13;

<!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>

＆＃13;

如何将地图居中，如果可能，缩放以适应屏幕宽度或高度？

更新

我已更新代码并添加了jsbin链接。如果它有帮助，原始图像大小为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，最后获得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中居中切片图层

1 个答案: