openlayers/examples/ordering.html

   1 <html xmlns="http://www.w3.org/1999/xhtml">
   2   <head>
   3     <title>OpenLayers: Z-Ordering and Y-Ordering of Vector Features</title>
   4     <link rel="stylesheet" href="../theme/default/style.css" type="text/css" />
   5     <link rel="stylesheet" href="style.css" type="text/css" />
   6     <style type="text/css">
   7         .smallmap {
   8             width: 300px;
   9         }
  10
  11         .docs {
  12             padding: 0px 5px;
  13         }
  14
  15         td {
  16             vertical-align: top;
  17         }
  18
  19     </style>
  20     <script src="../lib/OpenLayers.js" type="text/javascript"></script>
  21     <script type="text/javascript">
  22
  23         var GOLD_Z_INDEX = 15;
  24         var FIRST_RED_Z_INDEX = 10;
  25         var SECOND_RED_Z_INDEX = 11;
  26
  27         var RADIUS_FROM_CENTER = 40;
  28         var POINT_DISTANCE = 10;
  29
  30         function initYOrderMap() {
  31             var map = new OpenLayers.Map("yorder");
  32
  33             var layer = new OpenLayers.Layer.Vector(
  34                 "Y-Order",
  35                 {
  36                     styleMap: new OpenLayers.StyleMap({
  37                         externalGraphic: "../img/marker-gold.png",
  38                         pointRadius: 10,
  39                         graphicZIndex: GOLD_Z_INDEX
  40                     }),
  41                     isBaseLayer: true,
  42                     rendererOptions: {yOrdering: true}
  43                 }
  44             );
  45
  46             map.addLayers([layer]);
  47             map.zoomToMaxExtent();
  48
  49             // Add features to the layers to show off z-index/y-ordering.
  50             // We do this after adding the layer so we can work in pixels.
  51             var center = map.getViewPortPxFromLonLat(map.getCenter());
  52
  53             var top = new OpenLayers.Pixel(center.x, center.y - RADIUS_FROM_CENTER);
  54             var bottom = new OpenLayers.Pixel(center.x, center.y + RADIUS_FROM_CENTER);
  55             var left = new OpenLayers.Pixel(center.x - RADIUS_FROM_CENTER, center.y - POINT_DISTANCE / 2);
  56             var right = new OpenLayers.Pixel(center.x + RADIUS_FROM_CENTER, center.y - POINT_DISTANCE / 2);
  57
  58             // Add the ordering features. These are the gold ones that all have the same z-index
  59             // and succomb to y-ordering.
  60             var orderingFeatures = [];
  61             // Note: We use > here on purpose (instead of >= ), as well as subtracting the
  62             // the POINT_DISTANCE in the beginning of the loop (as opposed to the end).
  63             // This is purely for symmetry. Also note that the gold features are drawn
  64             // from bottom to top so as to quickly signal whether or not y-ordering is working.
  65             while (bottom.y > top.y) {
  66                 bottom.y -= POINT_DISTANCE;
  67                 var lonLat = map.getLonLatFromViewPortPx(bottom);
  68                 orderingFeatures.push(
  69                     new OpenLayers.Feature.Vector(
  70                         new OpenLayers.Geometry.Point(lonLat.lon, lonLat.lat)
  71                     )
  72                 );
  73             }
  74
  75             layer.addFeatures(orderingFeatures);
  76
  77             // Add the z-index features. Technically, these features succomb to y-ordering
  78             // as well; however, since they have different z-indexes, the z-indexes take
  79             // precedence.
  80             var indexFeatures = [];
  81             var useFirst = true;
  82             while (left.x <= right.x) {
  83                 var lonLat = map.getLonLatFromViewPortPx(left);
  84                 var point = new OpenLayers.Feature.Vector(
  85                     new OpenLayers.Geometry.Point(lonLat.lon, lonLat.lat)
  86                 );
  87
  88                 // This is where the magic happens. We override the style on the layer
  89                 // to give our own style with alternativing z-indexes.
  90                 point.style = {
  91                     graphicZIndex: useFirst ? FIRST_RED_Z_INDEX : SECOND_RED_Z_INDEX,
  92                     externalGraphic: "../img/marker.png",
  93                     pointRadius: 10
  94                 }
  95
  96                 indexFeatures.push(
  97                     point
  98                 );
  99
 100                 left.x += POINT_DISTANCE;
 101                 useFirst = !useFirst;
 102             }
 103
 104             layer.addFeatures(indexFeatures);
 105         }
 106
 107         function initDrawingOrderMap() {
 108             var map = new OpenLayers.Map("drawingorder");
 109
 110             var layer = new OpenLayers.Layer.Vector(
 111                 "Drawing Order",
 112                 {
 113                     // The zIndex is taken from the zIndex attribute of the features
 114                     styleMap: new OpenLayers.StyleMap({
 115                         graphicZIndex: "${zIndex}",
 116                         externalGraphic: "../img/marker-green.png",
 117                         pointRadius: 10
 118                     }),
 119                     isBaseLayer: true,
 120                     // enable the indexer by setting zIndexing to true
 121                     rendererOptions: {zIndexing: true}
 122                 }
 123             );
 124
 125             map.addLayers([layer]);
 126             map.zoomToMaxExtent();
 127
 128             // Add features to the layers to show off z-index/y-ordering.
 129             // We do this after adding the layer so we can work in pixels.
 130             var center = map.getViewPortPxFromLonLat(map.getCenter());
 131
 132             var top = new OpenLayers.Pixel(center.x, center.y - RADIUS_FROM_CENTER);
 133             var bottom = new OpenLayers.Pixel(center.x, center.y + RADIUS_FROM_CENTER);
 134             var left = new OpenLayers.Pixel(center.x - RADIUS_FROM_CENTER, center.y);
 135             var right = new OpenLayers.Pixel(center.x + RADIUS_FROM_CENTER, center.y);
 136
 137             // Add the ordering features. These are the gold ones that all have the same z-index
 138             // and succomb to y-ordering.
 139             var orderingFeatures = [];
 140             while (bottom.y > top.y && left.x < right.x) {
 141                 var bottomLonLat = map.getLonLatFromViewPortPx(bottom);
 142                 var leftLonLat = map.getLonLatFromViewPortPx(left);
 143                 orderingFeatures.push(
 144                     new OpenLayers.Feature.Vector(
 145                         new OpenLayers.Geometry.Point(leftLonLat.lon, bottomLonLat.lat),
 146                         // Set the zIndex attribute of all features to 0.
 147                         // This attribute will be assigned to the graphicZIndex symbolizer property by the layer's styleMap
 148                         {zIndex: 0}
 149                     )
 150                 );
 151                 bottom.y -= POINT_DISTANCE / 2; // Divide by 2 for better visual.
 152                 left.x += POINT_DISTANCE / 2;
 153             }
 154             // only the first feature gets a zIndex attribute of 1
 155             orderingFeatures[0].attributes.zIndex = 1;
 156
 157             layer.addFeatures(orderingFeatures);
 158         }
 159
 160         function init(){
 161             initYOrderMap();
 162             initDrawingOrderMap();
 163         };
 164
 165     </script>
 166   </head>
 167   <body onload="init()">
 168         <h1 id="title">Z-Index/Y-Order Example</h1>
 169
 170         <div id="tags">
 171         </div>
 172
 173         <p id="shortdesc">
 174            This example shows the use of z-indexing and y-ordering of external graphics. Zoom in and out to see this behavior.
 175         </p>
 176
 177         <h3>Z-Index (with Y-Ordering enabled)</h3>
 178         <table>
 179             <tr>
 180                 <td>
 181                     <div id="yorder" class="smallmap"></div>
 182                 </td>
 183                 <td>
 184                     <div class="docs">
 185                         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).
 186                         <br><br>
 187                         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.
 188                     </div>
 189                 </td>
 190             </tr>
 191         </table>
 192         <br>
 193         <h3>Z-Index and Drawing Order (Z-Indexes set, and Y-Ordering disabled)</h3>
 194         <table>
 195             <tr>
 196                 <td>
 197                     <div id="drawingorder" class="smallmap"></div>
 198                 </td>
 199                 <td>
 200                     <div class="docs">
 201                         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.
 202                         <br><br>
 203                         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).
 204                     </div>
 205                 </td>
 206             </tr>
 207         </table>
 208
 209
 210     </body>
 211 </html>