summaryrefslogtreecommitdiff
path: root/misc/openlayers/examples/rotate-features.html
diff options
context:
space:
mode:
Diffstat (limited to 'misc/openlayers/examples/rotate-features.html')
-rw-r--r--misc/openlayers/examples/rotate-features.html113
1 files changed, 0 insertions, 113 deletions
diff --git a/misc/openlayers/examples/rotate-features.html b/misc/openlayers/examples/rotate-features.html
deleted file mode 100644
index 51e559b..0000000
--- a/misc/openlayers/examples/rotate-features.html
+++ /dev/null
@@ -1,113 +0,0 @@
-<!DOCTYPE html>
-<html>
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
- <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
- <meta name="apple-mobile-web-app-capable" content="yes">
- <title>OpenLayers Rotate Features Example</title>
- <link rel="stylesheet" href="../theme/default/style.css" type="text/css">
- <link rel="stylesheet" href="style.css" type="text/css">
- <style type="text/css">
- p {
- width: 500px;
- }
- </style>
- <script src="../lib/OpenLayers.js"></script>
- <script type="text/javascript">
- var map, pointFeature, lineFeature, polygonFeature;
-
- function init(){
- map = new OpenLayers.Map('map');
- var layer = new OpenLayers.Layer.WMS( "OpenLayers WMS",
- "http://vmap0.tiles.osgeo.org/wms/vmap0", {layers: 'basic'} );
- map.addLayer(layer);
-
- var style_blue = OpenLayers.Util.extend({}, OpenLayers.Feature.Vector.style['default']);
- style_blue.strokeColor = "blue";
- style_blue.fillColor = "blue";
- var style_green = {
- strokeColor: "#339933",
- strokeOpacity: 1,
- strokeWidth: 3,
- pointRadius: 6,
- pointerEvents: "visiblePainted"
- };
-
- var vectorLayer = new OpenLayers.Layer.Vector("Simple Geometry");
-
- // create a point feature
- var point = new OpenLayers.Geometry.Point(-110, 45);
- pointFeature = new OpenLayers.Feature.Vector(point, null, style_blue);
-
- // create a line feature from a list of points
- var pointList = [];
- var newPoint = point;
- for(var p=0; p<5; ++p) {
- newPoint = new OpenLayers.Geometry.Point(newPoint.x + Math.random(1),
- newPoint.y + Math.random(1));
- pointList.push(newPoint);
- }
- lineFeature = new OpenLayers.Feature.Vector(
- new OpenLayers.Geometry.LineString(pointList),null,style_green);
-
- // create a polygon feature from a linear ring of points
- var pointList = [];
- for(var p=0; p<6; ++p) {
- var a = p * (2 * Math.PI) / 7;
- var r = Math.random(1) + 1;
- var newPoint = new OpenLayers.Geometry.Point(point.x + (r * Math.cos(a)),
- point.y + (r * Math.sin(a)));
- pointList.push(newPoint);
- }
- pointList.push(pointList[0]);
-
- var linearRing = new OpenLayers.Geometry.LinearRing(pointList);
- polygonFeature = new OpenLayers.Feature.Vector(
- new OpenLayers.Geometry.Polygon([linearRing]));
-
-
- map.addLayer(vectorLayer);
- map.setCenter(new OpenLayers.LonLat(point.x, point.y), 5);
- vectorLayer.addFeatures([pointFeature, lineFeature, polygonFeature]);
-
- // start rotating
- var origin = new OpenLayers.Geometry.Point(-111.04, 45.68);
- var style = {
- strokeColor: "#666666",
- strokeOpacity: 1,
- strokeWidth: 1,
- pointRadius: 2,
- pointerEvents: "visiblePainted"
- };
- var center = new OpenLayers.Feature.Vector(origin, null, style);
- vectorLayer.addFeatures([center]);
- window.setInterval(function() {rotateFeature(
- pointFeature, 360 / 20, origin)}, 100);
- window.setInterval(function() {rotateFeature(
- lineFeature, 360 / 40, origin)}, 100);
- window.setInterval(function(){rotateFeature(
- polygonFeature, -360 / 20, origin)}, 100);
- }
-
- function rotateFeature(feature, angle, origin) {
- feature.geometry.rotate(angle, origin);
- feature.layer.drawFeature(feature);
- }
- </script>
- </head>
- <body onload="init()">
- <h1 id="title">Rotate vector features</h1>
-
- <div id="tags">
- vector, feature, rotating, rotation, rotate, advanced, light
- </div>
- <p id="shortdesc">
- Details on how to create and rotate vector features programmatically
- </p>
-
- <div id="map" class="smallmap"></div>
- <div id="docs">This example shows a few features rotating. There is not yet a control
- built that provides a tool for rotating, but the geometry.rotate method
- can be accessed to rotate programmatically.</div>
- </body>
-</html>