openlayers2.X畫園形和扇形demo

OpenLayers有一個類: OpenLayers.Geometry.Polygon.createRegularPolygon, 查看源代碼定義如下:

/**
 * APIMethod: createRegularPolygon
 * Create a regular polygon around a radius. Useful for creating circles 
 * and the like.
 * 
 * Parameters:
 * origin - {<OpenLayers.Geometry.Point>} center of polygon.
 * radius - {Float} distance to vertex, in map units.
 * sides - {Integer} Number of sides. 20 approximates a circle.
 * rotation - {Float} original angle of rotation, in degrees.
*/
OpenLayers.Geometry.Polygon.createRegularPolygon = function(origin, radius, sides, rotation) {  
var angle = Math.PI * ((1/sides) - (1/2));
if(rotation) {
        angle += (rotation / 180) * Math.PI;
    }
var rotatedAngle, x, y;
var points = [];
for(var i=0; i<sides; ++i) {
        rotatedAngle = angle + (i * 2 * Math.PI / sides);
        x = origin.x + (radius * Math.cos(rotatedAngle));
        y = origin.y + (radius * Math.sin(rotatedAngle));
        points.push(new OpenLayers.Geometry.Point(x, y));
    }
var ring = new OpenLayers.Geometry.LinearRing(points);
return new OpenLayers.Geometry.Polygon([ring]);
};

      這個類用於畫一個以origin爲圓心, 以radius爲半徑的多邊形, rotation則是畫圓該多邊形時的的起始角.

      var angle = Math.PI * ((1/sides) - (1/2)); // 數學裏的起始角應該是以正東方向爲0°, 逆時針旋轉爲正的, 而這裏多加了Math.PI*(1/2), 所以這個類中, 當rotation=0時, 是從正南方向畫起,逆時針方向爲正畫多邊形, 當sides=20時,這個多邊形將類似於一個圓.

      從代碼可以看出來, 它就是以radius爲半徑,圍繞origin找sides個點,然後將這些點連接起來組成一個多邊形.

      那麼如果我們要畫一個扇形, 那就不要讓這些點分佈在360°裏了, 比如, 如果我們想畫一個120°的扇形, 那麼就讓這sides個點分佈在這120°的範圍裏.

      改寫後的代碼如下:

　　

/**
 * APIMethod: 
 *
 * Parameters:
 * origin - {<OpenLayers.Geometry.Point>} center of polygon.
 * radius - {Float} distance to vertex, in map units.
 * sides - {Integer} Number of sides. 20 approximates a circle.
 * rotation - {Float} original angle of rotation, in degrees.
*/
OpenLayers.Geometry.Polygon.createRegularPolygonCurve = function(origin, radius, sides, rotation) {  
var angle = Math.PI * ((1/sides) - (1/2));
if(rotation) {
        angle += (rotation / 180) * Math.PI;
    }
var rotatedAngle, x, y;
var points = [];
for(var i=0; i<sides; ++i) {
var an = i*((360 - rotation)/360); // 注: 主要是這裏
        rotatedAngle = angle + (an * 2 * Math.PI / sides);
        x = origin.x + (radius * Math.cos(rotatedAngle));
        y = origin.y + (radius * Math.sin(rotatedAngle));
        points.push(new OpenLayers.Geometry.Point(x, y));
    }
　　//當rotation!=0時,要將圓心與扇形的起點和終點連接起來,構成扇形的兩個邊
    if(rotation!=0){
        points.push(origin);
    }
var ring = new OpenLayers.Geometry.LinearRing(points);
return new OpenLayers.Geometry.Polygon([ring]);
};

      這樣畫出來的扇形, 也是以正南方向爲0°, 逆時針旋轉爲正畫多邊形的, rotation則是扇形的起始角, 也就是這個扇形總是以正南0°爲終點.

　　畫扇形的openlayers實例代碼如下:

     

　　　　var vectorLayer = new OpenLayers.Layer.Vector("扇形"); 
　　　　var origi_point = new OpenLayers.Geometry.Point(lon,lat);
　　　　var circle = new OpenLayers.Geometry.Polygon.createRegularPolygonCurve(origi_point,0.0100,80,90,origi_point);
　　　　var polygonFeature = new OpenLayers.Feature.Vector(circle);
　　　　vectorLayer.addFeatures([polygonFeature]);
　　　　map.addLayer(vectorLayer);

      效果如下:

　　

原文：http://www.cnblogs.com/lingxue3769/archive/2011/11/01/2231409.html

以上的demo貌似有問題，這裏推薦使用如下代碼繪製扇形的才正確：

/**
 * APIMethod:OpenLayers繪製扇形的接口擴展
 * @param origin 圓心
 * @param radius 半徑
 * @param sides 邊數
 * @param r 弧度
 * @param angel 旋轉角度（扇形右邊半徑與x正向軸的角度）
 * @returns {OpenLayers.Geometry.Polygon}
 */
OpenLayers.Geometry.Polygon.createRegularPolygonCurve = function(origin, radius, sides,r,angel) {
    var rotation = 360 - r;
    var angle = Math.PI * ((1/sides) - (1/2));
    if(rotation) {
        angle += (rotation / 180) * Math.PI;
    }
    var rotatedAngle, x, y;
    var points = [];
    for(var i=0; i<sides; ++i) {
        var an = i * ((360 - rotation) / 360);
        rotatedAngle = angle + (an * 2 * Math.PI / sides);
        x = origin.x + (radius * Math.cos(rotatedAngle));
        y = origin.y + (radius * Math.sin(rotatedAngle));
        points.push(new OpenLayers.Geometry.Point(x, y));
    }
    if(rotation!=0){
    points.push(origin);
    }
    var ring = new OpenLayers.Geometry.LinearRing(points);
    ring.rotate(parseFloat(r)+90+parseFloat(angel),origin);
    return new OpenLayers.Geometry.Polygon([ring]);
};