[英]how to center tile layer in OpenLayers3
I'm trying to center a tile layer in OpenLayers 3 but it seems to ignore the center attribute of the map. 我正在尝试将OpenLayers 3中的图块图层居中,但似乎忽略了地图的center属性。 I know the height and width of the original big image if it helps.
我知道原始大图的高度和宽度是否有帮助。
here is my code (also available in jsbin ): 这是我的代码(也可以在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>
How can I center the map, and if possible zoom to fit screen width or height? 如何将地图居中放置,以及如何缩放以适合屏幕宽度或高度?
Update: 更新:
I've updated the code and added a jsbin link too. 我已经更新了代码并添加了jsbin链接。 The original image size is 4864x3328 if it helps.
如果有帮助,原始图像尺寸为4864x3328。
I think this has to do with projection and setting the grid size in pixels, but i couldn't find anything helpful. 我认为这与投影和以像素为单位设置网格大小有关,但是我找不到任何帮助。
My first answer isn't a good one. 我的第一个答案不是一个好答案。 Go this way:
走这边:
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/ http://jsfiddle.net/jonataswalker/6f233kLy/
To achieve this you'll need to wait until all tiles are loaded, then get the
layer extent , finally
fit the view to this extent.
为此,您需要等到所有图块加载完毕,然后获取
图层范围 ,最后
将视图适合此范围。
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()); } });
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.