Cesium.js地球

于 2022-01-04 11:29:59 发布
阅读量729 收藏
点赞数
文章标签： javascript 开发语言 ecmascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/weixin_45799001/article/details/122299398
版权
这是一个基于Cesium的船舶状态实时监测系统，包括数据展示、地图导航和周边信息显示。系统能够显示船舶的经纬度、航速、航向、深度等关键数据，并通过动态图标和轨迹线呈现。此外，系统还具备拖动和缩放功能，以调整视角和信息显示。用户可以通过底部导航控制数据和地图视图的显示，以及设置警戒圈来监控周边船只的动态。

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

<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>船舶状态显示</title>
	<link rel="shortcut icon" th:href="@{/images/favicon.ico}" type="image/x-icon" />
	<link rel="stylesheet" th:href="@{/js/Cesium-1.59/Build/Cesium/Widgets/widgets.css}">
	<link rel="stylesheet" th:href="@{/css/reset.css}">
	<link rel="stylesheet" th:href="@{/css/data.css}">
	<style type="text/css">
		#infoGuard {
			width: 91%;
			height: 100px;
			overflow: auto;
		}

		#DvelopmentTarget2 {
			width: 91%;
			background-color: #0A1428;
			color: #FFF;
			margin: 11px;
			padding: 11px 11px 11px 26px;
			height: 150px;
		}

		.MovementLocus2 {
			border: 1px solid #088bb6;
			z-index: 999;
			width: 275px;
			position: absolute;
			top: 504px;
			right: 369px;
			height: 170px;
		}
		.content .nav_btn {
			position: absolute;
			left: -171px;
		}
	</style>
</head>

<body>
	<div class='Dvelopment' style="display: none">
		<div id="DvelopmentTarget">
			<div style="padding: 5px;text-align: center;font-size: 17px;">
				周边信息列表</div>
		</div>
	</div>
	<div class="wrap">
		<div class="content">
			<div class="header">
				<div class="title_box">
					<img class="log" th:src="@{/images/log.png}" alt=""> <span class="title"> 船舶状态显示 </span>
				</div>
			</div>
			<div class="mainContent">
				<!-- 左边导航 -->
				<ul class="nav_btn">
					<li class="nav_on"><a th:href="@{index.html}"> 数据展示 </a></li>
<!--					<li><a th:href="@{dataInfo.html}">设备信息</a></li>-->
<!--					<li><a th:href="@{video.html}"> 视频监控 </a></li>-->
				</ul>
				<div id="cesiumContainer"></div>
				<!-- 左边数据显示 -->
				<div class="mainLeft">
					<div class="limitBox cl">
						<ul class="limitCont">
							<li><span class="unit"> 经度 </span> <span class="value" id="top_longitude"> </span></li>
							<li><span class="unit"> 纬度 </span> <span class="value" id="top_latitude"> </span></li>
							<li><span class="unit"> 航速(地) </span> <span class="value" id="SpeedKn"> </span> <span
									class="speed"> kn </span></li>
							<li><span class="unit"> 航向 </span> <span class="value" id="course"> </span></li>
							<li><span class="unit"> 航速(水) </span> <span class="value" id="water_speed"> </span> <span
									class="speed"> kn </span></li>
							<li><span class="unit"> 航程 </span> <span class="value" id="voyage"> </span> <span
									class="speed"> nmi </span></li>
							<li><span class="unit"> 艏向 </span> <span class="value HDT">
								</span></li>
							<li><span class="unit"> 风速 </span> <span class="value WindSpeed"> </span> <span
									class="speed"> m/s
								</span></li>
							<li><span class="unit"> 风向 </span> <span class="value WindDir"> </span></li>
							<li><span class="unit"> 水深 </span> <span class="value" id="Draft"> </span> <span
									class="speed"> m </span></li>
							<li><span class="unit"> 横摇 </span> <span class="value Roll">
								</span></li>
							<li><span class="unit"> 纵倾 </span> <span class="value Pitch">
								</span></li>
						</ul>
					</div>
<!--					<div class="targetBox">-->
<!--						<ul class="limitCont target">-->
<!--							<li><span class="unit"> 定位目标经度 </span> <span class="value">-->
<!--									0° </span></li>-->
<!--							<li><span class="unit"> 定位目标纬度 </span> <span class="value">-->
<!--									0° </span></li>-->
<!--							<li><span class="unit"> 定位目标航速 </span> <span class="value">-->
<!--									0.0 </span> <span class="speed"> kn </span></li>-->
<!--							<li><span class="unit"> 定位目标深度 </span> <span class="value">-->
<!--									0.0 </span> <span class="speed"> m </span></li>-->
<!--							<li><span class="unit"> 定位目标航向 </span> <span class="value">-->
<!--									0° </span></li>-->
<!--						</ul>-->
<!--					</div>-->
					<div class="voyageBox">
						<div class="voyage">
							<ul class="limitCont voyage_title">
								<li></li>
								<li></li>
							</ul>
							<div class="voyage_img">
								<img src="./images/hchs.png" alt="">
							</div>
						</div>
					</div>
				</div>
				<!-- 右边数据显示 -->
				<div class="mainRight" style="height: 870px">
					<div id="pathType">
						<span style="vertical-align:middle;padding-right: 2px;">卫星地图:</span>
						<input type="checkbox" name="show_product_line" id="show_product_line" value="basket" checked
							style="vertical-align:middle"> <span
							style="vertical-align:middle;padding-right: 2px;padding-left: 20px;">自定义图层:</span>
						<input type="checkbox" name="showproduct" id="showproduct" value="basket"
							style="vertical-align:middle">
					</div>
					<div class="direction cl">
						<div class="fx_box fl">
							<img class="fx_img" th:src="@{/images/fx.png}" alt=""> <img class="pointer_img"
								th:src="@{/images/sx-1.png}" alt="">
						</div>
						<div class="speed_box fl">
							<span class="across"> </span> <span class="pipe"> </span>
							<p class="speed_line">
								风速 <span class="value WindSpeed"> </span> <span class="speed">
									m/s </span>
							</p>
							<p class="speed_line">
								风向 <span class="value WindDir"> </span>
							</p>

						</div>
					</div>
					<div class="heading">
						<div class="pointer_box">
							<img class="sx" th:src="@{/images/xms.png}" alt=""> <i class="pointer"> <img alt=""
									th:src="@{/images/pointer.png}">
							</i>
						</div>
						<p class="heading_text">
							艏向 <span class="heading_num HDT"> </span>
						</p>
					</div>
					<div id="posture"></div>
					<div class="clock_box">
						<div class="clcok">
							<img th:src="@{/images/zgsj.png}" alt=""> <span class="com_time china_time"> </span>
							<p class="time_tip">本地时间</p>
						</div>
						<div class="clcok">
							<img th:src="@{/images/sjsj.png}" alt=""> <span class="com_time zebra_time"> </span>
							<p class="time_tip">世界时间</p>
						</div>
					</div>
				</div>
				<!-- 底部导航 -->
				<ul class="nav_bot">
					<li title="经纬度" id="btnShow" class="nav_com"><img th:src="@{/images/jwd.png}" alt=""></li>
					<li title="数据" id="dataShow" class="nav_com on"><img th:src="@{/images/zj.png}" alt=""></li>
					<li title="开关" id="btnFollowTarget"><img th:src="@{/images/ybp.png}" alt=""></li>
					<li title="周围" id="btnRound" class="on"><img th:src="@{/images/round.png}" alt=""></li>
					<li title="轨迹" id="btnTrack" class="on"><img th:src="@{/images/track.png}" alt=""
							style="width: 40px"></li>
				</ul>
				<h3 class="bot_title">船海科技</h3>
			</div>

			<div class="MovementLocus1" style="top:120px;left: 1260px;">
				<div id="DvelopmentTarget">
					<div style="padding: 5px;text-align: center;font-size: 17px;">
						设备轨迹信息</div>
					<div style="padding: 5px">
						<label for="equipment"> 请选择设备： </label> <select id="equipment" name="gpsid">
							<option selected>---请选择---</option>
							<option value="0">1号GPS</option>
							<option value="1">2号GPS</option>
							<option value="2">3号GPS</option>
						</select>
					</div>
					<div style="padding: 5px">
						<label for="EquipmentTime"> 请选择时间： </label> <label style="margin-right: 17px"> <input
								name="timestamp" checked type="radio" value="1" style="vertical-align: -2px" />
							一天
						</label> <label> <input name="timestamp" type="radio" value="7" style="vertical-align: -2px" />
							七天
						</label>
					</div>
					<div style="padding: 5px;text-align: center;">
						<input type="button" value="查询" class="search_btn">
					</div>
				</div>
			</div>


			<div class="MovementLocus" style="top:330px;left: 1260px;">
				<div id="DvelopmentTarget" style="padding-left: 11px">
					<div style="padding: 5px;text-align: center;font-size: 17px;">
						数据源选择框</div>
					<div style="padding: 5px">
						<label for="equipment1"> GPS数据选择： </label> <select id="DataSource" name="DataSource1">
							<option selected>1号GPS</option>
							<option>2号GPS</option>
							<option>3号GPS</option>
						</select>
					</div>
					<div style="padding: 5px">
						<label for="EquipmentTime" style="padding-left: 13px;">
							数据源选择： </label> <select id="EquipmentTime" name="EquipmentTime1">
							<option selected>GGA+VTG</option>
							<option>RMC</option>
						</select>
					</div>
				</div>
			</div>

<!--			<div class="MovementLocus2">-->
<!--				<div id="DvelopmentTarget2" style="padding-left: 11px">-->
<!--					<div style="padding: 5px;text-align: center;font-size: 17px;">-->
<!--						进入警戒圈的信息-->
<!--					</div>-->
<!--					<div id="infoGuard"></div>-->
<!--				</div>-->
<!--			</div>-->

		</div>
	</div>
</body>
<script th:src="@{/js/jquery-3.3.1.js}"></script>
<script th:src="@{/js/Cesium-1.59/Build/CesiumUnminified/Cesium.js}"></script>
<script th:src="@{/js/wind3D.js}"></script>
<script th:src="@{/js/customPrimitive.js}"></script>
<script th:src="@{/js/gui.js}"></script>
<script th:src="@{/js/particlesComputing.js}"></script>
<script th:src="@{/js/dataProcess.js}"></script>
<script th:src="@{/js/particlesRendering.js}"></script>
<script th:src="@{/js/particleSystem.js}"></script>
<script th:src="@{/js/util.js}"></script>
<script th:src="@{/js/posture.js}"></script>
<script th:src="@{/js/dat.gui.min.js}"></script>
<script th:src="@{/js/netcdfjs.js}"></script>
<script th:src="@{/js/spector.bundle.js}"></script>
<script th:src="@{/layui/layui.js}"></script>
<script>
	layui.use(['element', 'form', 'layer'], function () {
		/* 点击查询 数据请求 */
		$(".search_btn").click(function () {
			equipment = $("#equipment").val();
			if (equipment == "---请选择---") {
				layer.msg("请选择设备!", {
					icon: 7,
					anim: 6,
					time: 1800
				});
			} else {
				var redioed = $('input[name="timestamp"]:checked').val();
				$.ajax({
					url: 'queryGpsTrack?gpsid=' + equipment + '&timestamp=' + redioed,
					dataType: "json",
					success: function (data) {
						var GpsArr = [];
						for (var i = 0; i < data.length; i++) {
							var item = data[i];
							var lat = item.lat;
							var longt = item.longt;
							lat = +(lat / 100).toFixed(6);
							longt = +(longt / 100).toFixed(6);
							GpsArr.push(longt, lat)
						}
						drawLine(GpsArr)
					}
				})
			}
		})
		var DataSource = $("#DataSource").val();
	})


	/* cesium 绘制线 */
	function drawLine(GpsArr) {
		viewer.entities.add({
			//id: i,
			position: Cesium.Cartesian3.fromDegrees(GpsArr[0], GpsArr[1]),
			//位置
			label: { //标签文字
				font: '16px MicroSoft YaHei',
				fillColor: Cesium.Color.RED,
				//填充颜色
				outlineColor: Cesium.Color.RED,
				//轮廓颜色
				outlineWidth: 0.2,
				//轮廓宽度
				style: Cesium.LabelStyle.FILL_AND_OUTLINE,
				pixelOffset: new Cesium.Cartesian2(-20, -15),
				horizontalOrigin: Cesium.HorizontalOrigin.LEFT
			},
			polyline: { //polyline折线实体
				positions: Cesium.Cartesian3.fromDegreesArray(GpsArr),
				//位置
				width: 5,
				//折线宽度
				material: new Cesium.PolylineGlowMaterialProperty({ //具有发光效果的线
					glowPower: 0.2,
					//发光的强度，值为线宽的百分比(0-1.0)
					color: Cesium.Color.RED //发光的颜色
				}),
				//材质
				clampToGround: true //地表层高度模式
			}
		});
		/*     viewer.zoomTo(viewer.entities); //zoomTo方法可以立即定位到某个位置
			viewer.camera.flyTo({
			  destination: Cesium.Cartesian3.fromDegrees(GpsArr[0], GpsArr[1], 1000)
			}); */
	}
	var panel = null;
	var wind3D = null;
	//拖拽输入框下
	$(function () {
		var offsetX = 0;
		var offsetY = 0;
		$(".MovementLocus1").mousedown(function (ev) {
			offsetX = ev.clientX - $(this).offset().left;
			offsetY = ev.clientY - $(this).offset().top;
			var _this = this;
			$(document).mousemove(function (ev) {
				$(_this).css({
					left: ev.clientX - offsetX,
					top: ev.clientY - offsetY
				})
			})
		});
		$(document).mouseup(function () {
			$(document).off("mousemove");
		})
	})
	//警戒圈信息拖拽
	$(function () {
		var offsetX = 0;
		var offsetY = 0;
		$(".MovementLocus2").mousedown(function (ev) {
			offsetX = ev.clientX - $(this).offset().left;
			offsetY = ev.clientY - $(this).offset().top;
			var _this = this;
			$(document).mousemove(function (ev) {
				$(_this).css({
					left: ev.clientX - offsetX,
					top: ev.clientY - offsetY
				})
			})
		});
		$(document).mouseup(function () {
			$(document).off("mousemove");
		})
	})
	//拖拽输入框上
	$(function () {
		var offsetX = 0;
		var offsetY = 0;
		$(".MovementLocus").mousedown(function (ev) {
			offsetX = ev.clientX - $(this).offset().left;
			offsetY = ev.clientY - $(this).offset().top;

			var _this = this;
			$(document).mousemove(function (ev) {
				$(_this).css({
					left: ev.clientX - offsetX,
					top: ev.clientY - offsetY
				})
			})
		});
		$(document).mouseup(function () {
			$(document).off("mousemove");
		})
	})
	/* 获取当前时间 */
	function getNow(s) {
		return s < 10 ? '0' + s : s;
	}
	function getData() {
		var myDate = new Date();
		var utcH = myDate.getUTCHours();
		var utcM = myDate.getUTCMinutes();
		var utcS = myDate.getUTCSeconds();
		var utcTime = getNow(utcH) + ':' + getNow(utcM) + ":" + getNow(utcS);
		// var GMT = getNow(h + 8);
		$(".zebra_time").text(utcTime);
	}
	function getLocalTime(i) {
		$.ajax({
			url: 'caculateTimeZone?currentLon=' + i,
			dataType: "json",
			success: function (data) {
				timeZone = data.timeZone;
			}
		})
		return timeZone;
	}
	var viewer;
	var timeZone;
	var longitude = ""; //  经度: 88°7.015'
	var latitude = ""; //  纬度: 18°3.618'
	var pointLon = ""; // 88.11588333333333
	var pointLat = ""; // 18.060283333333334
	var scalcShipNum = 0.2; // 目标船实体大小(初始化)
	var scalcShipNumFlag = true; //广告牌不能实时缩放(开关)
	var magnitudePrev = 0; // 地球景深初始固定值
	var fontNum = 12; // 字体初始值
	var offsetX = 0;
	var offsetY = 0;
	var HDTNum1 = 0;
	var isFollowTarget = false; // 目标船视图跟踪自转
	var EW;
	var EW1;
	var EW2;
	var EW3;
	var EW4;
	var EW5;
	var geometry;
	var target = [];
	var target1 = [];
	var target2 = [];
	var target3 = [];
	var target4 = [];
	var target5 = [];

	var warnInfo1 = false;
	var warnInfo2 = false;
	var warnInfo3 = false;
	var warnInfo4 = false;
	var warnInfo5 = false;


	var targetseconds = 0; //存秒数
	// 地图初始化
	cesiumInit();
	panel = new Panel();
	wind3D = new Wind3D(panel, viewer);
	var shipTimer = setInterval(function () {
		getData();
		dataDemand();
		dataRound();
	}, 1000);

	// 显示目标船信息
	function dataDemand(dataFun) {
		$.ajax({
			url: 'http://localhost:10003/',
			type: 'post',
			dataType: "json",
			data: '{"requesttype":513,"mmsi":10000001}',
			success: function (data) {
				console.log(data)
				var zoneTime;
				var gpsgga;
				var currentLon;
				var depeth = data.depeth[0];
				var Depth = depeth.Depth / 100;
				$("#Draft").text(Depth);
				var DataSource = $("select[name='DataSource1']").val();
				var EquipmentTime = $("select[name='EquipmentTime1']").val();
				var gyro = data.gyro[0];
				HDTNum1 = gyro.HDT;
				if (DataSource == '1号GPS' && EquipmentTime == 'GGA+VTG') {
					var gpsgga = data.gpsgga[0];
					EW = gpsgga.EW;
					var NS = gpsgga.NS;
					var LatitudeD = (gpsgga.LatitudeD) + "°";
					var LatitudeM = (gpsgga.LatitudeM / 10000).toFixed(3) + "'";
					latitude = LatitudeD + LatitudeM; // 纬度
					var LongtitudeD = (gpsgga.LongtitudeD) + "°";
					var LongtitudeM = (gpsgga.LongtitudeM / 10000).toFixed(3) + "'";
					longitude = LongtitudeD + LongtitudeM; // 经度
					$("#top_longitude").text(EW + ' ' + longitude);
					$("#top_latitude").text(NS + ' ' + latitude);
					var pointLonArr = longitude.split("°");
					var pointLatArr = latitude.split("°");
					if (NS == "S") {
						pointLat = (pointLatArr[0] * 1 + pointLatArr[1].substring(0, pointLatArr[1].length - 1) * 1 / 60) * -1;
					} else {
						pointLat = pointLatArr[0] * 1 + pointLatArr[1].substring(0, pointLatArr[1].length - 1) * 1 / 60;
					}
					if (EW == "W") {
						pointLon = (pointLonArr[0] * 1 + pointLonArr[1].substring(0, pointLonArr[1].length - 1) * 1 / 60) * -1;
					} else {
						pointLon = pointLonArr[0] * 1 + pointLonArr[1].substring(0, pointLonArr[1].length - 1) * 1 / 60;
					}
					// 航速(地)航向
					var gpsvtg = data.gpsvtg[0];
					var SpeedKn = gpsvtg.SpeedKn / 100;
					var course = gpsvtg.RHDVTG / 100;
					$("#SpeedKn").text(SpeedKn);
					$("#course").text(course + '°');
					// 航速(水)
					var log = data.log[0];
					var water_speed = log.Speed / 100;
					var voyage = log.Log1;
					$("#water_speed").text(water_speed);
					$("#voyage").text(voyage);
					// 艏向
					var gyro = data.gyro[0];
					var HDT = (gyro.HDT / 100) + '°';
					$(".HDT").text(HDT);

					$('.pointer img').css('transform', 'rotate(' + (gyro.HDT / 100) + 'deg)')
					// 风速风向
					var weather = data.meteorological[0];
					var WindSpeed = weather.WindSpeed / 100;
					var WindDir = (weather.WindDir / 100) + "°";
					var Pre = weather.Pre / 100;
					var HDTNum = gyro.HDT;
					$(".WindSpeed").text(WindSpeed);
					$(".WindDir").text(WindDir);
					$("#Pre").text(Pre);
					$(".fx_box .pointer_img").css('transform', 'rotate(' + (weather.WindDir / 100) + 'deg)')
					// 横摇纵摇
					var mru = data.mru[0];
					var Pitch = (mru.Pitch / 100) + "°";
					var Roll = (mru.Roll / 100) + "°";
					$(".Pitch").text(Pitch);
					$(".Roll").text(Roll);
					if (dataFun) {
						dataFun(HDTNum);
					}
					if (EW == 'W') {
						currentLon = -(gpsgga.LongtitudeD);
					} else {
						currentLon = +(gpsgga.LongtitudeD);
					}
					zoneTime = +getLocalTime(currentLon);
				}
				if (DataSource == '2号GPS' && EquipmentTime == 'GGA+VTG') {
					var gpsgga1 = data.gpsgga[1];
					EW1 = gpsgga1.EW;
					var NS1 = gpsgga1.NS;
					var LatitudeD1 = (gpsgga1.LatitudeD) + "°";
					var LatitudeM1 = (gpsgga1.LatitudeM / 10000).toFixed(3) + "'";
					var latitude1 = LatitudeD1 + LatitudeM1; // 纬度
					var LongtitudeD1 = (gpsgga1.LongtitudeD) + "°";
					var LongtitudeM1 = (gpsgga1.LongtitudeM / 10000).toFixed(3) + "'";
					var longitude1 = LongtitudeD1 + LongtitudeM1; // 经度
					$("#top_longitude").text(EW1 + ' ' + longitude1);
					$("#top_latitude").text(NS1 + ' ' + latitude1);
					if (EW1 == 'W') {
						currentLon = -(gpsgga1.LongtitudeD);
					} else {
						currentLon = +(gpsgga1.LongtitudeD);
					}
					zoneTime = +getLocalTime(currentLon);
					var gpsvtg1 = data.gpsvtg[1];
					var SpeedKn1 = gpsvtg1.SpeedKn / 100;
					var course1 = gpsvtg1.RHDVTG / 100;
					$("#SpeedKn").text(SpeedKn1);
					$("#course").text(course1 + '°');
				}
				if (DataSource == '3号GPS' && EquipmentTime == 'GGA+VTG') {
					var gpsgga2 = data.gpsgga[2];
					EW2 = gpsgga2.EW;
					var NS2 = gpsgga2.NS;
					var LatitudeD2 = (gpsgga2.LatitudeD) + "°";
					var LatitudeM2 = (gpsgga2.LatitudeM / 10000).toFixed(3) + "'";
					latitude2 = LatitudeD2 + LatitudeM2; // 纬度
					var LongtitudeD2 = (gpsgga2.LongtitudeD) + "°";
					var LongtitudeM2 = (gpsgga2.LongtitudeM / 10000).toFixed(3) + "'";
					longitude2 = LongtitudeD2 + LongtitudeM2; // 经度
					$("#top_longitude").text(EW2 + ' ' + longitude2);
					$("#top_latitude").text(NS2 + ' ' + latitude2);
					if (EW2 == 'W') {
						currentLon = -(gpsgga2.LongtitudeD);
					} else {
						currentLon = +(gpsgga2.LongtitudeD);
					}
					zoneTime = +getLocalTime(currentLon);
					var gpsvtg2 = data.gpsvtg[2];
					var SpeedKn2 = gpsvtg2.SpeedKn / 100;
					var course2 = gpsvtg2.RHDVTG / 100;
					$("#SpeedKn").text(SpeedKn2);
					$("#course").text(course2 + '°');
				}
				if (DataSource == '1号GPS' && EquipmentTime == 'RMC') {
					var gpsrmc3 = data.gpsrmc[0];
					EW3 = gpsrmc3.EW;
					var NS3 = gpsrmc3.NS;
					var LatitudeD3 = (gpsrmc3.LatitudeD) + "°";
					var LatitudeM3 = (gpsrmc3.LatitudeM / 10000).toFixed(3) + "'";
					var latitude3 = LatitudeD3 + LatitudeM3; // 纬度
					var LongtitudeD3 = (gpsrmc3.LongtitudeD) + "°";
					var LongtitudeM3 = (gpsrmc3.LongtitudeM / 10000).toFixed(3) + "'";
					var longitude3 = LongtitudeD3 + LongtitudeM3; // 经度
					$("#top_longitude").text(EW3 + ' ' + longitude3);
					$("#top_latitude").text(NS3 + ' ' + latitude3);
					var SpeedKn3 = gpsrmc3.SpeedKn / 100;
					$("#SpeedKn").text(SpeedKn3);
					if (EW3 == 'W') {
						currentLon = -(gpsrmc3.LongtitudeD);
					} else {
						currentLon = +(gpsrmc3.LongtitudeD);
					}
					zoneTime = +getLocalTime(currentLon);
				}
				if (DataSource == '2号GPS' && EquipmentTime == 'RMC') {
					var gpsrmc4 = data.gpsrmc[1];
					EW4 = gpsrmc4.EW;
					var NS4 = gpsrmc4.NS;
					var LatitudeD4 = (gpsrmc4.LatitudeD) + "°";
					var LatitudeM4 = (gpsrmc4.LatitudeM / 10000).toFixed(3) + "'";
					latitude4 = LatitudeD4 + LatitudeM4; // 纬度
					var LongtitudeD4 = (gpsrmc4.LongtitudeD) + "°";
					var LongtitudeM4 = (gpsrmc4.LongtitudeM / 10000).toFixed(3) + "'";
					longitude4 = LongtitudeD4 + LongtitudeM4; // 经度
					$("#top_longitude").text(EW4 + ' ' + longitude4);
					$("#top_latitude").text(NS4 + ' ' + latitude4);
					var SpeedKn4 = gpsrmc4.SpeedKn / 100;
					$("#SpeedKn").text(SpeedKn4);
					if (EW4 == 'W') {
						currentLon = -(gpsrmc4.LongtitudeD);
					} else {
						currentLon = +(gpsrmc4.LongtitudeD);
					}
					zoneTime = +getLocalTime(currentLon);
				}
				if (DataSource == '3号GPS' && EquipmentTime == 'RMC') {
					var gpsrmc5 = data.gpsrmc[2];
					EW5 = gpsrmc5.EW;
					var NS5 = gpsrmc5.NS;
					var LatitudeD5 = (gpsrmc5.LatitudeD) + "°";
					var LatitudeM5 = (gpsrmc5.LatitudeM / 10000).toFixed(3) + "'";
					latitude5 = LatitudeD5 + LatitudeM5; // 纬度
					var LongtitudeD5 = (gpsrmc5.LongtitudeD) + "°";
					var LongtitudeM5 = (gpsrmc5.LongtitudeM / 10000).toFixed(3) + "'";
					longitude5 = LongtitudeD5 + LongtitudeM5; // 经度
					$("#top_longitude").text(EW5 + ' ' + longitude5);
					$("#top_latitude").text(NS5 + ' ' + latitude5);
					var SpeedKn5 = gpsrmc5.SpeedKn / 100;
					$("#SpeedKn").text(SpeedKn5);
					if (EW5 == 'W') {
						currentLon = -(gpsrmc5.LongtitudeD);
					} else {
						currentLon = +(gpsrmc5.LongtitudeD);
					}
					zoneTime = +getLocalTime(currentLon);
				}
				var myDate = new Date();
				var utcHour = +myDate.getUTCHours();
				var lonHour = (utcHour + zoneTime);
				var currentHour;
				if (lonHour < 0) {
					currentHour = 24 + lonHour;
				} else {
					currentHour = lonHour;
				}
				if (isNaN(currentHour)) {
					$(".china_time").text('00:00:00');
				}
				var m = myDate.getMinutes(); //获取当前分钟数(0-59)
				var s = myDate.getSeconds();
				var now = currentHour + ':' + getNow(m) + ":" + getNow(s);
				$(".china_time").text(now);
				$("#btnFollowTarget").off().click(function () { // 目标船自转控制开关
					var has = $(this).hasClass("on");
					if (has) {
						$(this).removeClass('on');
					} else {
						$(this).addClass('on');
					}
					isFollowTarget = !isFollowTarget;
				});
				if (isFollowTarget) { // 定时器运行时关联开关属性
					viewer.camera.flyTo({ // 根据经纬度实时运行
						destination: Cesium.Cartesian3.fromDegrees(pointLon, pointLat, viewer.camera.positionCartographic.height)
					});
				}
				creatTarget(HDTNum1);
			}
		})
	}
	var entityPositionShow;
	// 创建目标船
	function creatTarget(HDTNum1) {
		if (entityPositionShow != null) {
		} else {
			entityPositionShow = viewer.entities.add({
				position: Cesium.Cartesian3.fromDegrees(pointLon, pointLat, -100),
				label: {
					show: false,
					geocoder: false,
					showBackground: true,
					text: ' ' + ' 经度: ' + (' ' + longitude) + '\n纬度: ' + (' ' + latitude),
					font: fontNum + 'px MicroSoft YaHei',
					fillColor: Cesium.Color.WHITE,
					outlineColor: Cesium.Color.WHITE,
					outlineWidth: 5,
					horizontalOrigin: Cesium.HorizontalOrigin.TOP,
					verticalOrigin: Cesium.VerticalOrigin.TOP,
					pixelOffset: new Cesium.Cartesian2(offsetX, offsetY),
					backgroundColor: Cesium.Color.BLACK
				},
				billboard: {
					image: './images/99.png',
					show: true,
					eyeOffset: new Cesium.Cartesian3(0.0, 0.0, 0.0),
					horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
					verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
					alignedAxis: Cesium.Cartesian3.ZERO,
					scale: scalcShipNum
				}
			});
		}
		circle();
		//var id = 2;
		//scope(DegreeConvertBack(longitude), DegreeConvertBack(latitude), 15000.0, id);

		//鼠标点击小船事件
		var handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
		handler.setInputAction(function (click) {
			var pick = viewer.scene.pick(click.position); // 获取鼠标当前位置
			//  pick选中的对象
			/*       if (Cesium.defined(pick) && (pick.id._id === '10000001')) {
					console.log(pick.id._id)
					window.location.href = "text.html"
				  } */
		}, Cesium.ScreenSpaceEventType.LEFT_DOUBLE_CLICK);
		entityPositionShow.label.text = ' ' + '经度: ' + (' ' + longitude) + '\n纬度: ' + (' ' + latitude);
		entityPositionShow.position = Cesium.Cartesian3.fromDegrees(pointLon, pointLat, -100);
		entityPositionShow.billboard.rotation = Math.PI * 0.5 - 1 * HDTNum1 / 36000 * 2 * Math.PI;

		viewer.scene.camera.moveEnd.addEventListener(function () {
			var currentMagnitude = viewer.camera.getMagnitude(); //获取景深（监听滚动结束）
			if (scalcShipNumFlag) {
				scalcShipNum = magnitudePrev / currentMagnitude * 0.2;
				entityPositionShow.billboard.scale = scalcShipNum;
			}
			fontNum = magnitudePrev / currentMagnitude * 5;
			entityPositionShow.label.font = fontNum + 'px MicroSoft YaHei';
			offsetX = magnitudePrev / currentMagnitude * 1;
			offsetY = magnitudePrev / currentMagnitude * -30;
			entityPositionShow.label.pixelOffset = new Cesium.Cartesian2(offsetX, offsetY);
		})
		// 地球滚轮事件ing
		var handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
		handler.setInputAction(function (wheelment) {
			var currentMagnitude = viewer.camera.getMagnitude();
			scalcShipNum = magnitudePrev / currentMagnitude * 0.2;
			entityPositionShow.billboard.scale = scalcShipNum;
			fontNum = magnitudePrev / currentMagnitude * 5;
			entityPositionShow.label.font = fontNum + 'px MicroSoft YaHei';
			offsetX = magnitudePrev / currentMagnitude * 1;
			offsetY = magnitudePrev / currentMagnitude * -30;
			entityPositionShow.label.pixelOffset = new Cesium.Cartesian2(offsetX, offsetY);
		}, Cesium.ScreenSpaceEventType.WHEEL);

		$(".cesium-viewer-toolbar button[title='View Home']").click(function () { // home返回按钮
			Cesium.Camera.DEFAULT_VIEW_RECTANGLE = Cesium.Rectangle.fromDegrees(pointLon - 10, pointLat - 8, pointLon + 10, pointLat + 8);
			viewer.camera.flyHome();
			scalcShipNumFlag = true;
		});
		navBtn(entityPositionShow); // 底部导航事件
		if ($('#btnShow').hasClass('on')) {
			entityPositionShow.label.show = true;
		} else {
			entityPositionShow.label.show = false;
		}
	}



	// 显示周围船信息
	function dataRound() {
		$.ajax({
			url: 'http://localhost:10003/',
			type: 'post',
			dataType: 'json',
			data: '{"requesttype":514,"mmsi":10000001}',
			success: async function (data) {
				if (data.Count != 0) {
					var data = data.Target;
					let line1 = false;  //第一个圈是否有船
					let line2 = false;  //第二个圈是否有船
					for (var i = 0; i < data.length; i++) {
						var item = data[i];
						var roundLong = item.Longtitude; // 经度
						var roundLat = item.Latitude; // 纬度
						var shipId = item.Mmsi; // 船舶标识号
						var cource = (item.Cource / 10) + ' °'; // 航向
						var shipHead = item.Heading + ' °'; // 艏向
						var shipSpeed = item.Speed / 100 + ' kn'; // 航速'
						var disName = '' + roundLong;
						var shortName = disName.split('.')[0] + '.' + disName.split('.')[1].slice(0, 4);
						var roundLat1 = '' + roundLat;
						var roundLat1 = roundLat1.split('.')[0] + '.' + roundLat1.split('.')[1].slice(0, 4);
						if (shipId == 001) {
							var id = 0;
							await scope(roundLong, roundLat, 4000.0, id).then(() => {
								line1 = true
								if (!warnInfo1) {
									warnInfo1 = true
									$("#infoGuard").append("<p class='warnInfo1' style='color:red'>无人机1进入警戒圈报警!</p>")
								}
							}).catch(() => {
								warnInfo1 = false;
								$("#infoGuard").find('.warnInfo1').remove()
							})
							if (targetseconds % 2 == 0) {
								target1.push(roundLong, roundLat)
								if (target1.length == 10 || target1.length > 10) {
									target1.splice(0, 4)

									drawLine(target1);
								}
							}
						}
						if (shipId == 002) {
							var id = 1;
							await scope(roundLong, roundLat, 4000.0, id).then(() => {
								line1 = true
								if (!warnInfo2) {
									warnInfo2 = true
									$("#infoGuard").append("<p class='warnInfo2' style='color:red'>无人机2进入警戒圈报警!</p>")
								}
							}).catch(() => {
								warnInfo2 = false;
								$("#infoGuard").find('.warnInfo2').remove()
							})
							if (targetseconds % 2 == 0) {
								target2.push(roundLong, roundLat)
								if (target2.length == 10 || target2.length > 10) {
									target2.splice(0, 4)
									drawLine(target2);
								}
							}
						}
						if (shipId == 003) {
							var id = 3;
							await scope(roundLong, roundLat, 4000.0, id).then(() => {
								line1 = true
								if (!warnInfo3) {
									warnInfo3 = true
									$("#infoGuard").append("<p  class='warnInfo3' style='color:red'>无人机3进入警戒圈报警!</p>")
								}
							}).catch(() => {
								warnInfo3 = false;
								$("#infoGuard").find('.warnInfo3').remove()
							})
							if (targetseconds % 2 == 0) {
								target3.push(roundLong, roundLat)
								if (target3.length == 10 || target3.length > 10) {
									target3.splice(0, 4)
									drawLine(target3);
								}
							}
						}
						if (shipId == 004) {
							var id = 4;
							await scope(roundLong, roundLat, 1000.0, id).then(() => {
								line2 = true
								if (!warnInfo4) {
									warnInfo4 = true
									$("#infoGuard").append("<p class='warnInfo4' style='color:red'>蛙人1进入警戒圈报警!</p>")
								}
							}).catch(() => {
							warnInfo4 = false;
								$("#infoGuard").find('.warnInfo4').remove()
							})
							if (targetseconds % 2 == 0) {
								target4.push(roundLong, roundLat)
								if (target4.length == 10 || target4.length > 10) {
									target4.splice(0, 4)
									drawLine(target4);
								}
							}
						}
						if (shipId == 005) {
							var id = 5;
							await scope(roundLong, roundLat, 1000.0, id).then(() => {
								if (!warnInfo5) {
									warnInfo5 = true
									$("#infoGuard").append("<p  class='warnInfo5' style='color:red'>蛙人2进入警戒圈报警!</p>")
								}
							}).catch(() => {
								warnInfo5 = false;
								$("#infoGuard").find('.warnInfo5').remove()
							})
							if (targetseconds % 2 == 0) {
								target5.push(roundLong, roundLat)
								if (target5.length == 10 || target5.length > 10) {
									target5.splice(0, 4)
									drawLine(target5);
								}
							}
						}
						var imagePath = "./images/abnormal" + id + ".png";
						// creatShip(imagePath, roundLong, roundLat, shipId, cource, shipHead, shipSpeed, id); // 调用创建周围船(遍历产生)
						creatShip("./images/88.png", roundLong, roundLat, shipId, cource, shipHead, shipSpeed, id); // 调用创建周围船(遍历产生)
					}
					// if (line1) {
					// 	redEllipses[1].ellipse.outlineColor = Cesium.Color.YELLOW;
					// } else {
					// 	redEllipses[1].ellipse.outlineColor = Cesium.Color.RED;
					// }
					// if (line2) {
					// 	redEllipses[0].ellipse.outlineColor = Cesium.Color.YELLOW;
					// } else {
					// 	redEllipses[0].ellipse.outlineColor = Cesium.Color.RED;
					// }
				}
				// 控制底部按钮选中切换
				$('#btnRound').click(function () {
					if ($(this).hasClass('on')) {
						$(this).removeClass('on');
					} else {
						$(this).addClass('on');
					}
				})
				$('#btnTrack').click(function () {
					if ($(this).hasClass('on')) { //隐藏
						$(this).removeClass('on');
						$(".MovementLocus").hide();
						$(".MovementLocus1").hide();
					} else { //显示
						$(this).addClass('on');
						$(".MovementLocus").show();
						$(".MovementLocus1").show();
					}
				})
			}
		})
	}
	// 创建周围船信息
	function creatShip(img, roundLong, roundLat, shipId, cource, shipHead, shipSpeed, id) {
		var pointLon1 = Math.floor(roundLong);
		var pointLon2 = ((roundLong - pointLon1) * 60).toFixed(3);
		var pointLon = pointLon1 + "°" + pointLon2 + "'";
		var pointLat1 = Math.floor(roundLat);
		var pointLat2 = ((roundLat - pointLat1) * 60).toFixed(3);
		var pointLat = pointLat1 + "°" + pointLat2 + "'";
		var near_water_entity = viewer.entities.add(new Cesium.Entity());
		var roundEntity = viewer.entities.getById(shipId);
		if (roundEntity == undefined) {
			roundEntity = viewer.entities.add({
				position: Cesium.Cartesian3.fromDegrees(roundLong, roundLat, -100),
				parent: near_water_entity,
				id: shipId,
				label: {
					show: false,
					geocoder: false,
					//是否显示geocoder小器件，右上角查询按钮   
					showBackground: true,
					font: fontNum + 'px songti',
					fillColor: Cesium.Color.YELLOW,
					//填充颜色
					outlineColor: Cesium.Color.YELLOW,
					//轮廓颜色
					outlineWidth: 1,
					horizontalOrigin: Cesium.HorizontalOrigin.TOP,
					verticalOrigin: Cesium.VerticalOrigin.TOP,
					pixelOffset: new Cesium.Cartesian2(offsetX, offsetY),
				},
				billboard: {
					image: img,
					show: true,
					eyeOffset: new Cesium.Cartesian3(0.0, 0.0, 0.0),
					// default
					horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
					// 原点位于物体的水平中心。
					verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
					// 如果对象包含文本，则原点位于文本的基线处，否则原点位于对象的底部。
					scale: scalcShipNum,
					// default: 1.0
					// color: Cesium.Color.RED,
					// 图片颜色
					alignedAxis: Cesium.Cartesian3.ZERO,
				}
			});
		}
		// if (id == 0) {
		// 	roundEntity.label.text = "无人机: " + shipId + '\n 经度: ' + pointLon + '\n纬度: '
		// 		+ pointLat + '\n 航向:' + ' ' + cource + '\n艏向: ' + ' ' + shipHead + '\n航速:' + ' ' + shipSpeed;
		// 	roundEntity.position = Cesium.Cartesian3.fromDegrees(DegreeConvertBack(pointLon), DegreeConvertBack(pointLat));
		// } else if (id == 1) {
		// 	roundEntity.label.text = "无人机: " + shipId + '\n 经度: ' + pointLon + '\n纬度: '
		// 		+ pointLat + '\n 航向:' + ' ' + cource + '\n艏向: ' + ' ' + shipHead + '\n航速:' + ' ' + shipSpeed;
		// 	roundEntity.position = Cesium.Cartesian3.fromDegrees(DegreeConvertBack(pointLon), DegreeConvertBack(pointLat));
		// }
		// else if (id == 3) {
		// 	roundEntity.label.text = "无人机: " + shipId + '\n 经度: ' + pointLon + '\n纬度: '
		// 		+ pointLat + '\n 航向:' + ' ' + cource + '\n艏向: ' + ' ' + shipHead + '\n航速:' + ' ' + shipSpeed;
		// 	roundEntity.position = Cesium.Cartesian3.fromDegrees(DegreeConvertBack(pointLon), DegreeConvertBack(pointLat));
		// }
		// else if (id == 4) {
		// 	roundEntity.label.text = "蛙人: " + shipId + '\n 经度: ' + pointLon + '\n纬度: '
		// 		+ pointLat + '\n 航向:' + ' ' + cource + '\n艏向: ' + ' ' + shipHead + '\n航速:' + ' ' + shipSpeed;
		// 	roundEntity.position = Cesium.Cartesian3.fromDegrees(DegreeConvertBack(pointLon), DegreeConvertBack(pointLat));
		// } else if (id == 5) {
		// 	roundEntity.label.text = "蛙人: " + shipId + '\n 经度: ' + pointLon + '\n纬度: '
		// 		+ pointLat + '\n 航向:' + ' ' + cource + '\n艏向: ' + ' ' + shipHead + '\n航速:' + ' ' + shipSpeed;
		// 	roundEntity.position = Cesium.Cartesian3.fromDegrees(DegreeConvertBack(pointLon), DegreeConvertBack(pointLat));
		// }
			roundEntity.label.text = "目标船: " + shipId + '\n 经度: ' + pointLon + '\n纬度: '
				+ pointLat + '\n 航向:' + ' ' + cource + '\n艏向: ' + ' ' + shipHead + '\n航速:' + ' ' + shipSpeed;
			roundEntity.position = Cesium.Cartesian3.fromDegrees(DegreeConvertBack(pointLon), DegreeConvertBack(pointLat));
		// 控制经纬度显示隐藏
		if ($('#btnRound').hasClass("on")) {
			roundEntity.billboard.show = true;
		} else {
			roundEntity.billboard.show = false;
		}
		// 控制周围船开关按钮
		$('#btnRound').click(function () {
			near_water_entity.show = !near_water_entity.show;
		})

		// 鼠标点击周围船事件
		var handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
		// 地球滚轮事件
		handler.setInputAction(function (wheelment) {
			scalcShipNumFlag = true;
			var currentMagnitude = viewer.camera.getMagnitude();
			scalcShipNum = magnitudePrev / currentMagnitude * 0.2;
			roundEntity.billboard.scale = scalcShipNum;
			fontNum = magnitudePrev / currentMagnitude * 5;
			roundEntity.label.font = fontNum + 'px MicroSoft YaHei';
			offsetX = magnitudePrev / currentMagnitude * 0;
			offsetY = magnitudePrev / currentMagnitude * -50;
			roundEntity.label.pixelOffset = new Cesium.Cartesian2(offsetX, offsetY);
			scalcShipNumFlag = false;
		},
			Cesium.ScreenSpaceEventType.WHEEL);

		handler.setInputAction(function (click) { // 处理鼠标按下事件 
			var pick = viewer.scene.pick(click.position); // 获取鼠标当前位置
			//  选中某模型   pick选中的对象
			if (Cesium.defined(pick) && (pick.id._id === shipId)) {
				roundEntity.label.show = true;
			} else {
				roundEntity.label.show = false;
			}
		},
			Cesium.ScreenSpaceEventType.LEFT_DOWN);
		viewer.scene.camera.moveEnd.addEventListener(function () {
			//获取景深（监听滚动结束）
			var currentMagnitude = viewer.camera.getMagnitude();
			if (scalcShipNumFlag) {
				scalcShipNum = magnitudePrev / currentMagnitude * 0.2;
				roundEntity.billboard.scale = scalcShipNum;
			}
			fontNum = magnitudePrev / currentMagnitude * 5;
			roundEntity.label.font = fontNum + 'px MicroSoft YaHei';
			offsetX = magnitudePrev / currentMagnitude * 0;
			offsetY = magnitudePrev / currentMagnitude * -50;
			roundEntity.label.pixelOffset = new Cesium.Cartesian2(offsetX, offsetY);
		})
	}
	// 底部导航事件
	function navBtn(entityPositionShow) {
		$(".nav_bot .nav_com").off().click(function () {
			var idx = $(this).index();
			var has = $(this).hasClass('on');
			switch (idx) {
				case 0:
					if (has) {
						$(this).removeClass('on');
						entityPositionShow.label.show = false;
					} else {
						$(this).addClass('on');
						entityPositionShow.label.show = true;
					}
					break;
				case 1:
					if (has) {
						$(this).removeClass('on');
						$(".mainRight").hide();
					} else {
						$(this).addClass('on');
						$(".mainRight").show();
					}
					break;
				default:
					break;
			}
		})
	}
   
	 var localProvider3 = new Cesium.createTileMapServiceImageryProvider({
				//url: 'http://localhost:8081/arcgis/satellite/',
				//url: "http://services.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer",
				//url:'MapArc/arcgis/satellite',
				url:"Map",
				fileExtension: 'png',
			});
	viewer.imageryLayers.addImageryProvider(localProvider3);  
	 

	
	//卫星地图切换
	$("#show_product_line").click(function () {
		if ($(this).is(":checked")) {
			var localProvider1 = new Cesium.UrlTemplateImageryProvider({
				url: 'https://webst02.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}'
				
			});
			viewer.imageryLayers.addImageryProvider(localProvider1);
		} else {
			var localProvider = new Cesium.createTileMapServiceImageryProvider({
				url: 'js/Cesium-1.59/Build/Cesium/Assets/Textures/NaturalEarthII',
				fileExtension: 'jpg'
			});
			viewer.imageryLayers.addImageryProvider(localProvider);
		}
	})
	//自定义图层
	$("#showproduct").click(function () {
		if ($(this).is(":checked")) {
			/* var localProvider = new Cesium.createTileMapServiceImageryProvider({
			  url: 'MapArc',
			  fileExtension: 'png',
			});
			viewer.imageryLayers.addImageryProvider(localProvider); */
		} else {
			var localProvider3 = new Cesium.createTileMapServiceImageryProvider({
				url: 'MapArc',
				fileExtension: 'png',
			});
			viewer.imageryLayers.addImageryProvider(localProvider3);
		}
	})
	
	//地图初始化
	function cesiumInit() {
		//Cesium.Ion.defaultAccessToken = "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiJhMzlmOGY0MS01MTU3LTQzNDQtODljMy1iOTJiMGQ3MzExMzAiLCJpZCI6MTM0NjYsInNjb3BlcyI6WyJhc3IiLCJnYyJdLCJpYXQiOjE1NjMzMzQwNzh9.cq9M-At3uV2wTgn-FBXQuBSq_QPuwi26i2AkbEo7QD8";
		viewer = new Cesium.Viewer('cesiumContainer', {
			animation: false, // 动画器件，控制视图动画的播放速度
			timeline: false, // 时间线，指示当前时间，并允许用户跳到特定的时间
			navigationHelpButton: false, // 导航帮助按钮，显示默认的地图控制帮助
			baseLayerPicker: true, // 图层选择器，选择要显示的地图服务和地形服务
			geocoder: true, // 查找位置工具，查到之后会将镜头对准找到的地址，默认使用bing地图
			vrButton: false, // 是否显示地图双屏控件
			selectionIndicator: true, // 是否显示选取指示器组件 false禁用实体选中，true选中
			infoBox: false, // 是否显示信息框
			fullscreenButton: false, // 全屏按钮
			selectionIndicator: false, // 设置绿色框框不可见 
			geocoder: false,
			//是否显示地名查找控件
		});
		viewer._cesiumWidget._creditContainer.style.display = "none";

		// 添加本地图层(当GMRT图层加载慢的时候，预先加载本地图层，交互更好)
		var localProvider = new Cesium.createTileMapServiceImageryProvider({
			url: 'js/Cesium-1.59/Build/Cesium/Assets/Textures/NaturalEarthII',
			fileExtension: 'jpg'
		});
		viewer.imageryLayers.addImageryProvider(localProvider);
		var localProvider1 = new Cesium.UrlTemplateImageryProvider({
			url: 'https://webst02.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}'
		});
		viewer.imageryLayers.addImageryProvider(localProvider1);

		var scene = viewer.scene;
		var entity = viewer.entities.add({
			label: {
				show: false,
				showBackground: true,
				font: '15px songti',
				outlineWidth: 1,
				horizontalOrigin: Cesium.HorizontalOrigin.LEFT,
				verticalOrigin: Cesium.VerticalOrigin.TOP,
				pixelOffset: new Cesium.Cartesian2(15, 0)
			}
		});
		var handler = new Cesium.ScreenSpaceEventHandler(scene.canvas);

		magnitudePrev = viewer.camera.getMagnitude();
		//鼠标移动事件
		handler.setInputAction(function (movement) {
			var cartesian = viewer.camera.pickEllipsoid(movement.endPosition, scene.globe.ellipsoid);
			var height = viewer.camera.positionCartographic.height;
			if (cartesian) {
				var cartographic = Cesium.Cartographic.fromCartesian(cartesian);
				var longitudeString = Cesium.Math.toDegrees(cartographic.longitude).toFixed(6);
				var latitudeString = Cesium.Math.toDegrees(cartographic.latitude).toFixed(6);
				entity.position = cartesian;
				entity.label.show = true;
				entity.label.text = '经度: ' + ('' + longitudeString).slice(-15) + '\u00B0' + '\n纬度: ' + ('' + latitudeString).slice(-15) + '\u00B0';
			} else {
				entity.label.show = false;
			}
		},
			Cesium.ScreenSpaceEventType.MOUSE_MOVE);
		$('#showseaflow').on('click', function () {
			wind3D.show = document.getElementById("showseaflow").checked;
			if (document.getElementById("showseaflow").checked) {
				wind3D.queryNetCdfData(1, 1);
			} else {
				wind3D.cleanWindy();
			}
		});
	}
	//创建姿态仪 
	createPosture();
	function createPosture() {
		var posturewidth = document.body.clientWidth * 0.11;
		var posture = $("#posture").posture({
			width: posturewidth,
			height: posturewidth,
			theme: 't4',
			left: posturewidth / 0.12 - 3 * posturewidth - posturewidth / 5 - posturewidth / 10
		});
		var data = posture.data('posture');
		data.setValue(10, 30, 10);
		return posture;
	}
	var redEllipses = new Array()
	//创建圆
	function circle() {
		if (redEllipses.length == 0) {
			redEllipses[0] = viewer.entities.add({
				// 实体中心位置。默认中心高度0。
				position: Cesium.Cartesian3.fromDegrees(119.992062, 38.662356),
				ellipse: {
					semiMinorAxis: 1000.0,
					semiMajorAxis: 1000.0,
					material: Cesium.Color.RED.withAlpha(0.0), // 填充颜色及透明度。
					height: 0, // 指定椭圆中心相对于椭球面的高度。
					outline: false, // 要想显示轮廓线，高度必须设置。轮廓线颜色，默认黑色。
					outlineColor: Cesium.Color.RED, //轮廓的颜色
				}
			});

			redEllipses[1] = viewer.entities.add({
				// 实体中心位置。默认中心高度0。
				position: Cesium.Cartesian3.fromDegrees(119.992062, 38.662356),
				ellipse: {
					semiMinorAxis: 4000.0,
					semiMajorAxis: 4000.0,
					material: Cesium.Color.RED.withAlpha(0.0), // 填充颜色及透明度。
					height: 0, // 指定椭圆中心相对于椭球面的高度。
					outline: false, // 要想显示轮廓线，高度必须设置。轮廓线颜色，默认黑色。
					outlineColor: Cesium.Color.RED, //轮廓的颜色
				},
			});
			redEllipses[2] = viewer.entities.add({
				// 实体中心位置。默认中心高度0。
				position: Cesium.Cartesian3.fromDegrees(119.992062, 38.662356),
				ellipse: {
					semiMinorAxis: 15000.0,
					semiMajorAxis: 15000.0,
					material: Cesium.Color.RED.withAlpha(0.0), // 填充颜色及透明度。
					height: 0, // 指定椭圆中心相对于椭球面的高度。
					outline: false, // 要想显示轮廓线，高度必须设置。轮廓线颜色，默认黑色。
					outlineColor: Cesium.Color.RED, //轮廓的颜色
				},
			});

			// redEllipses[3] = viewer.entities.add({
			// 	// 实体中心位置。默认中心高度0。
			// 	position: Cesium.Cartesian3.fromDegrees(123.041525, 37.516657),
			// 	label: {
			// 		show: true,
			// 		text: '低空警戒区',
			// 		font: '14pt Source Han Sans CN', //字体样式
			// 		fillColor: Cesium.Color.RED, //字体颜色
			// 		style: Cesium.LabelStyle.FILL, //label样式
			// 		outlineWidth: 1,
			// 		scaleByDistance: new Cesium.NearFarScalar(1e6, 1, 1.2e6, 0.0),
			// 	}
			// });
			// redEllipses[4] = viewer.entities.add({
			// 	// 实体中心位置。默认中心高度0。
			// 	position: Cesium.Cartesian3.fromDegrees(123.025165, 37.535497),
			// 	label: {
			// 		show: true,
			// 		text: '水面警戒区',
			// 		font: '14pt Source Han Sans CN', //字体样式
			// 		fillColor: Cesium.Color.RED, //字体颜色
			// 		style: Cesium.LabelStyle.FILL, //label样式
			// 		outlineWidth: 1,
			// 		scaleByDistance: new Cesium.NearFarScalar(1e6, 1, 1.2e6, 0.0),
			// 	}
			// });
			// redEllipses[5] = viewer.entities.add({
			// 	// 实体中心位置。默认中心高度0。
			// 	position: Cesium.Cartesian3.fromDegrees(123.065272, 37.504709),
			// 	label: {
			// 		show: true,
			// 		text: '水下警戒区',
			// 		font: '14pt Source Han Sans CN', //字体样式
			// 		fillColor: Cesium.Color.RED, //字体颜色
			// 		style: Cesium.LabelStyle.FILL, //label样式
			// 		outlineWidth: 1,
			// 		scaleByDistance: new Cesium.NearFarScalar(1e6, 1, 1.2e6, 0.0),
			// 	}
			// });
		} else {
			redEllipses[0].position = Cesium.Cartesian3.fromDegrees(DegreeConvertBack(longitude), DegreeConvertBack(latitude));
			redEllipses[1].position = Cesium.Cartesian3.fromDegrees(DegreeConvertBack(longitude), DegreeConvertBack(latitude));
			redEllipses[2].position = Cesium.Cartesian3.fromDegrees(DegreeConvertBack(longitude), DegreeConvertBack(latitude));
			// redEllipses[3].position = Cesium.Cartesian3.fromDegrees(DegreeConvertBack(longitude) + 0.1051583, DegreeConvertBack(latitude) + 0.020591);
			// redEllipses[4].position = Cesium.Cartesian3.fromDegrees(DegreeConvertBack(longitude) + 0.2151833, DegreeConvertBack(latitude) + 0.039413);
			// redEllipses[5].position = Cesium.Cartesian3.fromDegrees(DegreeConvertBack(longitude) + 0.025, DegreeConvertBack(latitude));
		}
		targetseconds = targetseconds + 1
		if (targetseconds % 2 == 0) {
			target.push(DegreeConvertBack(longitude), DegreeConvertBack(latitude))
			if (target.length == 10 || target.length > 10) {
				target.splice(0, 4)
				drawLine(target);
			}
		}
	}
	//经纬度转换
	function DegreeConvertBack(value) {
		var longitude1 = value + "";
		var du = longitude1.split("°")[0];
		var fen = (longitude1.split("°")[1].split("'")[0]);
		return Math.abs(du) + (Math.abs(fen) / 60);
	}
	//计算圆到目标船的信息
	async function scope(c, d, e, id) {
		return await new Promise((resolve, reject) => {
			var EARTH_RADIUS = 6378.137; //地球半径
			var lng1 = c * Math.PI / 180; //船的
			var lat1 = d * Math.PI / 180;
			var lng2 = DegreeConvertBack(longitude) * Math.PI / 180; //圆的
			var lat2 = DegreeConvertBack(latitude) * Math.PI / 180;
			var a = Math.abs(lng1) - Math.abs(lng2); //经度之差
			var b = Math.abs(lat1) - Math.abs(lat2); //纬度之差
			var s = 2 * Math.asin(Math.sqrt(Math.pow(Math.sin(a / 2), 2) //计算两点距离的公式
				+ Math.cos(lat1) * Math.cos(lat2) * Math.pow(Math.sin(b / 2), 2)));
				var q = s * EARTH_RADIUS * 800;
			 var v;
			if (id == 1 || id == 0 || id == 3) {
				v = s * EARTH_RADIUS * 990; //弧长乘以地球的半径
			} else if (id == 4 || id == 5) {
				v = s * EARTH_RADIUS * 790; //弧长乘以地球的半径
			}
			  
			if (v < e) {
				resolve()
			} else if (v > e) {
				reject()
			}
		})
	}
</script>

</html>
晓柯爱
关注
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值