显示实时数据和连线

于 2019-08-13 11:25:12 发布
阅读量229 收藏
点赞数
分类专栏： WebSocket
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/sinat_40957383/article/details/99415098
版权
本文介绍了一个基于Web的三维闪电监测网实时数据展示系统，该系统通过PHP连接Oracle数据库获取站点经纬度信息，并利用JavaScript和Canvas进行闪电数据的实时绘制。系统支持不同地图背景切换，展示了亚洲和中国的闪电探测站点分布。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

<?php
/*
实时接收数据
输出经纬度$lon $lat 
输出探测站点$usedids
*/
if (isset($_GET['map'])) {
	$map = $_GET['map'];
}
$dbstr ="(DESCRIPTION =(ADDRESS = (PROTOCOL = TCP)(HOST=219.234.142.138)(PORT = 1521))
(CONNECT_DATA =
(SERVER = DEDICATED)
(SERVICE_NAME = thunder)
))";
$conn = oci_connect("thunder","thunder","$dbstr");
//$stmt = oci_parse($conn, "select LATITUDE,LONGITUDE,USEDIDS from THUNDER2015  where rownum <= 10");//闪电
$stmt1 = oci_parse($conn, "select LATITUDE,LONGITUDE,SID from STATIONDICT");//站点
//oci_execute($stmt);	
oci_execute($stmt1);	
//$nrows = oci_fetch_all($stmt, $results);
$nrows1 = oci_fetch_all($stmt1, $results1);

//$lat = $results['LATITUDE'];
//$lon = $results['LONGITUDE'];
//$usedids = $results['USEDIDS'];

$lat1 = $results1['LATITUDE'];
$lon1 = $results1['LONGITUDE'];
$sid1 = $results1['SID'];
//print_r($usedids);
//print_r($sid1);
//echo $results['LATITUDE'][0];
//echo $results['LONGITUDE'][0];
//exit;

//oci_free_statement($stmt);
oci_free_statement($stmt1);

oci_close($conn);

?>
<!DOCTYPE html>
<html>
<head>
 	<meta charset="utf-8">
 	<title>三维闪电监测网</title>
 	<script type="text/javascript" src="../JS/lbr.js"></script>
 	<script type="text/javascript" src="../JS/d3.js"></script>
 	<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
 	<script type="text/javascript" src="../JS/wlmbefore.js"></script>
 	<link rel="stylesheet" type="text/css" href="../CSS/font-awesome-4.5.0/css/font-awesome.css">
 	 <link rel="stylesheet" href="../CSS/font-awesome-4.5.0/css/font-awesome.min.css" type="text/css" />
 	<link rel="stylesheet" href="../CSS/blitzortung.css" type="text/css" />
  <style type="text/css">
  	#map table tr td{
  		position: relative;
  	}
  	#map canvas{
  		position: absolute;

  	}
  	#map img{
  		position: absolute;
  	}
  </style>
 </head>
<body>

<div style="display: table;width: 100%;background-color: white;height: 100%">

 	<div id="nav">
 		<div class="left_side" style="display: inline-block;">
 			<div id="bo_banner_left">
 				<img src="../Menu_Images/bl.png" width="32" height="32" alt="三维闪电监测网logo" class="logo_img">三维闪电监测网
 			</div>
 		</div>

 		<div class="right_side">
 			<div id="bo_banner_right">
 				<img src="../Menu_Images/bl.png" width="32" height="32" alt="三维闪电监测网logo" class="logo_img">三维闪电监测网
 			</div>
 			<div id="menu_main">
 				<div class="menu_item">
 					<span style="color: #39c0e0;"><i class="fa fa-caret-down"></i>Real Time Maps</span>
 					<div id="top0_vertical" class="vertical">
 						<a href="../live_lightning_maps.php" style="color: #39c0e0;">Fixed Size</a>		
 					</div>
 				</div>
    		</div>
 		</div>
 	</div>

 	<div id="main_frame">
 		<div class="control_left">
 			<div class="map_control">
 				<table>
 					
			        <tr>
			        	<td class="country_box" style="<?php if (isset($_GET['map']) && $_GET['map']==40) {
 				echo "background-color: #e7e7e7;";
 			} ?>"><a href="test_1.php?map=40" style="<?php if (isset($_GET['map']) && $_GET['map']==40) {
 				echo "color: #39c0e0;";
 			} ?>"><img src="../Flags/as.png" class="country_img" alt="">Asia</a>
			        	</td>
			        </tr>
 				</table>
 			</div>

	 		
			<?php if (isset($_GET['map']) && $_GET['map'] >= 40 && $_GET['map'] <50) {
		 	?>
		 	<div class="map_control">
		    	<table>
			        <tr><td class="country_box" style="<?php if (isset($_GET['map']) && $_GET['map']== 41) {
 				echo "background-color: #e7e7e7;";
 			} ?>;border-top: 1px solid black;"><a href="test_1.php?map=41" style="<?php if (isset($_GET['map']) && $_GET['map']== 40) {
 				echo "color: #39c0e0;";
 			} ?>"><img src="../Flags/china.png" class="country_img" alt="">China</a></td></tr>
		    	</table>
		    </div>
			<?php 
				}
			?>
    
			<div class="map_control">
			    <table>
			        <tr>
			          <td class="strike_box" onclick="DetectorsOnOff()" title="Draw lines to the detectors that have received the signal.">
			            <img id="Detectors" src="../Menu_Images/Antenne_gray.png" class="strike_img" alt=""> Detectors
			          </td>
			        </tr>
			    </table>
			</div>
		</div>


			<div id="map">
				<table>
					<tr>
						<td id="td" style="width: 925px;">
							<canvas id="Bild_Canvas" style="display: block;border: 1px solid black;background-image: url('<?php
								if (isset($_GET['map'])) {
									switch ($_GET['map']) {
										case 40:
											echo "http://images.blitzortung.org/Images/image_b_as.png";
											break;
										case 41:
											echo "../Menu_Images/map.png";
											break;
									}
								}
								?>?t=<?php echo floor(time()/60);?>');background-size: 100%; max-width: 925px;margin: 0px auto 20px auto;width: 100%;" width="925" height="790">
							</canvas>
						</td>
					</tr>
				</table>
			</div>
		</div>
	</div>
<script type="text/javascript">
var P_map= "<?php 
	 		if (isset($_GET['map'])) {
	 			echo $_GET['map'];
	 		}else{
	 			echo "0";
	 		} 
	 		?>" ;
var maps = {
	40: { "west":   85.0, "east":  155.0, "north":  58.0, "south":  -4.5, "projection": 1, "width": 925, "height": 925, "strike_type": 0, "detector_type": 2 },
	41: { "west": 70.350,  "east":  143.475, "north":  54.0, "south":  11.0, "projection": 0, "width": 925, "height": 925, "strike_type": 1, "detector_type": 1 }};
	map = maps[P_map];
	var latarr1 = '<?php echo json_encode($lat1);?>';
	var lonarr1 = '<?php echo json_encode($lon1);?>';
	var sidarr1 = '<?php echo json_encode($sid1);?>';
	latarr1 = JSON.parse(latarr1);
	lonarr1 = JSON.parse(lonarr1);
	sidarr1 = JSON.parse(sidarr1);

var DetectorImages     = new Array(new Image(),new Image(),new Image());
var DetectorImagesg    = new Array(new Image(),new Image(),new Image());
var DetectorImagesr    = new Array(new Image(),new Image(),new Image());
var DetectorImagesb    = new Array(new Image(),new Image(),new Image());
DetectorImages [0].src = "../Menu_Images/d00g.png";
DetectorImages [1].src = "../Menu_Images/d03g.png";
DetectorImages [2].src = "../Menu_Images/d05g.png";
DetectorImagesg[0].src = "../Menu_Images/d00g.png";
DetectorImagesg[1].src = "../Menu_Images/d03g.png";
DetectorImagesg[2].src = "../Menu_Images/d05g.png";
DetectorImagesr[0].src = "../Menu_Images/d00r.png";
DetectorImagesr[1].src = "../Menu_Images/d03r.png";
DetectorImagesr[2].src = "../Menu_Images/d05r.png";
DetectorImagesb[0].src = "../Menu_Images/d03b.png";
DetectorImagesb[1].src = "../Menu_Images/d03b.png";
DetectorImagesb[2].src = "../Menu_Images/d05b.png";

var DetectorImage        = DetectorImages [map ['detector_type']];
var DetectorImageg       = DetectorImages [map ['detector_type']];
var DetectorImager       = DetectorImages [map ['detector_type']];
var DetectorImageb       = DetectorImages [map ['detector_type']];
var StrikeImages      = new Array(new Image(),new Image(),new Image(),new Image(),new Image(),new Image(),new Image(),new Image());
StrikeImages [0].src  = "../Menu_Images/s02.png";
StrikeImages [1].src  = "../Menu_Images/s03.png";
StrikeImages [2].src  = "../Menu_Images/s04.png";
StrikeImages [3].src  = "../Menu_Images/s05.png";
StrikeImages [4].src  = "../Menu_Images/s06.png";
StrikeImages [5].src  = "../Menu_Images/s07.png";
StrikeImages [6].src  = "../Menu_Images/s09b.png";
StrikeImages [7].src  = "../Menu_Images/s99.png";

var strike_line_type = 0;

var Canvas = document.getElementById('Bild_Canvas');
var Context = Canvas.getContext("2d");
var first_Strike = 0;
setInterval(drawStrikes,49);

function loadStrikes ()
{
	if("WebSocket" in window){
		try{
		var wsClient = new WebSocket("ws://127.0.0.1:9924");
		}catch(e){
		}

		wsClient.onopen = function(){
			if(wsClient.readyState==1){
				console.log('WS Connected');
				wsClient.send('{"west":'+map['west']+',"east":'+map['east']+',"north":'+map['north']+',"south":'+map['south']+'}');
			}
		};
		
		wsClient.onmessage = function(e){
			//console.log(e.data);
			var str = e.data.split(',');
			var lon = parseFloat(str[0]);var lat = parseFloat(str[1]);
			var usedids = str.slice(2);

			//var usedids = usedids.map(Number);//字符串数组转化为数字数组
			if((map['west']<=lon)&&
				(lon<=map['east'])&&
				(map['south']<=lat)&&
				(lat<=map['north'])){
			var Image;
          	if (map['strike_type'] == 0) {
            	Image= StrikeImages[parseInt(Math.random()*6)];
        	}
         	else if (map['strike_type'] == 1) {
            	Image = StrikeImages[6];
         	}
        	else {
        		Image= StrikeImages[7];
        	}
        	var Detectors= new Array();
          	Detectors.next= 0;
			var x= projection_x(map["west"],map["east"],map["width"],lon);
			var y= projection_y(map["west"],map["east"],map["north"],map["height"],lat,map['projection']);	
			var Datum    = new Date();
          	var Time     = Datum.getTime();
			first_Strike = new Strike (Context, x, y,Time,first_Strike,Image,Detectors);
			}
			for(var j=0;j<latarr1.length;j++){
				var lat1 = latarr1[j];
				var lon1 = lonarr1[j];
				var id1  = sidarr1[j];
				if (usedids.indexOf(id1) != -1){
					
					var x1= projection_x (map["west"],map["east"],map["width"],lon1);
					var y1= projection_y (map["west"],map["east"],map["north"],map["height"],lat1,map['projection']);
					//console.log(x1);
					//console.log(typeof(x1));
					var Detector = new Array(x1,y1);
					first_Strike.Detectors.push(Detector);
					if (first_Strike.Detectors.length >= 100) {
						first_Strike.Detectors.shift();
					}
				}
			}
			

		}

		wsClient.onclose = function(){
			console.log('close');
		};

	}
}
loadStrikes();

function drawStrikes(){
	var Datum = new Date();
	var Time  = Datum.getTime();

	Context.clearRect(0,0,Canvas.width,Canvas.height);

	var s = first_Strike;

	while(s != 0){
		//important
		if (s.Time >Time-60000) {
			s.draw();
			s=s.next;
		}
		else{
			s.next = 0;
			s = 0;
		}
	}
}
function Strike(Context,x,y,Time,Next,Image,Detectors){
	this.Context = Context;
	this.Context.lineWidth = 1.0;
	this.x = parseInt(x);
	this.y = parseInt(y);
	this.Image = Image;
	this.Detectors = Detectors;
	this.Time = Time;
	this.next = Next;
	this.cnt = 0;
	this.ray_cnt = 40;
	this.detector_cnt = 200;
}
Strike.prototype = {
	draw: function(){
		var alpha1 = (this.ray_cnt-this.cnt)/10;
		if (alpha1 > 1) {
			alpha1 = 1;
		}
		var alpha2 = alpha1*0.7;
		var alpha3 = alpha1*0.2;

		if (this.cnt < this.detector_cnt) {
			 for (var i = 0; i < this.Detectors.length; i++) {
			 	var x = this.Detectors[i][0];
			 	var y = this.Detectors[i][1];
			 	//console.log(x);
			 	if (this.cnt <this.ray_cnt) {
			 		this.Context.beginPath();
			 		this.Context.moveTo(this.x,this.y);
			 		this.Context.lineTo(x,y);
			 		if (strike_line_type == 0) {	
                  		this.Context.strokeStyle= 'rgba(0,255,128,'+alpha2.toString()+')';
              		}
              		this.Context.stroke();
              		this.Context.drawImage(DetectorImageb,parseInt(x-DetectorImageb.width/2),parseInt(y-DetectorImageb.height/2));
			 	}
			 }
		}


		if (this.cnt <this.ray_cnt) {
			this.Context.beginPath();
			this.Context.arc(this.x,this.y,this.ray_cnt-this.cnt,0,2*Math.PI,1);
			this.Context.strokeStyle = 'rgba(255,255,255,'+alpha1.toString()+')';
			this.Context.fillStyle = 'rgba(255,0,0,'+alpha3.toString()+')';
			this.Context.stroke();
			this.Context.fill();
		}
		 this.Context.drawImage(this.Image,parseInt(this.x-this.Image.width/2),parseInt(this.y-this.Image.height/2));
		if (this.cnt < this.detector_cnt) {
			this.cnt++;
		}

	},
}
</script>
</body>
</html>

 

评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值