<div dir="ltr"><div style>Hi:<br><br></div><div style>I tried to add multiple layers to the map , each layer will server for a special level and extent.</div><div style><br></div><div style>For example:</div><div style><br>
</div><div style><br></div><div style> <i> var tresolution=[156543.03390625, 78271.516953125, 39135.7584765625, 19567.87923828125, 9783.939619140625, 4891.9698095703125, 2445.9849047851562, 1222.9924523925781];</i><br>
</div><div style><div><i><span class="" style="white-space:pre"> </span>var<span class="" style="white-space:pre"> </span>layers=[</i></div><div><i><span class="" style="white-space:pre"> </span>{url:"<a href="http://a.tile.openstreetmap.org/${z}/${x}/${y}.png">http://a.tile.openstreetmap.org/${z}/${x}/${y}.png</a>",minzoom:0,maxZoom:4},</i></div>
<div><i><span class="" style="white-space:pre"> </span>{url:"<a href="http://b.tile.openstreetmap.org/${z}/${x}/${y}.png">http://b.tile.openstreetmap.org/${z}/${x}/${y}.png</a>",minzoom:5,maxzoom:7,maxExtent:[-180,-90,0,90]},</i></div>
<div><i><span class="" style="white-space:pre"> </span>{url:"<a href="http://c.tile.openstreetmap.org/${z}/${x}/${y}.png">http://c.tile.openstreetmap.org/${z}/${x}/${y}.png</a>",minzoom:5,maxzoom:7,maxExtent:[0,-90,180,90]}</i></div>
<div><i><span class="" style="white-space:pre"> </span>];</i></div></div><div><br></div><div style>Then I will create three OSM layers, and add them to the map.</div><div style><br></div><div style><br></div><div style>
<div>
<i><span class="" style="white-space:pre"> </span>function createLayer(l){</i></div><div><i><span class="" style="white-space:pre"> </span>var lay=new OpenLayers.Layer.OSM("xx",l.url,{</i></div><div><i><span class="" style="white-space:pre"> </span>isBaseLayer : false,</i></div>
<div><i><span class="" style="white-space:pre"> </span>alwaysInRange : false,</i></div><div><i><span class="" style="white-space:pre"> </span>maxResolution : tresolution[l.minzoom],</i></div><div><i><span class="" style="white-space:pre"> </span>minResolution : tresolution[l.maxzoom],</i></div>
<div><i><span class="" style="white-space:pre"> </span>//maxExtent : l.maxExtent || [-180,-90,180,90],</i></div><div><i><span class="" style="white-space:pre"> </span>crossOriginKeyword: null</i></div><div><i><span class="" style="white-space:pre"> </span>});</i></div>
<div><i><span class="" style="white-space:pre"> </span>return lay;</i></div><div><i><span class="" style="white-space:pre"> </span>}</i></div></div><div style><br></div><div style><br></div><div style><div><i><span class="" style="white-space:pre"> </span>map=new OpenLayers.Map("map",{</i></div>
<div><i><span class="" style="white-space:pre"> </span>resolutions:tresolution,</i></div><div><i><span class="" style="white-space:pre"> </span>allOverlays:true,</i></div><div><i><span class="" style="white-space:pre"> </span>layers:lays</i></div>
<div><i><span class="" style="white-space:pre"> </span>});</i></div><div><i><span class="" style="white-space:pre"> </span>map.setCenter(new OpenLayers.LonLat(659688.852138, 5710701.2962197),1);</i></div><div><i><br>
</i></div>
</div><div style>As is shown:</div><div style><br></div><div style><i>server `a.tile` will server the data all over the world with level between 0 to 4.</i></div><div style><i><br></i></div><div style><i>server `b.tile` will server the data with extent of [-180,-90,0,90] with level between 5 to 7 .</i></div>
<div style><i><br></i></div><div style><i>server `c.tile` will server the data with extent of [0,-90,180,90] with level between 0 to 4.</i></div><div style><br></div><div style>So in my opinion,when the zoom of the map is smaller than 5. OL will request tiles from server `a.tile..`. Layer of `b.tile` and `c.tile` will be deactivated.</div>
<div style><br></div><div style>When the zoom is larger than 5, the layer with `a.tile` will be deactivated. And if the view-port is inside <i>[-180,-90,0,90], </i>then `b.tile` will be activated.</div><div style><br></div>
<div style>In a world, the layer should be activated(visible and request data) or deactivated(invisible and not request data) according to the min/max resolution and extent.</div><div style><br></div><div style>However, I found that it does not work as expected. <a href="http://jsfiddle.net/EQghk/1/">Live Demo</a>. And I meet some problems:</div>
<div style><br></div><div style>1) When the map is initialized, its zoom is set to be 1, but from the firebug, I found that it will request images like `a.tile..../2/....png`, It seems that the current zoom is 2 rather than 1.</div>
<div style><br></div><div style><br></div><div style>2) When I zoom to level 6(through the firebug), I found that both layer `a.tile..` `b.tile...`, `c.tile..` are activated. Why the layer `a.tile..` is not deactivated? It seems that the min/max resolution does not work.</div>
<div style><br></div><div style>3) If I un-comment the line <i>maxExtent : l.maxExtent || [-180,-90,180,90], </i>then the Firefox will crashed, and the chrome will throw error "<span style="color:rgb(255,0,0);font-family:Consolas,'Lucida Console',monospace;font-size:12px;white-space:pre-wrap">Cross-origin image load denied by Cross-Origin Resource Sharing policy.</span><span style="color:rgb(255,0,0);font-family:Consolas,'Lucida Console',monospace;font-size:12px;white-space:pre-wrap"> </span>".</div>
<div style><br></div><div style>What is the problem?</div></div>