前端动画备份

最新推荐文章于 2023-03-12 10:20:46 发布
sinat_40957383
最新推荐文章于 2023-03-12 10:20:46 发布
阅读量120
点赞数
分类专栏：备份
本文链接：https://blog.csdn.net/sinat_40957383/article/details/99440993
版权
备份专栏收录该内容
1 篇文章 0 订阅
订阅专栏
主要是为了备份，自己为了实现实时数据的显示和连接站点的动画显示，不成熟的瞎搞
<?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_.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_.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">
	map =  { "west": 70.350,  "east":  143.475, "north":  54.0, "south":  11.0, "projection": 0, "width": 925, "height": 925, "strike_type": 1, "detector_type": 1 };
	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);

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

		wsClient.onopen = function(){
			if(wsClient.readyState==1){
				console.log('WS客户端已经成功连接到服务器上');
				//wsClient.send('{"west":'+map['west']+',"east":'+map['east']+',"north":'+map['north']+',"south":'+map['south']+'}');
				wsClient.send("qwe");
			}
		};
		
		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);//字符串数组转化为数字数组
		function show(){

			for(var i = 0;i<usedids.length;i++){
				var x= parseInt(projection_x(map["west"],map["east"],map["width"],lon));
				var y= parseInt(projection_y(map["west"],map["east"],map["north"],map["height"],lat,map['projection']));
				console.log(x);
				function draw(){
					//---------------------探测连线---------------------//
	        		var canvastemp = document.createElement("canvas");
	        		canvastemp.setAttribute("id","canvas"+i);
					canvastemp.setAttribute("width","925px");
					canvastemp.setAttribute("height","790px");
					canvastemp.style.display = "block";
	        		canvastemp.style.border = "1px solid black";
	        		canvastemp.style.maxWidth = "925px";
	        		canvastemp.style.margin = "0px auto 20px auto";
	        		canvastemp.style.width = "100%";
	        		var tde = document.getElementById("td");//
	        		tde.appendChild(canvastemp);
						

					var canvas = document.getElementById("canvas"+i);
				    ctx = canvas.getContext("2d");
				    ctx.beginPath();			
				    for (var j = 0; j < latarr1.length; j++) {
				        var lat1 = latarr1[j];
						var lon1 = lonarr1[j];
						var id1  = sidarr1[j];
						//console.log(id1);console.log(typeof(id1));
						var x1= parseInt(projection_x (map["west"],map["east"],map["width"],lon1));
						var y1= parseInt(projection_y (map["west"],map["east"],map["north"],map["height"],lat1,map['projection']));
						    //判断是否是对应的站点
						    
						if (usedids.indexOf(id1) != -1) {   			
							ctx.moveTo(x,y);
				        	ctx.lineTo(x1,y1);
							ctx.fillStyle = 'rgb(0,255,0)';
							ctx.fillRect(x1,y1,2,2);
				        }	
				    }
					ctx.closePath();
					ctx.strokeStyle = "rgb(0,255,0)";
					ctx.stroke();
					$("#canvas"+i).fadeOut(3000);
					//-------------------闪电------------------------------//
	        		var imgtemp = document.createElement("img");
	        		imgtemp.setAttribute("src","../Menu_Images/newthunder.png");
	        		imgtemp.setAttribute("id","img"+i);
	        		imgtemp.setAttribute("width","25px");
	        		imgtemp.setAttribute("height","30px");
	        		imgtemp.style.position = "absolute";
	        		imgtemp.style.display = "block";
	        			//imgtemp.style.border = "1px solid red";
					var tde = document.getElementById("td");
	        		tde.appendChild(imgtemp);

			 		var canvas = document.getElementById('Bild_Canvas');
			 		if(!canvas.getContext) return;
				 	var ctx = canvas.getContext('2d');
				 	ctx.fillStyle = 'rgb(255,0,0)';
				 	ctx.fillRect(x,y,2,2);
				 	$("#img"+i).css({"left":x-12.5+"px","top":y-15+"px"});
					$("#img"+i).fadeOut(3000);	
				}
	 			draw();
			}
		}
setInterval(show,3000);
		}

		wsClient.onclose = function(){
			console.log('到服务器的连接已经断开');
		};

	}


</script>
	<!--
  <h3>WebSocket协议的客户端程序</h3>
  <button id="btConnect">连接到WS服务器</button>
  <button id="btSendAndReceive">向WS服务器发消息并接收消息</button>
  <button id="btClose">断开与WS服务器的连接</button>
  <div id="val"></div>
  <script>
    var wsClient = null; //WS客户端对象
 
    btConnect.onclick = function(){
      //连接到WS服务器，注意：协议名不是http！
      wsClient = new WebSocket('ws://127.0.0.1:9977');
      wsClient.onopen = function(){
        console.log('WS客户端已经成功连接到服务器上')
      }
    }
 
    btSendAndReceive.onclick = function(){
      //向WS服务器发送一个消息
      wsClient.send('Hello Server');
      //接收WS服务器返回的消息
      wsClient.onmessage = function(e){
        console.log('WS客户端接收到一个服务器的消息：'+ e.data);
        val.innerHTML=e.data;
		var str = e.data.split(',');
		console.log(str[0]);
		console.log(str[1]);
		console.log(str[2]);
		console.log(str[3]);
		console.log(str[4]);

      }
 
      
    }
 
    btClose.onclick = function(){
      //断开到WS服务器的连接
      wsClient.close();  //向服务器发消息，主动断开连接
      wsClient.onclose = function(){
        //经过客户端和服务器的四次挥手后，二者的连接断开了
        console.log('到服务器的连接已经断开')
      }
    }
  </script>
  -->
</body>
</html>
sinat_40957383
关注
0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端动画备份

主要是为了备份，自己为了实现实时数据的显示和连接站点的动画显示，不成熟的瞎搞<?php/*实时接收数据输出经纬度$lon $lat 输出探测站点$usedids*/if (isset($_GET['map'])) { $map = $_GET['map'];}$dbstr ="(DESCRIPTION =(ADDRESS = (PROTOCOL = TCP)(HOST...
复制链接

扫一扫