| 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: Transformation Box</title> |
|---|
| 8 | <link rel="stylesheet" href="../theme/default/style.css" type="text/css"> |
|---|
| 9 | <link rel="stylesheet" href="style.css" type="text/css"> |
|---|
| 10 | <script src="../lib/OpenLayers.js" type="text/javascript"></script> |
|---|
| 11 | <script type="text/javascript"> |
|---|
| 12 | var map, control; |
|---|
| 13 | |
|---|
| 14 | function init(){ |
|---|
| 15 | map = new OpenLayers.Map('map', {allOverlays: true}); |
|---|
| 16 | |
|---|
| 17 | // allow testing of specific renderers via "?renderer=Canvas", etc |
|---|
| 18 | var renderer = OpenLayers.Util.getParameters(window.location.href).renderer; |
|---|
| 19 | renderer = (renderer) ? [renderer] : OpenLayers.Layer.Vector.prototype.renderers; |
|---|
| 20 | |
|---|
| 21 | // the layer that we want to transform features on |
|---|
| 22 | var vectorLayer = new OpenLayers.Layer.Vector("Simple Geometry", { |
|---|
| 23 | styleMap: new OpenLayers.StyleMap({ |
|---|
| 24 | // a nice style for the transformation box |
|---|
| 25 | "transform": new OpenLayers.Style({ |
|---|
| 26 | display: "${getDisplay}", |
|---|
| 27 | cursor: "${role}", |
|---|
| 28 | pointRadius: 5, |
|---|
| 29 | fillColor: "white", |
|---|
| 30 | fillOpacity: 1, |
|---|
| 31 | strokeColor: "black" |
|---|
| 32 | }, { |
|---|
| 33 | context: { |
|---|
| 34 | getDisplay: function(feature) { |
|---|
| 35 | // hide the resize handle at the south-east corner |
|---|
| 36 | return feature.attributes.role === "se-resize" ? "none" : ""; |
|---|
| 37 | } |
|---|
| 38 | } |
|---|
| 39 | }), |
|---|
| 40 | "rotate": new OpenLayers.Style({ |
|---|
| 41 | display: "${getDisplay}", |
|---|
| 42 | pointRadius: 10, |
|---|
| 43 | fillColor: "#ddd", |
|---|
| 44 | fillOpacity: 1, |
|---|
| 45 | strokeColor: "black" |
|---|
| 46 | }, { |
|---|
| 47 | context: { |
|---|
| 48 | getDisplay: function(feature) { |
|---|
| 49 | // only display the rotate handle at the south-east corner |
|---|
| 50 | return feature.attributes.role === "se-rotate" ? "" : "none"; |
|---|
| 51 | } |
|---|
| 52 | } |
|---|
| 53 | }) |
|---|
| 54 | }), |
|---|
| 55 | renderers: renderer |
|---|
| 56 | }); |
|---|
| 57 | |
|---|
| 58 | // create the TransformFeature control, using the renderIntent |
|---|
| 59 | // from above |
|---|
| 60 | control = new OpenLayers.Control.TransformFeature(vectorLayer, { |
|---|
| 61 | renderIntent: "transform", |
|---|
| 62 | rotationHandleSymbolizer: "rotate" |
|---|
| 63 | }); |
|---|
| 64 | map.addControl(control); |
|---|
| 65 | |
|---|
| 66 | // create a polygon feature from a linear ring of points |
|---|
| 67 | var point = new OpenLayers.Geometry.Point(-111.04, 45.68); |
|---|
| 68 | var pointList = []; |
|---|
| 69 | for(var p=0; p<6; ++p) { |
|---|
| 70 | var a = p * (2 * Math.PI) / 7; |
|---|
| 71 | var r = Math.random(1) + 2; |
|---|
| 72 | var newPoint = new OpenLayers.Geometry.Point(point.x + (r * Math.cos(a)), |
|---|
| 73 | point.y + (r * Math.sin(a))); |
|---|
| 74 | pointList.push(newPoint); |
|---|
| 75 | } |
|---|
| 76 | pointList.push(pointList[0]); |
|---|
| 77 | |
|---|
| 78 | var linearRing = new OpenLayers.Geometry.LinearRing(pointList); |
|---|
| 79 | var polygonFeature = new OpenLayers.Feature.Vector( |
|---|
| 80 | new OpenLayers.Geometry.Polygon([linearRing])); |
|---|
| 81 | |
|---|
| 82 | |
|---|
| 83 | map.addLayer(vectorLayer); |
|---|
| 84 | map.setCenter(new OpenLayers.LonLat(point.x, point.y), 5); |
|---|
| 85 | var anotherFeature = polygonFeature.clone(); |
|---|
| 86 | polygonFeature.geometry.move(-3, 0); |
|---|
| 87 | anotherFeature.geometry.move(3, 0); |
|---|
| 88 | vectorLayer.addFeatures([polygonFeature, anotherFeature]); |
|---|
| 89 | |
|---|
| 90 | // start with the transformation box on polygonFeature |
|---|
| 91 | control.setFeature(polygonFeature, {rotation: 45, scale: 0.5, ratio: 1.5}); |
|---|
| 92 | } |
|---|
| 93 | </script> |
|---|
| 94 | </head> |
|---|
| 95 | <body onload="init()"> |
|---|
| 96 | <h1 id="title">Vector Feature Transformation Box Example</h1> |
|---|
| 97 | |
|---|
| 98 | <div id="tags"> |
|---|
| 99 | vector, feature, transformation, stylemap |
|---|
| 100 | </div> |
|---|
| 101 | <p id="shortdesc"> |
|---|
| 102 | Shows the use of the TransformFeature control. |
|---|
| 103 | </p> |
|---|
| 104 | <div style="text-align: right"> |
|---|
| 105 | <div dir="rtl" id="map" class="smallmap"></div> |
|---|
| 106 | </div> |
|---|
| 107 | <div id="docs"> |
|---|
| 108 | <p>This example shows transformation of vector features with a |
|---|
| 109 | tranformation box. Grab one of the handles to resize the feature. |
|---|
| 110 | Holding the SHIFT key will preserve the aspect ratio. Use the gray |
|---|
| 111 | handle to rotate the feature and hold the SHIFT key to only rotate |
|---|
| 112 | in 45° increments. |
|---|
| 113 | </p> |
|---|
| 114 | <p>In this example, the transformation box has been set on the left |
|---|
| 115 | feature, with a rotation preset of 45°. Clicking on the right feature |
|---|
| 116 | will set it for transformation, starting with an unrotated box. |
|---|
| 117 | Dragging a feature or the box edges will move it around. |
|---|
| 118 | </p> |
|---|
| 119 | </div> |
|---|
| 120 | |
|---|
| 121 | </body> |
|---|
| 122 | </html> |
|---|
| 123 | |
|---|
