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>
|