且构网

分享程序员开发的那些事...
且构网 - 分享程序员编程开发的那些事

在OpenLayers 3中旋转多边形

更新时间:2023-11-21 11:48:40

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

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

rotate函数获取数组中每个点的当前角度,并更改该标题以旋转特征. 这是示例,该功能将要素旋转50°

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

这里是计算标题的功能

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/

jsfiddle : http://jsfiddle.net/tlebras/epyjshj7/2/