根据卫星仰角和方位角使用html5绘制天空图（投影图）

本文记录根据卫星仰角和方位角使用html5绘制天空图（投影图）。

也就是根据这两个角度绘制坐标点在圆形上的投影。

术语：

方位角：从标准方向的北端起,顺时针方向到直线的水平角称为该直线的方位角。方位角的取值范围为0°～360°。
仰角:视线在水平线以上时,在视线所在的垂直平面内,视线与水平线所成的角叫做仰角.

步骤：

1.绘制天空图背景。

2.根据仰角和方位角计算在canvas画布上的坐标。从而绘制图标以及文字。

原始数据：

type：数据类型、 num：卫星号、 elevation：仰角、（0-90）azimuth：方位角（0-360）

     //elevation仰角 azimuth方位角var drawData = [{"type":"1","num":81, "elevation":0, "azimuth":0 },{"type":"2", "num":2, "elevation":50, "azimuth":66 },{"type":"3", "num":3, "elevation":44, "azimuth":149 },{"type":"4", "num":33, "elevation":20, "azimuth":270 },{"type":"5", "num":45, "elevation":80, "azimuth":33},{"type":"6", "num":9, "elevation":60, "azimuth":270 },{"type":"4", "num":35, "elevation":80, "azimuth":333},{"type":"2", "num":77, "elevation":10, "azimuth":222 },{"type":"1", "num":64, "elevation":55, "azimuth":111 }];

效果图：

第一步，绘制背景。依次画三个圈，实现同心圆。然后通过旋转画布的方式来绘制切割圆的线条。切割圆的线条之间角度为30度。

背景绘制代码：

     // 绘制背景function drawBaseSky(){var cxt = document.getElementById('skyPic').getContext("2d");var radius = 180;//半径cxt.translate(15,15);//坐标原点移动，留出边界值，让可能出现在最外层的信息能显示//绘制背景cxt.beginPath();cxt.fillStyle = 'rgb(242,242,242)';cxt.arc(radius, radius, radius, 0, Math.PI*2, false);cxt.fill();cxt.beginPath();cxt.fillStyle ='white';cxt.arc(radius, radius, radius*2/3, 0, Math.PI*2, false);cxt.fill();cxt.beginPath();cxt.fillStyle = 'rgb(242,242,242)';cxt.arc(radius, radius, radius/3, 0, Math.PI*2, false);cxt.fill();cxt.save();    //保存状态//通过旋转的方式画圆中的分割线cxt.beginPath();cxt.strokeStyle = 'rgb(220,220,220)';cxt.translate(radius,radius);for(var i=0;i<12;i++){cxt.rotate(Math.PI/180*30);cxt.moveTo(0,0);cxt.lineTo(0,radius);}cxt.stroke();cxt.restore();}

第二步：计算在画布上的坐标。并将数据点投影绘制到天空图上。难点在于坐标计算。

     //绘制数据分布function drawSkyPosition(drawData){var color ={"1":"rgb(173,152,12)", "2":"rgb(75,164,259)", "3":"rgb(226,120,228)","4":"rgb(117,173,61)", "5":"rgb(230,139,55)", "6":"rgb(61,168,161)"}; var cxt = document.getElementById('skyPic').getContext("2d");var radius = 180;//半径var cosLen,x,y;cxt.save();cxt.translate(radius,radius);cxt.font = "bold 14px Arial";cxt.textAlign = "center";cxt.textBaseline = "middle";for(var i=0,dataLen = drawData.length;i<dataLen;i++){cxt.beginPath();cxt.fillStyle = color[drawData[i].type];//关键代码。求圆心坐标。coslen是求出来的该点到圆心的距离。var cosLen = Math.cos(drawData[i].elevation*Math.PI/180)*radius;y = Math.cos(drawData[i].azimuth*Math.PI/180)* cosLen;x = Math.sin(drawData[i].azimuth*Math.PI/180)* cosLen;cxt.arc(x,-y , 14, 0, Math.PI*2, false);//在坐标点绘制圆cxt.fill();cxt.beginPath();cxt.fillStyle ='white';cxt.fillText(drawData[i].num, x, -y);//在坐标点写文字卫星号}cxt.restore();}

ok，大功告成。

根据卫星方位角和仰角绘制天空图（投影图）介绍到这里。

演示地址：http://runningls.com/demos/2015/position/sky.html

根据卫星仰角和方位角使用html5绘制天空图（投影图）相关推荐

根据卫星lat，lon，alt，俯仰角，方位角，推算绘制地面的拍摄的区域
本示例的目的是介绍演示如何在vue+satellite项目中研究卫星的拍摄范围. 根据卫星的高度,经度,纬度,方位角,俯角以及拍摄的幅宽,幅长等参数,绘制拍摄的矩形框和中心点.这里用到了一些公式,参考 ...
【北斗导航】GNSS仰角和方位角的计算和XYZ与BLH的坐标转换（附原理matlab源代码）
目录 GNSS仰角和方位角的计算和XYZ与BLH的坐标转换 GNSS仰角和方位角的计算和XYZ与BLH的坐标转换本代码是计算GNSS卫星仰角和方位角,并且实现了XYZ与BLH之间的坐标转换.下面是具 ...
GNSS基本概念（1）：仰角和方位角（Elevation and Azimuth）
仰角和方位角描述了物体在天空相对于观察者的位置,如下图所示: 一.仰角(Elevation) 有时也称海拔高度.当方位角测量完毕之后,需要用仰角来描述被观察物体相对于观察者的高度.如果观察者在地面上, ...
html5时钟代码菜鸟课程,html5绘制时钟动画
这篇文章主要介绍了html5绘制时钟动画,需要的朋友可以参考下复制代码代码如下: var clock=document.getElementById("clock"); var ...
html5 绘制图形,HTML5绘制几何图形
绘制几何图形 var canvas = document.getElementById("myCanvas"); var ctx = canvas.getContext(" ...
html设计一个图片墙,html5 绘制类似墙型的背景
最近开发的项目中要使用html5绘制各种虚线包括贝塞尔虚线.圆形虚线.各种虚线段,还包括各种形式的背景墙,截图如下: 从这张图片中可以看出有很多种形式的虚线和背景墙,下面主要介绍一下墙型背景,如下如: ...
用HTML5绘制的一个星空特效图
<!doctype html> <html lang="en"> <head><meta charset="UTF-8" ...
在html中加上时钟,Html5绘制时钟
最近在对Html5比较感兴趣,就用空闲时间做一些小例子进行练习,今天绘制一个走动的时钟,具体如下图所示: 具体思路在上图已有说明,代码如下: //绘制圆形的弧度,ctx 为绘制环境,x,y为绘制中心, ...
用html做七巧板的方法,纯HTML5绘制的七巧板
纯HTML5绘制的七巧板 var tangram = [ {p:[{x:0,y:0},{x:800,y:0},{x:400,y:400}],color:"#caff67"}, {p ...

根据卫星仰角和方位角使用html5绘制天空图（投影图）

根据卫星仰角和方位角使用html5绘制天空图（投影图）相关推荐

最新文章

热门文章