source: sipes/libraries/openlayers/examples/marker-shadow.html @ 92f109b

stableversion-3.0
Last change on this file since 92f109b was 307d09d, checked in by José Gregorio Puentes <jpuentes@…>, 8 años ago

se agregaron las librerias
  • Propiedad mode establecida a 100644
File size: 5.9 KB
Línea 
1<!DOCTYPE html>
2<html>
3  <head>
4    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
5    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
6    <meta name="apple-mobile-web-app-capable" content="yes">
7    <title>OpenLayers: Vector Graphics with Shadows</title>
8    <link rel="stylesheet" href="../theme/default/style.css" type="text/css">
9    <link rel="stylesheet" href="style.css" type="text/css">
10    <style type="text/css">
11        .smallmap {
12            width: 300px;
13        }
14       
15        .docs {
16            padding: 0px 5px;
17        }
18       
19        td {
20            vertical-align: top;
21        }
22       
23    </style>
24    <script src="../lib/OpenLayers.js" type="text/javascript"></script>
25    <script type="text/javascript">
26       
27        var SHADOW_Z_INDEX = 10;
28        var MARKER_Z_INDEX = 11;
29       
30        var DIAMETER = 200;
31        var NUMBER_OF_FEATURES = 15;
32           
33        var map, layer;   
34           
35        function init() {
36            map = new OpenLayers.Map("map");
37           
38            // allow testing of specific renderers via "?renderer=Canvas", etc
39            var renderer = OpenLayers.Util.getParameters(window.location.href).renderer;
40            renderer = (renderer) ? [renderer] : OpenLayers.Layer.Vector.prototype.renderers;
41
42            layer = new OpenLayers.Layer.Vector(
43                "Marker Drop Shadows",
44                {
45                    styleMap: new OpenLayers.StyleMap({
46                        // Set the external graphic and background graphic images.
47                        externalGraphic: "../img/marker-gold.png",
48                        backgroundGraphic: "./img/marker_shadow.png",
49                       
50                        // Makes sure the background graphic is placed correctly relative
51                        // to the external graphic.
52                        backgroundXOffset: 0,
53                        backgroundYOffset: -7,
54                       
55                        // Set the z-indexes of both graphics to make sure the background
56                        // graphics stay in the background (shadows on top of markers looks
57                        // odd; let's not do that).
58                        graphicZIndex: MARKER_Z_INDEX,
59                        backgroundGraphicZIndex: SHADOW_Z_INDEX,
60                       
61                        pointRadius: 10
62                    }),
63                    isBaseLayer: true,
64                    rendererOptions: {yOrdering: true},
65                    renderers: renderer
66                }
67            );
68           
69            map.addLayers([layer]);
70           
71            // Add a drag feature control to move features around.
72            var dragFeature = new OpenLayers.Control.DragFeature(layer);
73           
74            map.addControl(dragFeature);
75           
76            dragFeature.activate();
77                       
78            map.zoomToMaxExtent();
79           
80            drawFeatures();
81        }
82       
83        function drawFeatures() {
84           
85            layer.removeFeatures(layer.features);
86           
87            // Create features at random around the center.
88            var center = map.getViewPortPxFromLonLat(map.getCenter());
89           
90            // Add the ordering features. These are the gold ones that all have the same z-index
91            // and succomb to y-ordering.
92            var features = [];
93           
94            for (var index = 0; index < NUMBER_OF_FEATURES; index++) {
95                // Calculate a random x/y. Subtract half the diameter to make some
96                // features negative.
97                var x = (parseInt(Math.random() * DIAMETER)) - (DIAMETER / 2);
98                var y = (parseInt(Math.random() * DIAMETER)) - (DIAMETER / 2);
99               
100                var pixel = new OpenLayers.Pixel(center.x + x, center.y + y);
101               
102                var lonLat = map.getLonLatFromPixel(pixel);
103                features.push(
104                    new OpenLayers.Feature.Vector(
105                        new OpenLayers.Geometry.Point(lonLat.lon, lonLat.lat)
106                    )
107                );
108            }
109           
110            layer.addFeatures(features);
111        }
112       
113    </script>
114  </head>
115  <body onload="init()">
116        <h1 id="title">Marker Shadows using Background Graphics/Z-Indexes</h1>
117
118        <div id="tags">
119            markers, shadow, style
120        </div>
121
122        <p id="shortdesc">
123           This example shows off marker shadows using background graphics and z-indexes. Move the features around to show the shadows' interaction.
124        </p>
125       
126        <br>
127
128        <table>
129            <tr>
130                <td>
131                    <div id="map" class="smallmap"></div>
132                </td>
133                <td>
134                    <div class="docs">
135                        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.
136                        <br><br>
137                        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.
138                        <br><br>
139                        Y-ordering on the layer is enabled. See the <a href="./ordering.html">ordering example</a>.
140                    </div>
141                </td>
142            </tr>
143            <tr>
144                <td>
145                    <button onclick="drawFeatures()">Redraw Features</button>
146                </td>
147            </tr>
148        </table>
149       
150       
151    </body>
152</html>
Nota: Vea TracBrowser para ayuda de uso del navegador del repositorio.