Rotating Polygon In Openlayers 3
I am new to OpenLayers 3 and I want to know how to rotate a polygon. I think if there is a way to do it it should be by using the applyTransform method (http://openlayers.org/en/v3
Solution 1:
I found a way to do it, I needed to define a point to make the rotation, I've chosen the center of the polygon.
var points = [[1,0],[1,-6],[-1,-6],[-1,0],[1,0] ];
var polygonCenter=[0,-3];
The rotate function get the current angle of every point in the array, and change that heading to rotate the feature. Here is the example, the function is rotating the feature by 50°
var rotate = function (array) {
var rotated=[];
for (var i = 0; i < array.length-1; i++) {
rotated.push([]);
var ptx = array[i][0];
var pty = array[i][1];
var currentRotation = getRotation(ptx - polygonCenter[0], pty - polygonCenter[1]);
var length = Math.sqrt(Math.pow(ptx - polygonCenter[0], 2) + Math.pow(pty -polygonCenter[1], 2));
var newRotation = currentRotation + 50;
rotated[i][0] = (polygonCenter[0] + length * Math.cos(newRotation));
rotated[i][1] = (polygonCenter[1] + length * Math.sin(newRotation));
}
rotated.push([]);
rotated[array.length-1][0]=rotated[0][0];
rotated[array.length-1][1]=rotated[0][1];
return rotated;
};
var polygon = new ol.geom.Polygon([rotate(points)]);
Here is the function which calculate the heading
var getRotation = function(dx, dy) {
var rot = 0;
if (dx == 0 && dy == 0) return0;
if (dy == 0)
rot = (dx > 0) ? 0 : Math.PI;
elseif (dx == 0)
rot = (dy > 0) ? 0.5 * Math.PI : 1.5 * Math.PI;
else {
var rot = Math.atan(dy/dx);
if (dx < 0 && dy > 0) rot += Math.PI;
if (dx < 0 && dy < 0) rot += Math.PI;
if (dx > 0 && dy < 0) rot += 2 * Math.PI;
}
return rot;
};
jsfiddle : http://jsfiddle.net/tlebras/epyjshj7/2/
Post a Comment for "Rotating Polygon In Openlayers 3"