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

ordering <exclamation point/>. you can now gracefully z-order your vectors... and you can even 'yOrder' them and add background images, making for a nice 3dish look. be sure to check out the two new example html's: marker-shadow.html and ordering.html. Big thanks to tcoulter (funkyc) for a prolonged effort with this patch. It has come a long way and now what a beautiful finish. (Closes #1357)

Browse Source 
git-svn-id: http://svn.openlayers.org/trunk/openlayers@7652 dc9f47b5-9b13-0410-9fdd-eb0c1a62fdaf
This commit is contained in:
euzuro
2008-08-01 00:17:59 +00:00
parent d4a62c630a
commit 8b98f5acc3
6 changed files with 996 additions and 162 deletions
Download Patch File Download Diff File Expand all files Collapse all files

141
examples/marker-shadow.html Normal file
View File

@@ -0,0 +1,141 @@
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" href="../theme/default/style.css" type="text/css" />
<link rel="stylesheet" href="style.css" type="text/css" />
<style type="text/css">
.smallmap {
width: 300px;
}
.docs {
padding: 0px 5px;
}
td {
vertical-align: top;
}
</style>
<script src="../lib/OpenLayers.js" type="text/javascript"></script>
<script type="text/javascript">
var SHADOW_Z_INDEX = 10;
var MARKER_Z_INDEX = 11;
var DIAMETER = 200;
var NUMBER_OF_FEATURES = 15;
var map, layer;
function init() {
map = new OpenLayers.Map("map");
layer = new OpenLayers.Layer.Vector(
"Marker Drop Shadows",
{
styleMap: new OpenLayers.StyleMap({
// Set the external graphic and background graphic images.
externalGraphic: "../img/marker-gold.png",
backgroundGraphic: "./marker_shadow.png",
// Makes sure the background graphic is placed correctly relative
// to the external graphic.
backgroundXOffset: 0,
backgroundYOffset: -7,
// Set the z-indexes of both graphics to make sure the background
// graphics stay in the background (shadows on top of markers looks
// odd; let's not do that).
graphicZIndex: MARKER_Z_INDEX,
backgroundGraphicZIndex: SHADOW_Z_INDEX,
pointRadius: 10
}),
isBaseLayer: true,
yOrdering: true
}
);
map.addLayers([layer]);
// Add a drag feature control to move features around.
var dragFeature = new OpenLayers.Control.DragFeature(layer);
map.addControl(dragFeature);
dragFeature.activate();
map.zoomToMaxExtent();
drawFeatures();
}
function drawFeatures() {
layer.removeFeatures(layer.features);
// Create features at random around the center.
var center = map.getViewPortPxFromLonLat(map.getCenter());
// Add the ordering features. These are the gold ones that all have the same z-index
// and succomb to y-ordering.
var features = [];
for (var index = 0; index < NUMBER_OF_FEATURES; index++) {
// Calculate a random x/y. Subtract half the diameter to make some
// features negative.
var x = (parseInt(Math.random() * DIAMETER)) - (DIAMETER / 2);
var y = (parseInt(Math.random() * DIAMETER)) - (DIAMETER / 2);
var pixel = new OpenLayers.Pixel(center.x + x, center.y + y);
var lonLat = map.getLonLatFromViewPortPx(pixel);
features.push(
new OpenLayers.Feature.Vector(
new OpenLayers.Geometry.Point(lonLat.lon, lonLat.lat)
)
);
}
layer.addFeatures(features);
}
</script>
</head>
<body onload="init()">
<h1 id="title">Marker Shadows using Background Graphics/Z-Indexes</h1>
<div id="tags">
</div>
<p id="shortdesc">
This example shows off marker shadows using background graphics and z-indexes. Move the features around to show the shadows' interaction.
</p>
<br>
<table>
<tr>
<td>
<div id="map" class="smallmap"></div>
</td>
<td>
<div class="docs">
The features in this map were generated at random. Each of these features have a <i>backgroundGraphic</i> property set in the style map to add a shadow image. Note that the background graphics are not duplicated features with a different style.
<br><br>
The shadows were set to have a different z-index than the markers themselves, using the <i>backgroundGraphicZIndex</i> property. This makes sure all shadows stay behind the markers, keeping a clean look. The shadows were also placed nicely relative to the external graphic using the <i>backgroundXOffset</i> and <i>backgroundYOffset</i> property.
<br><br>
Y-ordering on the layer is enabled. See the <a href="./ordering.html">ordering example</a>.
</div>
</td>
</tr>
<tr>
<td>
<button onclick="drawFeatures()">Redraw Features</button>
</td>
</tr>
</table>
</body>
</html>

BIN
examples/marker_shadow.png Executable file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 374 B

203
examples/ordering.html Normal file
View File

@@ -0,0 +1,203 @@
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" href="../theme/default/style.css" type="text/css" />
<link rel="stylesheet" href="style.css" type="text/css" />
<style type="text/css">
.smallmap {
width: 300px;
}
.docs {
padding: 0px 5px;
}
td {
vertical-align: top;
}
</style>
<script src="../lib/OpenLayers.js" type="text/javascript"></script>
<script type="text/javascript">
var GOLD_Z_INDEX = 15;
var FIRST_RED_Z_INDEX = 10;
var SECOND_RED_Z_INDEX = 11;
var RADIUS_FROM_CENTER = 40;
var POINT_DISTANCE = 10;
function initYOrderMap() {
var map = new OpenLayers.Map("yorder");
var layer = new OpenLayers.Layer.Vector(
"Y-Order",
{
styleMap: new OpenLayers.StyleMap({
externalGraphic: "../img/marker-gold.png",
pointRadius: 10,
graphicZIndex: GOLD_Z_INDEX
}),
isBaseLayer: true,
yOrdering: true
}
);
map.addLayers([layer]);
map.zoomToMaxExtent();
// Add features to the layers to show off z-index/y-ordering.
// We do this after adding the layer so we can work in pixels.
var center = map.getViewPortPxFromLonLat(map.getCenter());
var top = new OpenLayers.Pixel(center.x, center.y - RADIUS_FROM_CENTER);
var bottom = new OpenLayers.Pixel(center.x, center.y + RADIUS_FROM_CENTER);
var left = new OpenLayers.Pixel(center.x - RADIUS_FROM_CENTER, center.y - POINT_DISTANCE / 2);
var right = new OpenLayers.Pixel(center.x + RADIUS_FROM_CENTER, center.y - POINT_DISTANCE / 2);
// Add the ordering features. These are the gold ones that all have the same z-index
// and succomb to y-ordering.
var orderingFeatures = [];
// Note: We use > here on purpose (instead of >= ), as well as subtracting the
// the POINT_DISTANCE in the beginning of the loop (as opposed to the end).
// This is purely for symmetry. Also note that the gold features are drawn
// from bottom to top so as to quickly signal whether or not y-ordering is working.
while (bottom.y > top.y) {
bottom.y -= POINT_DISTANCE;
var lonLat = map.getLonLatFromViewPortPx(bottom);
orderingFeatures.push(
new OpenLayers.Feature.Vector(
new OpenLayers.Geometry.Point(lonLat.lon, lonLat.lat)
)
);
}
layer.addFeatures(orderingFeatures);
// Add the z-index features. Technically, these features succomb to y-ordering
// as well; however, since they have different z-indexes, the z-indexes take
// precedence.
var indexFeatures = [];
var useFirst = true;
while (left.x <= right.x) {
var lonLat = map.getLonLatFromViewPortPx(left);
var point = new OpenLayers.Feature.Vector(
new OpenLayers.Geometry.Point(lonLat.lon, lonLat.lat)
);
// This is where the magic happens. We override the style on the layer
// to give our own style with alternativing z-indexes.
point.style = {
graphicZIndex: useFirst ? FIRST_RED_Z_INDEX : SECOND_RED_Z_INDEX,
externalGraphic: "../img/marker.png",
pointRadius: 10
}
indexFeatures.push(
point
);
left.x += POINT_DISTANCE;
useFirst = !useFirst;
}
layer.addFeatures(indexFeatures);
}
function initDrawingOrderMap() {
var map = new OpenLayers.Map("drawingorder");
var layer = new OpenLayers.Layer.Vector(
"Drawing Order",
{
// Note there's no z-index set, and yOrdering is left
// to its default.
styleMap: new OpenLayers.StyleMap({
externalGraphic: "../img/marker-green.png",
pointRadius: 10
}),
isBaseLayer: true
}
);
map.addLayers([layer]);
map.zoomToMaxExtent();
// Add features to the layers to show off z-index/y-ordering.
// We do this after adding the layer so we can work in pixels.
var center = map.getViewPortPxFromLonLat(map.getCenter());
var top = new OpenLayers.Pixel(center.x, center.y - RADIUS_FROM_CENTER);
var bottom = new OpenLayers.Pixel(center.x, center.y + RADIUS_FROM_CENTER);
var left = new OpenLayers.Pixel(center.x - RADIUS_FROM_CENTER, center.y);
var right = new OpenLayers.Pixel(center.x + RADIUS_FROM_CENTER, center.y);
// Add the ordering features. These are the gold ones that all have the same z-index
// and succomb to y-ordering.
var orderingFeatures = [];
while (bottom.y > top.y && left.x < right.x) {
var bottomLonLat = map.getLonLatFromViewPortPx(bottom);
var leftLonLat = map.getLonLatFromViewPortPx(left);
orderingFeatures.push(
new OpenLayers.Feature.Vector(
new OpenLayers.Geometry.Point(leftLonLat.lon, bottomLonLat.lat)
)
);
bottom.y -= POINT_DISTANCE / 2; // Divide by 2 for better visual.
left.x += POINT_DISTANCE / 2;
}
layer.addFeatures(orderingFeatures);
}
function init(){
initYOrderMap();
initDrawingOrderMap();
};
</script>
</head>
<body onload="init()">
<h1 id="title">Z-Index/Y-Order Example</h1>
<div id="tags">
</div>
<p id="shortdesc">
This example shows the use of z-indexing and y-ordering of external graphics. Zoom in and out to see this behavior.
</p>
<h3>Z-Index (with Y-Ordering enabled)</h3>
<table>
<tr>
<td>
<div id="yorder" class="smallmap"></div>
</td>
<td>
<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.
</div>
</td>
</tr>
</table>
<br>
<h3>Drawing Order (no Z-Indexes set, and Y-Ordering disabled)</h3>
<table>
<tr>
<td>
<div id="drawingorder" class="smallmap"></div>
</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.
<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.
</div>
</td>
</tr>
</table>
</body>
</html>