在 OpenLayers 3 中旋转多边形

Question

我是 OpenLayers 3 的新手，我想知道如何旋转多边形。

我想如果有办法的话，应该是使用 applyTransform 方法 (http://openlayers.org/en/v3.4.0/apidoc/ol.geom.Polygon.html#applyTransform)

为了尝试，我做了这个：

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));

当我运行这个的时候，我有"TypeError: a is not a function"

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

我想用 OpenLayers 3 做的事情真的可行吗？如果是，我的方法有什么问题？

谢谢

Answer 1

我找到了一种方法，我需要定义一个点来进行旋转，我选择了多边形的中心。

var points = [[1,0],[1,-6],[-1,-6],[-1,0],[1,0] ];
var polygonCenter=[0,-3];

rotate 函数获取数组中每个点的当前角度，并更改该航向以旋转要素。下面是示例，函数是将特征旋转 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)]);

这是计算航向的函数

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/

在 OpenLayers 3 中旋转多边形

Rotating polygon in OpenLayers 3

javascript

openlayers-3