OpenLayers中如何画扇形

项目中用到了地图展示,但是有个需求是根据参数画扇形,但是OpenLayers没有画扇形的现成函数,在某个牛人的帮助下,修改了下源代码便可以了

1,首先在源码中加入以下代码,最好是在OpenLayers.Geometry.Polygon.createRegularPolygon这个函数的源代码后面加入:

//参数分别是圆心,半径,边数,弧度,旋转角度(即右边半径与x正向轴的角度)
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]);};

2,客户端使用例子:

var map=new OpenLayers.Map("map_canvas");//初始化地图对象
vector_site_layer = new OpenLayers.Layer.Vector('Vector Layer');//生成一个图层层,放所有扇形
map.addLayers([vector_site_layer]);//将图层加入地图
var origi_point = new OpenLayers.Geometry.Point('100', '40');//根据经纬度生成圆点
//调用画扇形的函数
var sector = new OpenLayers.Geometry.Polygon.createRegularPolygonCurve(
					origi_point,//圆心
					gain,//半径
					100,//边数
					antBearing,//弧度
					lobeAngle //方向角
					);				

			//通过扇形生成一个Feature,并加入了各种自定义属性
var polygonFeature = new OpenLayers.Feature.Vector( 
					sector,
					{
						'id':'sector_',//扇形id
						'type':'sector',//类型
						'name':'join'//名字
					});
vector_site_layer.addFeatures(polygonFeature);//将扇形加入图层


大功告成,当然还可以根据扇形的参数不同显示不同的颜色。



  • 0
    点赞
  • 10
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
要使用OpenLayers绘制扇形,你可以使用OpenLayers的几何图形类(Geometry)和绘制类(Feature)来实现。下面是一个简单的示例代码: ```javascript // 创建一个扇形心点坐标 var center = ol.proj.transform([longitude, latitude], 'EPSG:4326', 'EPSG:3857'); // 创建一个圆弧的坐标数组 var coordinates = []; for (var i = startAngle; i <= endAngle; i += 0.1) { var angle = i * Math.PI / 180; var x = center[0] + radius * Math.cos(angle); var y = center[1] + radius * Math.sin(angle); coordinates.push([x, y]); } // 创建一个扇形的几何图形 var sectorGeometry = new ol.geom.Polygon([coordinates]); // 创建一个扇形绘制要素 var sectorFeature = new ol.Feature({ geometry: sectorGeometry }); // 创建一个矢量图层 var vectorLayer = new ol.layer.Vector({ source: new ol.source.Vector({ features: [sectorFeature] }), style: new ol.style.Style({ fill: new ol.style.Fill({ color: 'rgba(255, 0, 0, 0.5)' // 设置填充颜色和透明度 }), stroke: new ol.style.Stroke({ color: 'red', // 设置边框颜色 width: 1 // 设置边框宽度 }) }) }); // 将矢量图层添加到地图 map.addLayer(vectorLayer); ``` 在上面的示例代码,你需要提供扇形心点坐标(经度和纬度)、起始角度、结束角度和半径。你可以根据需要调整填充颜色、边框颜色和宽度等样式属性。 此外,你还需要创建一个OpenLayers的地图对象(`map`)并将其添加到网页的一个容器。你可以根据OpenLayers的文档来详细了解如何创建地图对象和添加图层。 注意:在使用上述代码之前,请确保已经引入OpenLayers库文件,并正确设置地图容器的大小和投影坐标系等相关配置。
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值