OpenLayers在访问WMS服务的时候,图像的加载是采用的螺旋式加载。螺旋式加载首先从右上角开始按照顺时针方向给整个img矩阵建立一个堆栈,其实质是按照堆栈先进后出思想设计的一个数组,然后按堆栈中的位置顺序从视窗中间开始逆时针方向依次加载栅格图像。
整个img矩阵构成一个grid格网,当移动地图使得grid的范围[即bound值]不能包含视窗的bound,或者地图的显示比例发生变化时会重新向服务器请求数据,否则只会移动各个img的位置,从而使得视窗在grid之内。
客户端用于栅格图显示的img数量是由计算得到的。用户指定的用于显示的div作为视窗,视窗大小除以每张img的长宽得到一个m*n的矩阵,表示要填满整个视窗在长宽方向所需的最少的img数量,然后将img长宽方向都缓存两个img得到一个(m+2)*(n+2)的矩阵,即为客户端img数,默认缓存为两格,当然我们也可以将缓存数作为参数传入以改变缓存默认值buffer,那么改动之后的矩阵为(m+buffer)*(n+buffer)。 在移动的时候取grid网格中左上角那个tile的左上角坐标值,即grid[0][0]为参考点,当这个点的坐标超出值的时候会搬动grid中各个节点的位置。
这里的img在openlayers中其实已经被封装成了Tile类,该图层有一个div作为容器。每个image都有一个div将其包装起来,tileSize是按照OpenLayers.TILE_WHITH,OpenLayers.TILE_HEIGHT常量事先就定义好了,表示每个tile实例的大小。
我们来看看程序中Buffer的设置:
<script type="text/javascript">
var map, layer;
function init(){
map = new OpenLayers.Map( 'map' );
map.addControl(new OpenLayers.Control.LayerSwitcher());
var bounds = new OpenLayers.Bounds(103.94971885,30.5749127,104.18353815,30.7504793);
layerpublic = new OpenLayers.Layer.WMS( "region",
"http://localhost:8989/geoserver/wms" ,
{
layers: 'topp:Block_region,topp:PUBLIC_region,topp:Road_Regular_polyline',
srs: 'EPSG:4326',
style: '',
format: 'image/png',
tiled: 'false',
transparent: false
},
{
maxExtent: bounds,
//maxResolution: 0.0041261434555042165,
projection: 'EPSG:4326',
buffer: 0,
reproject: true,
//opacity: 0.5,
isBaseLayer: true
}
);
map.addLayer(layerpublic);
map.zoomToExtent(bounds);
}
</script>
我们看到上面buffer属性,我设置为0了。默认为2。大家可以试验一下,设为0为加快地图的下载。原理就是因为它取消了缓存的两格图片。