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.4.0/apidoc/ol.geom.Polygon.html#applyTransform)

In order to try it, I made this:

var points = [[1,0],[1,-6],[-1,-6],[-1,0],[1,0] ];
var polygon = new ol.geom.Polygon([points]);
var rotateTransform = function (coords) {              
    var renderArray=[];
       for (var i = 0; i < coords.length; i++) {
            //rotation 45 degrees
            var rot  =  45 / 180 * Math.PI;
            renderArray[i]   = (coords[i][0] + 0.2 * Math.cos(rot));
            renderArray[i+1] = (coords[i][1]  + 0.2* Math.sin(rot));
        }
       return renderArray;
}; 
        polygon.applyTransform(rotateTransform(points));

When I run this, i have "TypeError: a is not a function"

Jsfiddle: http://jsfiddle.net/tlebras/qnk86o6j/1/

Is what I'm trying to do really possible with OpenLayers 3? If it is, what's wrong with my approach?

Thanks

回答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) return 0;
    if (dy == 0)
        rot = (dx > 0) ? 0 : Math.PI;
    else if (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/

来源：https://stackoverflow.com/questions/32736121/rotating-polygon-in-openlayers-3

标签

javascript

openlayers-3