如何在 OpenLayers3 中居中平铺图层

how to center tile layer in OpenLayers3

本文关键字：图层 中居 OpenLayers3      更新时间：2023-09-26

我正在尝试在 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 链接。如果有帮助，原始图像大小为 4864x3328。

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

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

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/

要实现此目的，您需要等到加载完所有切片，然后获取图层范围，最后将视图拟合到此范围。

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());
  }
});

相关文章：