To have a functioning map with all overlays, set the map.allOverlays property to true. With all overlays, the map derives projection, resolution, and max extent information from the lowest layer in the draw order (map.layers[0]). To change the layer order, use map.setLayerIndex or map.raiseLayer. r=ahocevar,elemoine (closes #2004)

git-svn-id: http://svn.openlayers.org/trunk/openlayers@9171 dc9f47b5-9b13-0410-9fdd-eb0c1a62fdaf
This commit is contained in:
Tim Schaub
2009-04-02 16:40:52 +00:00
parent 3c863c8c2f
commit b2258606dc
3 changed files with 161 additions and 4 deletions

View File

@@ -0,0 +1,67 @@
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>All Overlays Example</title>
<link rel="stylesheet" href="../theme/default/style.css" type="text/css" />
<link rel="stylesheet" href="style.css" type="text/css" />
<script src="../lib/OpenLayers.js"></script>
<script type="text/javascript">
var map;
function init() {
map = new OpenLayers.Map("map", {allOverlays: true});
// give the features some style
var styles = new OpenLayers.StyleMap({
"default": {
strokeWidth: 2
},
"select": {
strokeColor: "#0099cc",
strokeWidth: 4
}
});
// add rules from the above lookup table
styles.addUniqueValueRules("default", "RP_TYPE", {
10: {strokeColor: "#000000", strokeWidth: 2},
12: {strokeColor: "#222222", strokeWidth: 2},
14: {strokeColor: "#444444", strokeWidth: 2},
16: {strokeColor: "#666666", strokeWidth: 2},
18: {strokeColor: "#888888", strokeWidth: 2},
19: {strokeColor: "#666666", strokeWidth: 1}
});
var vectors = new OpenLayers.Layer.Vector("Lines", {
strategies: [new OpenLayers.Strategy.Fixed()],
protocol: new OpenLayers.Protocol.HTTP({
url: "data/roads.json",
format: new OpenLayers.Format.GeoJSON()
}),
styleMap: styles,
maxExtent: new OpenLayers.Bounds(
1549471.9221, 6403610.94, 1550001.32545, 6404015.8
)
});
map.addLayer(vectors);
map.addControl(new OpenLayers.Control.LayerSwitcher());
map.zoomToMaxExtent();
}
</script>
</head>
<body onload="init()">
<h1 id="title">OpenLayers Overlays Only Example</h1>
<p id="shortdesc">
Demonstrates a map with overlays only.
</p>
<div id="map" class="smallmap"></div>
<div id="docs">
To create a map that allows any draw order with all layer types
and lets you set the visibility of any layer independently, set
the allOverlays property on the map to true.
</div>
</body>
</html>

View File

@@ -121,6 +121,22 @@ OpenLayers.Map = OpenLayers.Class({
*/ */
events: null, events: null,
/**
* APIProperty: allOverlays
* {Boolean} Allow the map to function with "overlays" only. Defaults to
* false. If true, the lowest layer in the draw order will act as
* the base layer. In addition, if set to true, all layers will
* have isBaseLayer set to false when they are added to the map.
*
* Note:
* If you set map.allOverlays to true, then you *cannot* use
* map.setBaseLayer or layer.setIsBaseLayer. With allOverlays true,
* the lowest layer in the draw layer is the base layer. So, to change
* the base layer, use <setLayerIndex> or <raiseLayer> to set the layer
* index to 0.
*/
allOverlays: false,
/** /**
* APIProperty: div * APIProperty: div
* {DOMElement|String} The element that contains the map (or an id for * {DOMElement|String} The element that contains the map (or an id for
@@ -879,6 +895,9 @@ OpenLayers.Map = OpenLayers.Class({
return false; return false;
} }
} }
if(this.allOverlays) {
layer.isBaseLayer = false;
}
this.events.triggerEvent("preaddlayer", {layer: layer}); this.events.triggerEvent("preaddlayer", {layer: layer});
@@ -894,7 +913,7 @@ OpenLayers.Map = OpenLayers.Class({
this.layers.push(layer); this.layers.push(layer);
layer.setMap(this); layer.setMap(this);
if (layer.isBaseLayer) { if (layer.isBaseLayer || (this.allOverlays && !this.baseLayer)) {
if (this.baseLayer == null) { if (this.baseLayer == null) {
// set the first baselaye we add as the baselayer // set the first baselaye we add as the baselayer
this.setBaseLayer(layer); this.setBaseLayer(layer);
@@ -968,7 +987,7 @@ OpenLayers.Map = OpenLayers.Class({
if(setNewBaseLayer) { if(setNewBaseLayer) {
for(var i=0, len=this.layers.length; i<len; i++) { for(var i=0, len=this.layers.length; i<len; i++) {
var iLayer = this.layers[i]; var iLayer = this.layers[i];
if (iLayer.isBaseLayer) { if (iLayer.isBaseLayer || this.allOverlays) {
this.setBaseLayer(iLayer); this.setBaseLayer(iLayer);
break; break;
} }
@@ -1033,6 +1052,13 @@ OpenLayers.Map = OpenLayers.Class({
this.events.triggerEvent("changelayer", { this.events.triggerEvent("changelayer", {
layer: layer, property: "order" layer: layer, property: "order"
}); });
if(this.allOverlays) {
if(idx === 0) {
this.setBaseLayer(layer);
} else if(this.baseLayer !== this.layers[0]) {
this.setBaseLayer(this.layers[0]);
}
}
} }
}, },
@@ -1644,7 +1670,7 @@ OpenLayers.Map = OpenLayers.Class({
for (var i=0, len=this.layers.length; i<len; i++) { for (var i=0, len=this.layers.length; i<len; i++) {
var layer = this.layers[i]; var layer = this.layers[i];
if (!layer.isBaseLayer) { if (layer !== this.baseLayer && !layer.isBaseLayer) {
var inRange = layer.calculateInRange(); var inRange = layer.calculateInRange();
if (layer.inRange != inRange) { if (layer.inRange != inRange) {
// the inRange property has changed. If the layer is // the inRange property has changed. If the layer is

View File

@@ -1206,6 +1206,70 @@
} }
function test_allOverlays(t) {
t.plan(9);
var map = new OpenLayers.Map({
div: "map", allOverlays: true
});
var a = new OpenLayers.Layer.Vector("a");
var b = new OpenLayers.Layer.Image(
"b",
"http://earthtrends.wri.org/images/maps/4_m_citylights_lg.gif",
new OpenLayers.Bounds(-180, -88.759, 180, 88.759),
new OpenLayers.Size(580, 288)
);
var c = new OpenLayers.Layer.WMS(
"c",
"http://labs.metacarta.com/wms/vmap0",
{layers: 'basic'}
);
var d = new OpenLayers.Layer.Vector("d");
map.addLayers([a, b, c, d]);
var moveCount = 0;
a.moveTo = function() {
moveCount++;
OpenLayers.Layer.Vector.prototype.moveTo.apply(this, arguments);
};
map.zoomToMaxExtent();
t.eq(moveCount, 1, "map.moveTo moves the base layer only once");
t.eq(map.getCenter().toString(), "lon=0,lat=0", "a map with all overlays can have a center");
// a, b, c, d
t.eq(map.baseLayer.name, "a", "base layer set to first layer added");
map.removeLayer(a);
// b, c, d
t.eq(map.baseLayer.name, "b", "if base layer is removed, lowest layer becomes base");
map.addLayer(a);
// b, c, d, a
t.eq(map.baseLayer.name, "b", "adding a new layer doesn't change base layer");
map.setLayerIndex(c, 1);
// b, d, c, a
t.eq(map.baseLayer.name, "b", "changing layer order above base doesn't mess with base");
map.setLayerIndex(d, 0);
// d, b, c, a
t.eq(map.baseLayer.name, "d", "changing layer order to 0 sets base layer");
map.raiseLayer(d, 1);
// b, d, c, a
t.eq(map.baseLayer.name, "b", "raising the base layer sets a new base layer");
map.raiseLayer(d, -1);
t.eq(map.baseLayer.name, "d", "lowering a layer to lowest index sets as base");
map.destroy();
}
</script> </script>
</head> </head>
<body> <body>