項目中用到了地圖展示,但是有個需求是根據參數畫扇形,但是OpenLayers沒有畫扇形的現成函數,在某個牛人的幫助下,修改了下源代碼便可以了

1,首先在源碼中加入以下代碼,最好是在OpenLayers.Geometry.Polygon.createRegularPolygon這個函數的源代碼后面加入:

 

[javascript] view plaincopy
  1. //參數分別是圓心,半徑,邊數,弧度,旋轉角度(即右邊半徑與x正向軸的角度)  
[javascript] view plaincopy
  1. OpenLayers.Geometry.Polygon.createRegularPolygonCurve = function(origin, radius, sides,r,angel) {  
  2.     var rotation = 360 - r;  
  3.     var angle = Math.PI * ((1/sides) - (1/2));  
  4.     if(rotation) {  
  5.         angle += (rotation / 180) * Math.PI;  
  6.     }      
  7.     var rotatedAngle, x, y;  
  8.     var points = [];  
  9.     for(var i=0; i<sides; ++i) {  
  10.         var an = i*((360 - rotation)/360);  
  11.     rotatedAngle = angle + (an * 2 * Math.PI / sides);  
  12.     x = origin.x + (radius * Math.cos(rotatedAngle));  
  13.     y = origin.y + (radius * Math.sin(rotatedAngle));  
  14.     points.push(new OpenLayers.Geometry.Point(x, y));  
  15.     }  
  16.     if(rotation!=0){  
  17.         points.push(origin);  
  18.     }  
  19.     var ring = new OpenLayers.Geometry.LinearRing(points);  
  20.     ring.rotate(parseFloat(r)+90+parseFloat(angel),origin);  
  21.     return new OpenLayers.Geometry.Polygon([ring]);};  

 

2,客戶端使用例子:

 

[javascript] view plaincopy
  1. var map=new OpenLayers.Map("map_canvas");//初始化地圖對象  
  2. vector_site_layer = new OpenLayers.Layer.Vector('Vector Layer');//生成一個圖層層,放所有扇形  
  3. map.addLayers([vector_site_layer]);//將圖層加入地圖  
  4. var origi_point = new OpenLayers.Geometry.Point('100''40');//根據經緯度生成圓點  
  5. //調用畫扇形的函數  
  6. var sector = new OpenLayers.Geometry.Polygon.createRegularPolygonCurve(  
  7.                     origi_point,//圓心  
  8.                     gain,//半徑  
  9.                     100,//邊數  
  10.                     antBearing,//弧度  
  11.                     lobeAngle //方向角  
  12.                     );                
  13.   
  14.             //通過扇形生成一個Feature,并加入了各種自定義屬性  
  15. var polygonFeature = new OpenLayers.Feature.Vector(   
  16.                     sector,  
  17.                     {  
  18.                         'id':'sector_',//扇形id  
  19.                         'type':'sector',//類型  
  20.                         'name':'join'//名字  
  21.                     });  
  22. vector_site_layer.addFeatures(polygonFeature);//將扇形加入圖層  

 


大功告成,當然還可以根據扇形的參數不同顯示不同的顏色。