在OpenLayers 3中旋转多边形 [英] Rotating polygon in OpenLayers 3

问题描述

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

I am new to OpenLayers 3 and I want to know how to rotate a polygon.

我认为，如果有办法，可以使用applyTransform方法(

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

运行此命令时，出现"TypeError:a不是函数"

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

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

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

我要使用OpenLayers 3真正实现的目标吗? 如果是的话，我的方法有什么问题?

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

谢谢

推荐答案

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

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/

这篇关于在OpenLayers 3中旋转多边形的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！