Files
openlayers/examples/styles-rotation.html
crschmidt efb925d632 Commit fixes for:
* (Closes #2360) make Layer.addOptions call initResolutions if necessary
 * (Closes #2656) no way to pass read options from protocol to format
 * (Closes #2751) Changes in languages: "es" and "ca".
 * (Closes #2814) SLDSelect control tests failing
 * (Closes #2815) Cluster Strategy should not destroy all features

Also:
 * Change examples to use OSGeo, rather than MetaCarta, servers.
 * Change copyright statements to correctly state joint copyright
   in the project, rather than MetaCarta copyright.


git-svn-id: http://svn.openlayers.org/branches/openlayers/2.10@10715 dc9f47b5-9b13-0410-9fdd-eb0c1a62fdaf
2010-09-02 21:43:25 +00:00

87 lines
3.0 KiB
HTML

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>OpenLayers Styles Rotation 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" type="text/javascript"></script>
<script type="text/javascript">
var map;
var vectors;
function init(){
map = new OpenLayers.Map('map');
var wms = new OpenLayers.Layer.WMS(
"OpenLayers WMS",
"http://vmap0.tiles.osgeo.org/wms/vmap0",
{layers: 'basic'}
);
vectors = new OpenLayers.Layer.Vector(
"Simple Geometry",
{
styleMap: new OpenLayers.StyleMap({
"default": {
externalGraphic: "../img/marker-gold.png",
//graphicWidth: 17,
graphicHeight: 20,
graphicYOffset: -19,
rotation: "${angle}",
fillOpacity: "${opacity}"
},
"select": {
cursor: "crosshair",
externalGraphic: "../img/marker.png"
}
})
}
);
map.addLayers([wms, vectors]);
var features = [];
var x = -111.04;
var y = 45.68;
for(var i = 0; i < 10; i++){
x += i * .5;
y += i * .1;
features.push(
new OpenLayers.Feature.Vector(
new OpenLayers.Geometry.Point(x, y), {angle: (i*36)%360-180, opacity:i/10+.1}
)
);
features.push(
new OpenLayers.Feature.Vector(
new OpenLayers.Geometry.Point(x, y), {angle: (i*36)%360, opacity:i/10+.1}
)
);
}
map.setCenter(new OpenLayers.LonLat(x-10, y), 5);
vectors.addFeatures(features);
var selectControl = new OpenLayers.Control.SelectFeature(
vectors, {hover: true});
map.addControl(selectControl);
selectControl.activate();
};
</script>
</head>
<body onload="init()">
<h1 id="title">Rotation Style Example</h1>
<p id="shortdesc">
Use the rotation property of a point symbolizer to rotate
point symbolizers.
</p>
<div id="map" class="smallmap"></div>
<div id="docs">
To style point features with rotation, use the rotation property of the
symbolizer. The center of the rotation is the point of the image
specified by graphicXOffset and graphicYOffset. The rotation is
specified in degrees clockwise.
</div>
</body>
</html>