Files
openlayers/examples/resize-features.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

95 lines
3.9 KiB
HTML

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>OpenLayers Resize 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, vectorLayer, 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"
};
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]);
}
var origin = new OpenLayers.Geometry.Point(-111.04, 45.68);
function resizeFeatures(scale) {
pointFeature.geometry.resize(scale, origin);
lineFeature.geometry.resize(scale, origin);
polygonFeature.geometry.resize(scale, origin);
vectorLayer.redraw();
}
</script>
</head>
<body onload="init()">
<h1 id="title">Resize Features Programatically</h1>
<p id="shortdesc">
Demonstration of how to use the geometry resize methods to
change feature sizes programatically.
</p>
<div id="map" class="smallmap"></div>
<p>This example demonstrates how features can be resized. There is not yet
a control built that provides a tool for resizing, but the geometry.resize
method can be accessed to resize programmatically.</p>
<p>Make the features <a href="javascript: resizeFeatures(1.5);">bigger</a>
or <a href="javascript: resizeFeatures(1 / 1.5);">smaller</a>.
</body>
</html>