documenting that Layer.VirtualEarth requires restrictedExtent to be set, and changing the examples accordingly. p=marcjansen (closes #3123)

git-svn-id: http://svn.openlayers.org/trunk/openlayers@11503 dc9f47b5-9b13-0410-9fdd-eb0c1a62fdaf
This commit is contained in:
ahocevar
2011-02-25 14:27:54 +00:00
parent 7ec361cda9
commit d7afd24ac5
3 changed files with 130 additions and 97 deletions

View File

@@ -12,9 +12,18 @@
<script> <script>
var map; var map;
function init(){ function init(){
map = new OpenLayers.Map("map"); // setting restrictedExtent so that we can use the
// VirtualEarth-layers, see e.g.
// http://dev.openlayers.org/apidocs/files/OpenLayers/Layer/VirtualEarth-js.html
var restrictedExtent = new OpenLayers.Bounds(-20037508, -20037508,
20037508, 20037508);
map = new OpenLayers.Map("map", {
restrictedExtent: restrictedExtent
});
map.addControl(new OpenLayers.Control.LayerSwitcher()); map.addControl(new OpenLayers.Control.LayerSwitcher());
var shaded = new OpenLayers.Layer.VirtualEarth("Shaded", { var shaded = new OpenLayers.Layer.VirtualEarth("Shaded", {

View File

@@ -24,107 +24,111 @@
<script src="../lib/OpenLayers.js"></script> <script src="../lib/OpenLayers.js"></script>
<script type="text/javascript"> <script type="text/javascript">
// make map available for easy debugging // make map available for easy debugging
var map; var map;
// increase reload attempts // increase reload attempts
OpenLayers.IMAGE_RELOAD_ATTEMPTS = 3; OpenLayers.IMAGE_RELOAD_ATTEMPTS = 3;
function init(){ function init(){
var options = { var maxExtent = new OpenLayers.Bounds(-20037508, -20037508, 20037508, 20037508),
projection: new OpenLayers.Projection("EPSG:900913"), restrictedExtent = maxExtent.clone(-20037508, -20037508, 20037508, 20037508),
displayProjection: new OpenLayers.Projection("EPSG:4326"), maxResolution = 156543.0339;
units: "m",
numZoomLevels: 18, var options = {
maxResolution: 156543.0339, projection: new OpenLayers.Projection("EPSG:900913"),
maxExtent: new OpenLayers.Bounds(-20037508, -20037508, displayProjection: new OpenLayers.Projection("EPSG:4326"),
20037508, 20037508.34) units: "m",
}; numZoomLevels: 18,
map = new OpenLayers.Map('map', options); maxResolution: maxResolution,
maxExtent: maxExtent,
restrictedExtent: restrictedExtent
};
map = new OpenLayers.Map('map', options);
// create Google Mercator layers // create Google Mercator layers
var gmap = new OpenLayers.Layer.Google( var gmap = new OpenLayers.Layer.Google(
"Google Streets", "Google Streets",
{'sphericalMercator': true} {sphericalMercator: true}
); );
var gsat = new OpenLayers.Layer.Google( var gsat = new OpenLayers.Layer.Google(
"Google Satellite", "Google Satellite",
{type: G_SATELLITE_MAP, 'sphericalMercator': true, numZoomLevels: 22} {type: G_SATELLITE_MAP, sphericalMercator: true, numZoomLevels: 22}
); );
var ghyb = new OpenLayers.Layer.Google( var ghyb = new OpenLayers.Layer.Google(
"Google Hybrid", "Google Hybrid",
{type: G_HYBRID_MAP, 'sphericalMercator': true} {type: G_HYBRID_MAP, sphericalMercator: true}
); );
// create Virtual Earth layers // create Virtual Earth layers
var veroad = new OpenLayers.Layer.VirtualEarth( var veroad = new OpenLayers.Layer.VirtualEarth(
"Virtual Earth Roads", "Virtual Earth Roads",
{'type': VEMapStyle.Road, 'sphericalMercator': true} {'type': VEMapStyle.Road, sphericalMercator: true}
); );
var veaer = new OpenLayers.Layer.VirtualEarth( var veaer = new OpenLayers.Layer.VirtualEarth(
"Virtual Earth Aerial", "Virtual Earth Aerial",
{'type': VEMapStyle.Aerial, 'sphericalMercator': true} {'type': VEMapStyle.Aerial, sphericalMercator: true}
); );
var vehyb = new OpenLayers.Layer.VirtualEarth( var vehyb = new OpenLayers.Layer.VirtualEarth(
"Virtual Earth Hybrid", "Virtual Earth Hybrid",
{'type': VEMapStyle.Hybrid, 'sphericalMercator': true} {'type': VEMapStyle.Hybrid, sphericalMercator: true}
); );
// create Yahoo layer // create Yahoo layer
var yahoo = new OpenLayers.Layer.Yahoo( var yahoo = new OpenLayers.Layer.Yahoo(
"Yahoo Street", "Yahoo Street",
{'sphericalMercator': true} {sphericalMercator: true}
); );
var yahoosat = new OpenLayers.Layer.Yahoo( var yahoosat = new OpenLayers.Layer.Yahoo(
"Yahoo Satellite", "Yahoo Satellite",
{'type': YAHOO_MAP_SAT, 'sphericalMercator': true} {'type': YAHOO_MAP_SAT, sphericalMercator: true}
); );
var yahoohyb = new OpenLayers.Layer.Yahoo( var yahoohyb = new OpenLayers.Layer.Yahoo(
"Yahoo Hybrid", "Yahoo Hybrid",
{'type': YAHOO_MAP_HYB, 'sphericalMercator': true} {'type': YAHOO_MAP_HYB, sphericalMercator: true}
); );
// create OSM layer // create OSM layer
var mapnik = new OpenLayers.Layer.OSM(); var mapnik = new OpenLayers.Layer.OSM();
// create OAM layer // create OAM layer
var oam = new OpenLayers.Layer.XYZ( var oam = new OpenLayers.Layer.XYZ(
"OpenAerialMap", "OpenAerialMap",
"http://tile.openaerialmap.org/tiles/1.0.0/openaerialmap-900913/${z}/${x}/${y}.png", "http://tile.openaerialmap.org/tiles/1.0.0/openaerialmap-900913/${z}/${x}/${y}.png",
{ {
sphericalMercator: true sphericalMercator: true
}
);
// create OSM layer
var osmarender = new OpenLayers.Layer.OSM(
"OpenStreetMap (Tiles@Home)",
"http://tah.openstreetmap.org/Tiles/tile/${z}/${x}/${y}.png"
);
// create WMS layer
var wms = new OpenLayers.Layer.WMS(
"World Map",
"http://world.freemap.in/tiles/",
{'layers': 'factbook-overlay', 'format':'png'},
{
'opacity': 0.4, visibility: false,
'isBaseLayer': false,'wrapDateLine': true
}
);
// create a vector layer for drawing
var vector = new OpenLayers.Layer.Vector("Editable Vectors");
map.addLayers([gmap, gsat, ghyb, veroad, veaer, vehyb,
yahoo, yahoosat, yahoohyb, oam, mapnik, osmarender,
wms, vector]);
map.addControl(new OpenLayers.Control.LayerSwitcher());
map.addControl(new OpenLayers.Control.EditingToolbar(vector));
map.addControl(new OpenLayers.Control.Permalink());
map.addControl(new OpenLayers.Control.MousePosition());
if (!map.getCenter()) {map.zoomToMaxExtent()}
} }
);
// create OSM layer
var osmarender = new OpenLayers.Layer.OSM(
"OpenStreetMap (Tiles@Home)",
"http://tah.openstreetmap.org/Tiles/tile/${z}/${x}/${y}.png"
);
// create WMS layer
var wms = new OpenLayers.Layer.WMS(
"World Map",
"http://world.freemap.in/tiles/",
{'layers': 'factbook-overlay', 'format':'png'},
{
'opacity': 0.4, visibility: false,
'isBaseLayer': false,'wrapDateLine': true
}
);
// create a vector layer for drawing
var vector = new OpenLayers.Layer.Vector("Editable Vectors");
map.addLayers([gmap, gsat, ghyb, veroad, veaer, vehyb,
yahoo, yahoosat, yahoohyb, oam, mapnik, osmarender,
wms, vector]);
map.addControl(new OpenLayers.Control.LayerSwitcher());
map.addControl(new OpenLayers.Control.EditingToolbar(vector));
map.addControl(new OpenLayers.Control.Permalink());
map.addControl(new OpenLayers.Control.MousePosition());
if (!map.getCenter()) {map.zoomToMaxExtent()}
}
</script> </script>
</head> </head>

View File

@@ -13,7 +13,11 @@
/** /**
* Class: OpenLayers.Layer.VirtualEarth * Class: OpenLayers.Layer.VirtualEarth
* * Instances of OpenLayers.Layer.VirtualEarth are used to display the data from
* the Bing Maps AJAX Control (see e.g.
* http://msdn.microsoft.com/library/bb429619.aspx). Create a VirtualEarth
* layer with the <OpenLayers.Layer.VirtualEarth> constructor.
*
* Inherits from: * Inherits from:
* - <OpenLayers.Layer.EventPane> * - <OpenLayers.Layer.EventPane>
* - <OpenLayers.Layer.FixedZoomLevels> * - <OpenLayers.Layer.FixedZoomLevels>
@@ -94,6 +98,22 @@ OpenLayers.Layer.VirtualEarth = OpenLayers.Class(
/** /**
* Constructor: OpenLayers.Layer.VirtualEarth * Constructor: OpenLayers.Layer.VirtualEarth
* Creates a new instance of a OpenLayers.Layer.VirtualEarth. If you use an
* instance of OpenLayers.Layer.VirtualEarth in you map, you should set
* the <OpenLayers.Map> option restrictedExtent to a meaningful value,
* e.g.:
* (code)
* var map = new OpenLayers.Map( 'map', {
* // other map options
* restrictedExtent : OpenLayers.Bounds(-20037508, -20037508, 20037508, 20037508)
* } );
*
* var veLayer = new OpenLayers.Layer.VirtualEarth (
* "Virtual Earth Layer"
* );
*
* map.addLayer( veLayer );
* (end)
* *
* Parameters: * Parameters:
* name - {String} * name - {String}