openlayers 画扇形

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

      效果如下: