YQ-August
/
yzHY


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362
							<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title></title>
		<script src="../map/jquery.min.js"></script>
		<script src="../map/ol.js"></script>
		<link href="../map/ol.css" rel="stylesheet" />
		<style type="text/css">
			*{
				border: none;
				padding: 0px;
				margin: 0px;
			}
			#map {
				border: 0px;
				margin: 0px;
				padding: 0px;
				width: 100vw;
				height: 100vh;
				font-size: 13px;
			}
			.mapOpen {
			    position: absolute;
			    bottom: 68px;
			    left: -100px;
				width: 200px;
			    border-radius: 2px;
			    background-color: #fff;
			    -webkit-filter: drop-shadow(0 3px 2px rgba(0, 0, 0, 0.5));
			    filter: drop-shadow(0 3px 2px rgba(0, 0, 0, 0.5));
			}
			
			.mapOpen:after,
			.mapOpen:before {
			    top: 100%;
			    border: solid transparent;
			    content: " ";
			    height: 0;
			    width: 0;
			    position: absolute;
			    pointer-events: none;
			}
			
			.mapOpen:after {
			    border-top-color: #fff;
			    border-width: 10px;
			    left: 50%;;
			    margin-left: -10px;
			}
			
			.mapOpen:before {
			    border-top-color: #cccccc;
			    border-width: 11px;
			    left: 50%;;
			    margin-left: -11px;
			}
			#mapTitle{
				padding: 6px 10px;
				font-weight: bold;
				font-size: 15px;
				color: #fff;
				background-color: #0068ff;
			}
			#mapCont{
				padding: 10px;
			}
			#mapCont>div{
				display: flex;
				align-items: flex-start;
				color: #474747;
				margin-bottom: 6px;
			}
			#mapCont>div>div:first-child {
			    color: #0068ff;
			    width: 50px;
			}
			.mapClose {
			    text-decoration: none;
			    position: absolute;
				cursor: pointer;
			    top: 2px;
			    right: 8px;
				font-size: 18px;
				font-weight: bold;
				color: #fff;
			}
			
			.mapClose:after {
			    content: "✖";
			}
			.ol-zoom{
				left: auto;
				right: 2%;
				top: 7%;
			}
			.ol-control button{
				font-size: 20px;
				cursor: pointer;
			}
			.qlayer{
				position: absolute;
				right: 2%;
				top: 14%;
				padding: 0;
				cursor: pointer;
				color: #fff;
				font-weight: 700;
				text-decoration: none;
				font-size: 20px;
				text-align: center;
				height: 1.375em;
				width: 1.375em;
				line-height: 1.6em;
				background-color: rgba(0,60,136,.4);
				border: 3px solid rgba(255,255,255,0.7);
				border-radius: 2px;
			}
			.qlayer:hover{
				background-color: rgba(0,60,136,.6);
			}
			.qlayer img{
				width: 20px;
			}
			.layerOpen{
				display: none;
				position: absolute;
				left: 50%;
				top: 50%;
				font-size: 14px;
				transform: translate(-50%, -50%);
				background-color: #fff;
				box-shadow: 0 3px 2px rgba(0, 0, 0, 0.5);
			}
			.layerOpen .openTil{
				padding: 10px;
				text-align: center;
				color: #fff;
				background-color: #0068ff;
			}
			.layerOpen .openCon{
				display: flex;
				justify-content: space-around;
				width: 360px;
				padding: 15px 0;
			}
			.layerOpen .mapClose{
				top: 6px;
				font-weight: normal;
			}
			.mapImg.act{
				position: relative;
				overflow: hidden;
				border: 1px solid #1E9FFF;
			}
			.mapImg.act::before{
				content: "";
				position: absolute;
				bottom: 0;
				right:0;
				border-bottom: 30px solid #1E9FFF;
				border-left: 30px solid transparent; 
			}
			.mapImg.act::after{
				content: "";
				position: absolute;
				bottom: 2px;
				right:1px;
				width: 14px;
				height: 14px;
				z-index: 444;
				background: url(../map/chead.png) no-repeat;
				background-size: 100%;
			}
		</style>
	</head>
	<body>
		<div id="map"></div>
		<!-- 图层切换 -->
		<div class="qlayer" title="图层切换" onclick="$('.layerOpen').css('display','block')"><img src="../map/layer.png" alt=""></div>
		<div class="layerOpen">
			<div class="openTil">
				<span>图层切换</span>
				<span class="mapClose"></span>
			</div>
			<div class="openCon">
				<div class="mapImg" data-type="nora"><img src="../map/mapNora.png" style="width: 140px;" alt=""></div>
				<div class="mapImg act" data-type="moon"><img src="../map/mapMoon.png" style="width: 140px;" alt=""></div>
			</div>
		</div>
		<script type="text/javascript">
				var gutter = 6, fontS = 21, nowTab = {};
				var newArr = [];
				var center = ol.proj.transform([118.26718,22.45402], "EPSG:4326", "EPSG:3857");
				var norMap = new ol.layer.Tile({
								visible: false,
								source: new ol.source.XYZ({
									url: 'http://t0.tianditu.gov.cn/DataServer?T=vec_w&x={x}&y={y}&l={z}&tk=317e52a409b6b382957e09003ee7e235'
								}),
								isGroup: true,
								name: '天地图路网'
							});
				var moonMap = new ol.layer.Tile({
								visible: true,
								source: new ol.source.XYZ({
									url: 'http://t0.tianditu.gov.cn/DataServer?T=img_w&x={x}&y={y}&l={z}&tk=317e52a409b6b382957e09003ee7e235'
								}),
								isGroup: true,
								name: '卫星图路网'
							});
				var callMap = new ol.layer.Tile({
								visible: true,
								source: new ol.source.XYZ({
									url: 'http://t0.tianditu.gov.cn/DataServer?T=cva_w&x={x}&y={y}&l={z}&tk=317e52a409b6b382957e09003ee7e235'
								}),
								isGroup: true,
								name: '天地图文字标注'
							});
				//初始化地图
				var map = new ol.Map({
					target: 'map',
					layers: [norMap,moonMap,callMap],
					view: new ol.View({
						center: center,
						zoom: 12,
						maxZoom: 18,
						minZoom: 2
					})
				});
				var createLabel = function (feature) {
				    return new ol.style.Style({
				        image: new ol.style.Icon({
							anchor: feature["A"] == null?[0,0]: (feature["A"].anchor == undefined?[0.5, 0.95]:feature["A"].anchor),
							anchorOrigin: 'top-right',
							scale: gutter*0.2,
							src: '../map/ship_tblr.png',
							rotation: (feature["A"] == null?0: (feature["A"].cog == undefined?0:feature["A"].cog))* (Math.PI / 180)
						})
				    });
				}
				var checkFeature = new ol.Feature({});
				checkFeature.setStyle(createLabel(checkFeature));
				var vectorSources = new ol.source.Vector({features: [checkFeature]});
				var vectorLayers = new ol.layer.Vector({source: vectorSources});
				map.addLayer(vectorLayers);
				window.addEventListener('message',(res)=>{
					if(res.data.type == "changsn"){
						nowTab = res.data.nowSn;
						setMap();
					}else{
						gutter = res.data.gutter;
						fontS = res.data.fontS;
						nowTab = res.data.nowSn;
						getLi(res.data.shipLi);
					}
				})
				$(document).ready(function(){})
				function getLi(_obj){
					newArr = [];
					for (let i = 0; i < _obj.length; i++) {
						newArr[i] = _obj[i];
						newArr[i].ol = [];
						newArr[i].ol[0] = parseFloat(_obj[i].lon);
						newArr[i].ol[1] = parseFloat(_obj[i].lat);
					}
					setMap();
				}
				
				// 显示点标注
				function setMap(){
					for (let i = 0; i < newArr.length; i++) {
						let info = newArr[i];
						let iconFeature = new ol.Feature({
							geometry: new ol.geom.Point(ol.proj.fromLonLat(info.ol)),
							name: info.prod,
							key: info.mmsi,
							cog: info.cog,
							anchor: info.anchor
						});
						iconFeature.setStyle(createLabelStyle(iconFeature));
						let vectorLayer = new ol.layer.Vector({
							source: new ol.source.Vector({features: [iconFeature]})
						});
						map.addLayer(vectorLayer);
						if(info.mmsi == nowTab.mmsi){
							setOpen(info);
						}
					}
					
				}
				//创建标签的样式
				var createLabelStyle = function(feature) {
					return new ol.style.Style({
						image: new ol.style.Icon({ 
							anchor: feature["A"] == null?[0,0]: (feature["A"].anchor == undefined?[0.5, 1]:feature["A"].anchor),
							anchorOrigin: 'top-right',
							scale: gutter*0.2,
							src: '../map/ship.png',
							rotation: (feature["A"] == null?0: (feature["A"].cog == undefined?0:feature["A"].cog))* (Math.PI / 180)
						}),
						text: new ol.style.Text({
							textAlign: 'center',
							font: (fontS*0.6)+'px 微软雅黑',
							offsetX: 0,
							offsetY: 16,
							text: feature.get('name'),
							fill: new ol.style.Fill({
								color: '#000'
							}),
							backgroundFill: new ol.style.Fill({
							  color: "rgba(255, 255, 255, 0.8)",
							}),
							padding: [2, 4, 2, 4]
						})
					});
				};
				// 点标注点击事件
				map.on('click', function(evt) {
					var feature = map.forEachFeatureAtPixel(evt.pixel, function (feature, layer) { return feature; });
					if(feature != undefined){
						let _sn = feature.A.key;
						let _ind = newArr.findIndex((item,indx) => { return item.mmsi == _sn});
						setOpen(newArr[_ind]);
						window.parent.postMessage({nowSn: newArr[_ind].mmsi}, '*');
					}
				});
				// 显示弹框
				function setOpen(_obj){
					let _pos = ol.proj.transform([_obj.ol[0],_obj.ol[1]], "EPSG:4326", "EPSG:3857")
					vectorSources.clear();
					var newFeature = new ol.Feature({
						geometry: new ol.geom.Point(_pos),
						cog: _obj.cog,
						anchor: _obj.anchor
					});
					newFeature.setStyle(createLabel(newFeature));
					vectorSources.addFeature(newFeature);
					map.getView().animate({
						center: _pos,
						duration: 1000
					})
				}
				// 切换卫星图
				$(document).on("click",".layerOpen .mapImg",function(){
					$(".layerOpen .mapImg").removeClass("act");
					$(this).addClass("act");
					if($(this).data("type") == "nora"){
						norMap.setVisible(true);
						moonMap.setVisible(false);
					}else{
						norMap.setVisible(false);
						moonMap.setVisible(true);
					}
					$('.layerOpen').css('display','none');
				})
				// 切换卫星图关闭
				$(document).on("click",".layerOpen .mapClose",function(){
					$('.layerOpen').css('display','none')
				})
		</script>
	</body>
</html>