openlayers入门开发系列之小区信号扇形图篇

本篇的重点内容是利用openlayers实现小区信号覆盖的扇形图功能，效果图如下：

点击扇形查询信息效果：

实现思路

• 界面设计

//信号扇形
"<div style='height:25px;background:#30A4D5;margin-top:10px;width: 98%;margin-left: 3px;float: left;'>" +
            "<span style='margin-left:5px;font-size: 13px;color:white;'>信号扇形</span>" +
       "</div>" +
      '<div id="basestationsLayer" style="padding:5px;float: left;">' +
           '<input type="checkbox" name="basestationslayer" id="basestationslayer"  style="width: 15px;height: 15px;vertical-align: middle;margin: auto;"/>' +
           '<label style="font-weight: normal;vertical-align: middle;margin: auto;">信号扇形</label>' +
'</div>' 

• 点击事件

//信号扇形
$("#basestationsLayer input").bind("click", function () {
            if (this.checked) {
                var map = bmap.getMap();
                map.getView().setCenter([13375119.498201383, 3545903.958818198]);
                map.getView().setZoom(15);
                DCI.BaseStationsLayer.Init(map);
            }
            else {
                if(DCI.BaseStationsLayer.layer){
                    bmap.getMap().removeLayer(DCI.BaseStationsLayer.layer);
                    DCI.BaseStationsLayer.layer = null;
                }
            }
}) 

• 扇形绘制初始化代码

/**绘制扇形
 *@data
**/
loadbaseStations:function(baseStations){
        if(baseStations && baseStations.rows.length>0){
            var len = baseStations.rows.length;
            for(var i = 0;i<len;i++){
                var record = baseStations.rows[i];
                var feature = null;
                var x = record.longitude;
                var y = record.latitude;
                if (isNaN(x) || isNaN(y)) return feature;
                var geom = this.toSectorGeometry(record);
                if (!geom) return feature;
                record.id = record.id || record.eci;
                feature = new ol.Feature();
                feature.setId(record.id);
                feature.set("__info", record, true);
                feature.setGeometry(geom);
                DCI.BaseStationsLayer.layer.getSource().addFeature(feature);
            }
        }
    },
    toSectorGeometry:function(record){
        //频段
        var bandIndication = record.bandIndication;
        var angle, r;
        var azimuth = record.azimuth;
        switch (bandIndication) {
            case 3:
                {
                    angle = 25;
                    r = 120;
                    break;
                }
            case 8:
                {
                    angle = 20;
                    r = 150;
                    break;
                }
            case 34:
                {
                    angle = 40;
                    r = 100;
                    break;
                }
            case 38:
                {
                    angle = 60;
                    r = 60;
                    break;
                }
            case 39:
                {
                    angle = 50;
                    r = 80;
                    break;
                }
            case 40:
                {
                    //方位角为空
                    if (isNaN(azimuth)) {
                        angle = 360;
                        r = 25;
                        azimuth = 0;
                    } else {
                        angle = 90;
                        r = 25;
                    }
                    break;
                }
            case 41:
                {
                    angle = 60;
                    r = 60;
                    break;
                }
        }

        var r = r / 111319.49079327358;
        record["__geomR"] = r; //用于绘制几何的半径
        var params = {
            angle: angle,//夹角
            direction: azimuth,
            x: record.longitude,
            y: record.latitude,
            r: r
        };
        //判断不为数字
        if (isNaN(params.angle) || isNaN(params.direction) || isNaN(params.x) || isNaN(params.y) || isNaN(params.r)) {
            return null;
        }
        var angles = bxmap.math.getAngles(params.angle, params.direction);

        var rings = bxmap.math.getRings([params.x, params.y], params.r, angles[0], angles[1], 30);
        //坐标系之间转换
        if(rings.length>0){
            for(var i=0;i<rings.length;i++){
                var newCoord=ol.proj.transform(rings[i],'EPSG:4326','EPSG:3857');//由前面坐标系转为后面坐标系坐标        
                rings[i] = newCoord;
            }
        }
        var polygon = new ol.geom.Polygon([rings]);
        return polygon;      
    }

• 扇形绘制核心代码

/**根据方位角和夹角获取起始角度和结束角度
* @params {number}{number}夹角，方位角
* return {array}
*/
bxmap.math.getAngles = function (angle, direction) {
    var startAngle, endAngle;
    startAngle = direction - angle / 2;
    endAngle = direction + angle / 2;
    return [startAngle, endAngle];
}

/**绘制扇形范围
*@params {中心点} {半径} {起始角度} {结束角度} {点数} 
**/
bxmap.math.getRings = function (center, radius, startAngle, endAngle, pointNum) {
    var sin;
    var cos;
    var x;
    var y;
    var angle;
    var points = new Array();
    points.push(center);
    for (var i = 0; i <= pointNum; i++) {
        angle = startAngle + (endAngle - startAngle) * i / pointNum;
        sin = Math.sin(angle * Math.PI / 180);
        cos = Math.cos(angle * Math.PI / 180);
        x = center[0] + radius * sin;
        y = center[1] + radius * cos;
        points[i + 1] = [x, y];
    }
    var point = points;
    point.push(center);
    return point;
}