{% extends "index/baseTemp.html" %}

{% block title %}
<title>卫星轨迹</title>
{% endblock %}

{% block blink %}
<link rel="stylesheet" href="{{ pathPrefix }}/plugins/ztree/zTreeStyle.css">
<link rel="stylesheet" href="{{ pathPrefix }}/css/myHome/myDatas.css">
<link rel="stylesheet" href="{{ pathPrefix }}/frameworks/mars3d/lib/Cesium/Widgets/widgets.css" />
<link rel="stylesheet" href="{{ pathPrefix }}/frameworks/mars3d/lib/jquery/ztree/css/zTreeStyle/zTreeStyle.css" />
<style>
	html,
	body,
	#map,
	.views {
		width: 100%;
		height: 100%;
		padding: 0px;
	}

	#setCzmlContent {
		display: none;
		z-index: 999;
		position: absolute;
		top: 60px;
		left: 180px;
		width: 260px;
		text-align: center;
		background-color: #eee;
		border-radius: 5px;
	}

	button {
		margin-right: 15px;
		margin-top: 5px;
	}

	.input-group {
		margin-top: 2px;
	}

	form {
		padding: 0px 6px;
	}

	.btn_self {
		margin-bottom: 4px;
	}

	.satellite_xyz div {
		width: 230px;
	}
</style>
{% endblock %}

{% block bscript %}
<script src="{{ pathPrefix }}/frameworks/mars3d/lib/jquery/jquery-2.1.4.min.js"></script>
<script src="{{ pathPrefix }}/frameworks/mars3d/lib/Cesium/Cesium.js"></script>
<script src="{{ pathPrefix }}/frameworks/mars3d/lib/bootstrap/js/bootstrap.min.js"></script>
<script src="{{ pathPrefix }}/plugins/jscolor/jscolor.js"></script>
<script src="{{ pathPrefix }}/frameworks/mars3d/lib/jquery/ztree/js/jquery.ztree.all.min.js"></script>
<script src="{{ pathPrefix }}/frameworks/mars3d/lib/sgp4/satellite.js"></script>
<script src="{{ pathPrefix }}/js/appCenter/satelliteWorld/satellite.js"></script>
{% endblock %}

{% block contentbody %}
<div id="map" style="background-color: rgba(3, 22, 124, 30)"></div>
<div id="treeDemo" class="ztree" style="z-index: 999;position: absolute;top: 60px;"></div>
<div id="setCzmlContent">
	<input type="hidden" id="czmlUrl" value="" />
	<h3>参数设置</h3>
	<form class="form-inline" role="form">
		<div class="input-group">
			<span class="input-group-addon">轨道颜色</span>
			<input id="gdColor" type="text" placeholder="请选择"
				class="form-control jscolor {valueElement:'chosen-value', onFineChange:'setTextColor(this)'}"
				value="" />
		</div>
		<div class="input-group">
			<span class="input-group-addon">轨道宽度</span>
			<input type="text" id="gdWidth" class="form-control" placeholder="请输入" value="1">
		</div>
		<div class="input-group">
			<span class="input-group-addon">标注内容</span>
			<input type="text" id="labelContent" class="form-control" placeholder="请输入" value="">
		</div>
		<div class="input-group btn_self">
			<button type="button" id="submit" class="btn btn-success">确定</button>
			<button type="button" id="return" class="btn btn-primary">取消</button>
		</div>
	</form>
</div>
<div style="z-index:1000;position:absolute;top:56px;left:90px;">
	<button type="button" class="close" style="background-color:white;" aria-label="Close"><span
			aria-hidden="true">&times;</span></button>
</div>

<div class="satellite_xyz"
	style="display:none;z-index:1000;position:absolute;background-color: white;top:10px;right: 10px;width: 240px;text-align: center;border-radius: 5px;">
	<ul>
		<li>当前经度：<span class="xyz_num" id="lng"></span></li>
		<li>当前纬度：<span class="xyz_num" id="lat"></span></li>
		<li>当前高度：<span class="xyz_num" id="hei"></span></li>
	</ul>
</div>

<script>
	var viewer = null;
	var handler = null;
	var reg = /^#([0-9a-fA-f]{3}|[0-9a-fA-f]{6})$/;
	var reg_width = /^[+]{0,1}(\d+)$|^[+]{0,1}(\d+\.\d+)$/;
	var self_layer, tdt_layer;

	$(".navbar").remove();
	$(document).ready(function () {
		//自定义
		var self_provider = new Cesium.SingleTileImageryProvider({
			url: base.static + "/images/satellitePic/world.jpg",
			rectangle: Cesium.Rectangle.fromDegrees(-180, -90, 180, 90)
		});
		//天地图
		// var tdt_provider = new Cesium.UrlTemplateImageryProvider({
		// 	url: JSON.parse(base.mapurl).tdt
		// });
		//在线地图
		// var online_provider = new Cesium.ArcGisMapServerImageryProvider({
		// 	url: "https://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer"
		// });

		// var viewer_provider = null;
		// if (base.map == "online") {
		// 	viewer_provider = online_provider;
		// } else {
		// 	viewer_provider = self_provider;
		// }
		var viewer_provider = self_provider;
		viewer = new Cesium.Viewer('map', {
			baseLayerPicker: false,//是否显示图层选择器  
			fullscreenButton: false,//是否显示全屏按钮  
			geocoder: false,//是否显示geocoder小器件，右上角查询按钮  
			homeButton: false,//是否显示Home按钮  
			sceneModePicker: false,//是否显示3D/2D选择器  
			selectionIndicator: false,//是否显示选取指示器组件  
			navigationHelpButton: false,//是否显示右上角的帮助按钮  
			scene3DOnly: true,//如果设置为true，则所有几何图形以3D模式绘制以节约GPU资源  
			selectionIndicator: false,
			allowDataSourcesToSuspendAnimation: true,
			imageryProvider: viewer_provider,
			orderIndependentTranslucency: false, //去除太阳黑色边界
			contextOptions: {  //打开更改webgl开关（使下面的更改透明度起作用）
				webgl: {
					alpha: false,
				}
			},
		});

		initTree();

		var oldHei = 130000000;
		var firstHei = false;
		viewer.camera.changed.addEventListener(function () {
			var hei = viewer.camera.positionCartographic.height;
			// if (base.map != "online") { //若加载离线地图 则需在 加载贴图图层之后 加载天地图
			// 	tdt_layer = new Cesium.ImageryLayer(self_provider, {
			// 		show: false
			// 	});
			// 	viewer.imageryLayers.add(tdt_layer);
			// 	self_layer = viewer.imageryLayers._layers[0];
			// 	//相机绑定底图切换

			// 	if (hei > Number(50000000)) { //加上自定义贴图
			// 		self_layer.show = true;
			// 		tdt_layer.show = false;
			// 	} else {
			// 		self_layer.show = false;
			// 		tdt_layer.show = true;
			// 	}
			// }

			//控制轨道文字的显示和隐藏
			if (hei > Number(100000000) && (oldHei < Number(100000000) || oldHei == null)) {
				create_Satellite.hideCzmlText();
			}
			if (hei < Number(100000000) && (oldHei > Number(100000000) || oldHei == null)) {
				create_Satellite.showCzmlText();
			}
			if (!firstHei) {
				firstHei = true;
				create_Satellite.hideCzmlText();
			}
			oldHei = hei;
		});

		//底图定位
		viewer.camera.setView({
			destination: Cesium.Cartesian3.fromDegrees(115.916724, 38.66755, 130000000),
			orientation: {
				heading: Cesium.Math.toRadians(10),
				pitch: Cesium.Math.toRadians(-90),
				roll: 0.0
			}
		});

		/* $(".cesium-viewer-animationContainer").hide();  //隐藏animation和timeline控件
		$(".cesium-viewer-timelineContainer").hide(); */
		//viewer.clock.multiplier = 300; //播放速度
		viewer.clock.shouldAnimate = true; //自动播放
		viewer.scene.backgroundColor = new Cesium.Color(0.0, 0.0, 0.0, 0.0);
		create_Satellite.viewer = viewer;
		//显示当前时间的位置；
		viewer.clock.onTick.addEventListener(function (clock) {
			if (trackedEntity) {
				var position = trackedEntity.position.getValue(clock.currentTime);
				if (position) {
					var cartographic = viewer.scene.globe.ellipsoid.cartesianToCartographic(position);
					var lat = Cesium.Math.toDegrees(cartographic.latitude),
						lng = Cesium.Math.toDegrees(cartographic.longitude),
						hei = cartographic.height;
					$("#lng").html(lng.toFixed(2));
					$("#lat").html(lat.toFixed(2));
					$("#hei").html(hei.toFixed(2) + "米");
				}
			}
		});
		$("#submit").click(function () {
			$("#setCzmlContent").hide();
			var obj = {};
			var color = colorRgb($("#gdColor").val() || "");
			obj.gdColor = typeof (color) == "string" ? "" : color;
			obj.gdWidth = 1;
			if (reg_width.test($("#gdWidth").val())) {
				obj.gdWidth = $("#gdWidth").val();
			} else {
				$("#gdWidth").css("color", "red").val("格式错误！")
			}
			obj.labelContent = $("#labelContent").val() || "";
			var czmlUrl = $("#czmlUrl").val();
			create_Satellite.setCzmlContent(czmlUrl, obj);
		});
		$("#return").click(function () {
			$("#setCzmlContent").hide();
		});

		$("#gdWidth").focus(function () {
			$("#gdWidth").css("color", "grey").val("");
		});

		$(".close").click(function () {
			$("#treeDemo").hide();
			$("#setCzmlContent").hide();
			$(this).hide();
		});

	});

	var czmlSouers = [{
		name: "高分一号",
		czmlUrl: base.static + "/data/satelliteCzml/GAOFEN1.czml",
		twoLineData: {
			tleLine1: "1 39150U 13018A   18351.90024019  .00000056  00000-0  15337-4 0  9998",
			tleLine2: "2 39150  97.9159  71.0675 0020503  86.5939 273.7600 14.76525973304210"
		},
		checked: true
	}, {
		name: "高分二号",
		czmlUrl: base.static + "/data/satelliteCzml/GAOFEN2.czml",
		checked: true
	}, {
		name: "高分四号",
		czmlUrl: base.static + "/data/satelliteCzml/GAOFEN4.czml",
		checked: true
	}, {
		name: "资源一号02C星",
		czmlUrl: base.static + "/data/satelliteCzml/ZIYUAN1-02C.czml",
		twoLineData: {
			tleLine1: "1 38038U 11079A   18351.84465031  .00000063  00000-0  36343-4 0  9991",
			tleLine2: "2 38038  98.2687  40.5155 0000758  71.9754 288.1508 14.35486355366211"
		},
		checked: true
	}, {
		name: "资源三号2星",
		czmlUrl: base.static + "/data/satelliteCzml/ZIYUAN3-2.czml",
		twoLineData: {
			tleLine1: "1 41556U 16033A   18351.87685916  .00000513  00000-0  25941-4 0  9996",
			tleLine2: "2 41556  97.4157  67.1130 0002520 109.9694 341.3365 15.21384255141660"
		},
		checked: true
	}, {
		name: "资源三号",
		czmlUrl: base.static + "/data/satelliteCzml/ZIYUAN3.czml",
		twoLineData: {
			tleLine1: "1 38046U 12001A   18351.89467087  .00000447  00000-0  23102-4 0  9999",
			tleLine2: "2 38046  97.4755  62.1698 0002348   0.9295  87.6966 15.21291360385372"
		},
		checked: true
	}, {
		name: "环境一号A星",
		czmlUrl: base.static + "/data/satelliteCzml/HUANJING1A.czml",
		twoLineData: {
			tleLine1: "1 33320U 08041A   18351.89284075 -.00000285  00000-0 -33001-4 0  9993",
			tleLine2: "2 33320  97.8649  50.2086 0026945  54.7504 305.6224 14.76982613553774"
		},
		checked: true
	}, {
		name: "环境一号B星",
		czmlUrl: base.static + "/data/satelliteCzml/HUANJING1B.czml",
		twoLineData: {
			tleLine1: "1 33321U 08041B   18351.86681242  .00000102  00000-0  21551-4 0  9991",
			tleLine2: "2 33321  97.8727  51.8701 0036020  70.9842 289.5241 14.77080226553761"
		},
		checked: true
	}, {
		name: "北斗四号星",
		czmlUrl: base.static + "/data/satelliteCzml/BEIDOU4.czml",
		checked: true
	}, {
		name: "北斗G2星",
		czmlUrl: base.static + "/data/satelliteCzml/BEIDOUG2.czml",
		checked: true

	}, {
		name: "风云三号B星",
		czmlUrl: base.static + "/data/satelliteCzml/FENGYUN3B.czml",
		checked: true

	}, {
		name: "海洋一号B星",
		czmlUrl: base.static + "/data/satelliteCzml/HAIYANG1B.czml",
		twoLineData: {
			tleLine1: "",
			tleLine2: ""
		}
	}, {
		name: "海洋二号A星",
		czmlUrl: base.static + "/data/satelliteCzml/HAIYANG2A.czml",
		twoLineData: {
			tleLine1: "",
			tleLine2: ""
		}
	}, {
		name: "PLEIADES一号A星",
		czmlUrl: base.static + "/data/satelliteCzml/PLEIADES1A.czml",
		twoLineData: {
			tleLine1: "",
			tleLine2: ""
		}
	}, {
		name: "PLEIADES一号B星",
		czmlUrl: base.static + "/data/satelliteCzml/PLEIADES1B.czml",
		twoLineData: {
			tleLine1: "",
			tleLine2: ""
		}
	}, {
		name: "SPOT六号A星",
		czmlUrl: base.static + "/data/satelliteCzml/SPOT6A.czml",
		twoLineData: {
			tleLine1: "1 40053U 14034A   18351.79450158  .00000814  00000-0  18469-3 0  9995",
			tleLine2: "2 40053  98.1671  56.4700 0001347  79.7694 280.3646 14.58578513237845"
		}
	}
	];

	function initTree() {
		var zNodes = [{
			"id": 1,
			"pId": 0,
			"name": "全部",
			"open": true,
			isFather: true
		},];

		czmlSouers.forEach(function (item, index) {
			var obj = {};
			obj.id = Number(index + "100");
			obj.pId = 1;
			obj.checked = item.checked;
			obj.name = item.name;
			obj.czmlUrl = item.czmlUrl;
			obj.twoLineData = item.twoLineData;
			zNodes.push(obj);
		});

		var setting = {
			data: {
				simpleData: {
					enable: true,
				}
			},
			check: {
				enable: true
			},
			view: {
				fontCss: {
					"color": "white"
				}
			},
			callback: {
				onCheck: checkNodeHandler,
				onClick: clickNodeHandler,
				onDblClick: dblClickNodeHandler
			}
		};
		treeObj = $.fn.zTree.init($("#treeDemo"), setting, zNodes);
		var allNodes = treeObj.getNodes()[0].children;
		allNodes.forEach(function (item) {
			item.checkedOld = item.checked;
		});

		create_Satellite.addAllCzmlData(czmlSouers); //添加所有数据
	}

	function checkNodeHandler() {
		var nodes = treeObj.getChangeCheckedNodes();
		for (var i = 0; i < nodes.length; i++) {
			var node = nodes[i];
			if (node.isFather) continue;
			if (node.checked) {
				create_Satellite.bindCZMLData(node.czmlUrl); //选中展示
			} else {
				create_Satellite.hideCZMLData(node.czmlUrl); //未选中 隐藏
			}
			node.checkedOld = node.checked;

		}
	}

	var trackedEntity = null;
	function clickNodeHandler(event, treeId, treeNode) {
		if (treeNode.id == 1) {
			$(".satellite_xyz").hide();
			viewer.camera.setView({
				destination: Cesium.Cartesian3.fromDegrees(115.916724, 38.66755, 130000000),
				orientation: {
					heading: Cesium.Math.toRadians(10),
					pitch: Cesium.Math.toRadians(-90),
					roll: 0.0
				}
			});
			viewer.trackedEntity = null;
			return;
		} else {
			$(".satellite_xyz").show();
			//获取当前节点
			var dataSourceArr = create_Satellite.dataSourceArr;
			var dataSource = create_Satellite.getDataSourceByCzml(treeNode.czmlUrl);
			var entities = null;
			if (dataSource) entities = dataSource.entities;
			if (entities && dataSource.show == true) viewer.trackedEntity = trackedEntity = entities._entities._array[0];
		}

	}

	function dblClickNodeHandler(event, treeId, treeNode) { //显示设置面板
		if (treeNode.isParent) return;
		$("#setCzmlContent").show();
		$("#czmlUrl").val(treeNode.czmlUrl || "");
		$("#gdColor").val("").css("background-color", "rgb(255, 255, 255)");
		$("#gdWidth").val("");
		$("#labelContent").val("");
	}

	function setTextColor(picker) { //设置颜色
		$("#gdColor").val(picker.toString());
	}

	function colorRgb(sColor) { //16进制的颜色转为rgba
		if (!sColor) return;
		var sColor = "#" + sColor.toLowerCase();
		if (sColor && reg.test(sColor)) {
			if (sColor.length === 4) {
				var sColorNew = "#";
				for (var i = 1; i < 4; i += 1) {
					sColorNew += sColor.slice(i, i + 1).concat(sColor.slice(i, i + 1));
				}
				sColor = sColorNew;
			}
			//处理六位的颜色值  
			var sColorChange = [];
			for (var i = 1; i < 7; i += 2) {
				sColorChange.push(parseInt("0x" + sColor.slice(i, i + 2)));
			}
			sColorChange.push(255);

			return {
				"rgba": sColorChange
			};
		} else {
			return sColor;
		}
	};

</script>

{% endblock %}