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