思路:
1、雷达刻度比较复杂,可以预先发布成图层,绘制时再调出来
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];
}