ashatora/openlayers
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Changed ordering example to show the effect of zIndexing without

Browse Source 
yOrdering.


git-svn-id: http://svn.openlayers.org/trunk/openlayers@9307 dc9f47b5-9b13-0410-9fdd-eb0c1a62fdaf
This commit is contained in:
ahocevar
2009-04-19 08:53:25 +00:00
parent 608ef2730f
commit cf0ca6d2fc
1 changed files with 15 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
examples/ordering.html
View File

@@ -110,13 +110,15 @@
var layer = new OpenLayers.Layer.Vector(
"Drawing Order",
{
// Note there's no z-index set, and yOrdering is left
// to its default.
// The zIndex is taken from the zIndex attribute of the features
styleMap: new OpenLayers.StyleMap({
graphicZIndex: "${zIndex}",
externalGraphic: "../img/marker-green.png",
pointRadius: 10
}),
isBaseLayer: true
isBaseLayer: true,
// enable the indexer by setting zIndexing to true
rendererOptions: {zIndexing: true}
}
);
@@ -140,12 +142,17 @@
var leftLonLat = map.getLonLatFromViewPortPx(left);
orderingFeatures.push(
new OpenLayers.Feature.Vector(
new OpenLayers.Geometry.Point(leftLonLat.lon, bottomLonLat.lat)
new OpenLayers.Geometry.Point(leftLonLat.lon, bottomLonLat.lat),
// Set the zIndex attribute of all features to 0.
// This attribute will be assigned to the graphicZIndex symbolizer property by the layer's styleMap
{zIndex: 0}
)
);
bottom.y -= POINT_DISTANCE / 2; // Divide by 2 for better visual.
left.x += POINT_DISTANCE / 2;
}
// only the first feature gets a zIndex attribute of 1
orderingFeatures[0].attributes.zIndex = 1;
layer.addFeatures(orderingFeatures);
}
@@ -177,13 +184,13 @@
<div class="docs">
In this map, the gold features all have the same z-index, and the red features have alternating z-indeces. The gold features' z-index is greater than the red features' z-indeces, which is why gold features look to be drawn on top of the red features. Since each gold feature has the same z-index, gold features succomb to y-ordering: this is where features that seem closest to the viewer (lower lattitude) show up above those that seem farther away (higher lattitude).
<br><br>
All vector layers have z-indexing enabled by default, but are not enabled with y-ordering. You can enable y-ordering by passing the parameter <i>yOrdering: true</i> in the vector layer's options hash. For all configurations, if features have the same z-index -- and if y-ordering is enabled: the same lattitude -- those features will succomb to drawing order, where the last feature to be drawn will appear above the rest.
You can enable y-ordering by passing the parameter <i>yOrdering: true</i> in the vector layer's options hash. For all configurations (with yOrdering or zIndexing set to true), if features have the same z-index -- and if y-ordering is enabled: the same latitude -- those features will succomb to drawing order, where the last feature to be drawn will appear above the rest.
</div>
</td>
</tr>
</table>
<br>
<h3>Drawing Order (no Z-Indexes set, and Y-Ordering disabled)</h3>
<h3>Z-Index and Drawing Order (Z-Indexes set, and Y-Ordering disabled)</h3>
<table>
<tr>
<td>
@@ -191,9 +198,9 @@
</td>
<td>
<div class="docs">
In this map, features are not given z-indexes, and the layer's <i>yOrdering</i> parameter is set to the default (false). This configuration makes features succomb to drawing order instead of z-index order or y-order.
In this map, <i>zIndexing</i> is set to true. All features are given the same z-index (0), except for the first feature which has a z-index of 1. The layer's <i>yOrdering</i> parameter is set to the default (false). This configuration makes features succomb to z-index and drawing order (for the features with the same z-index), instead of y-order.
<br><br>
The features in this map were drawn from left to right and bottom to top, diagonally, to show that y-ordering is not enabled.
The features in this map were drawn from left to right and bottom to top, diagonally, to show that y-ordering is not enabled. Only the lower-left corner feature is drawn on top of the others, because it has a higher z-index (1 instead of 0).
</div>
</td>
</tr>