arcgis for js 3.X绘制雷达扫描效果
  TEZNKK3IfmPf 2024年07月26日 76 0

arcgis for js 3.X绘制雷达扫描效果

思路:
1、雷达刻度比较复杂,可以预先发布成图层,绘制时再调出来
arcgis for js 3.X绘制雷达扫描效果

2、雷达扫描效果,可由多条半径组成一个扇形
3、半径线条由起始角度(扫描方向中居于前)到截止角度,逐渐透明
4、利用定时器定期刷新,角度向前递增,绘制前先清除上一步骤的绘制结果

代码:

var _lines = [];//线条存储器
var _sAngle = 0,_eAngle = 0;//起始角度。开始都为0
var _timer;
	
function go(lon,lat){
     
       
	var layer = getLayer("radar1");//构造一张graphics图层,用于绘制
	var p0 = lngLatToXY([lon,lat]);//雷达站坐标,转换成平面坐标系,作为绘制的圆心。
	var offAngle = 0.50;//角度步长。0.50意味着每度圆弧对应2条半径
	var offAngTotal = 75;//扫描扇形夹角
	var offColor = (0.3 / offAngTotal) * offAngle;//透明度步长;0.3是最前面线条的透明度
	var lineWidth = 8 * offAngle;//线条宽度

	function scan() {
     
       
		//清掉现有线条
		for(var i in _lines){
     
       
			layer.remove(_lines[i]);
		}
		_lines = [];

		//记录转动角度
		_sAngle++;
		if((_sAngle - _eAngle) > offAngTotal )  _eAngle = _sAngle - offAngTotal;

		//画上新线条
		for(var i = _eAngle,j = 0;i < _sAngle;i += offAngle,j+=offColor){
     
       
			var p = getPoint(p0,i);
			//r,g,b,a;a,alpha,代表透明度,0为完全透明,1为完全不透明
			var color = new Color([16, 222, 14, j]);
			var line = getLine(color,lineWidth,p0,p);
			layer.add(line);
			_lines.push(line);
		}

		_timer = setTimeout(function(){
     
       
			scan();
		},25);
	}
	scan();
}
function getLine(color,lineWidth,p1,p2){
     
       //绘制一条半径
	//构造笔
	var sls = new SimpleLineSymbol(
		SimpleLineSymbol.STYLE_SOLID,
		color,
		lineWidth
	);
	//画线
	var polyline = new esri.geometry.Polyline({
     
       
		"paths": [[p1,p2]],
		"spatialReference": _map.spatialReference
	});
	return new esri.Graphic(polyline, sls);
}
function getPoint(center, angle) {
     
       //获得圆弧上的点(平面坐标)
	var radius = 42 * 1000;//雷达扫描范围为42千米;转换为米

	var sin = Math.sin(angle * Math.PI / 180);
	var cos = Math.cos(angle * Math.PI / 180);

	var x = center[0] + radius * sin;
	var y = center[1] + radius * cos;

	return [x, y];
}
function getLayer(id) {
     
       //获取绘制图层
	var layer = new GraphicsLayer({
     
        "id": id });
	map.addLayer(layer);

	return layer;
}
function lngLatToXY(pt){
     
       //经纬度转化为平面坐标
	var _f = 6378137, _p = 0.017453292519943;
	var lng = pt[0];//经度
	var lat = pt[1];//纬度

	if (lat > 89.999999){
     
       
		lat = 89.999999;
	}
	else if (lat < -89.999999){
     
       
		lat = -89.999999;
	}
	var c = lat * _p;
	x = lng * _p * _f;
	y = _f / 2 * Math.log((1 + Math.sin(c)) / (1 - Math.sin(c)));

	return [x,y];
}
【版权声明】本文内容来自摩杜云社区用户原创、第三方投稿、转载,内容版权归原作者所有。本网站的目的在于传递更多信息,不拥有版权,亦不承担相应法律责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@moduyun.com

  1. 分享:
最后一次编辑于 2024年07月26日 0

暂无评论

推荐阅读
TEZNKK3IfmPf