// 百度地图API功能
var map = new BMap.Map"allmap",{minZoom:9,maxZoom:11}); // 创建Map实例
// var map = new BMap.Map"allmap"); // 创建Map实例map.centerAndZoomnew BMap.Point121.402584,38.301808), 10); // 初始化地图,设置中心点坐标和地图级别121.402584,38.301808
map.addControlnew BMap.MapTypeControl{mapTypes: [BMAP_NORMAL_MAP,BMAP_SATELLITE_MAP ]})); //添加地图类型控件
// map.setCurrentCity"大连"); // 设置地图显示的城市 此项是必须设置的
map.enableScrollWheelZoomfalse); //开启鼠标滚轮缩放
var zPoints = new Array); //缩放icon
//地图样式
var styleJson = [{"featureType": "land","elementType": "geometry","stylers": {"visibility": "on","color": "#f5f5f5ff"}}, {"featureType": "water","elementType": "geometry","stylers": {"visibility": "on","color": "#bedbf9ff"}}, {"featureType": "green","elementType": "geometry","stylers": {"visibility": "on","color": "#d0edccff"}}, {"featureType": "building","elementType": "geometry","stylers": {"visibility": "on"}}, {"featureType": "building","elementType": "geometry.fill","stylers": {"color": "#ffffffb3"}}, {"featureType": "building","elementType": "geometry.stroke","stylers": {"color": "#dadadab3"}}, {"featureType": "subwaystation","elementType": "geometry","stylers": {"visibility": "on","color": "#b15454B2"}}, {"featureType": "education","elementType": "geometry","stylers": {"visibility": "on","color": "#e4f1f1ff"}}, {"featureType": "medical","elementType": "geometry","stylers": {"visibility": "on","color": "#f0dedeff"}}, {"featureType": "scenicspots","elementType": "geometry","stylers": {"visibility": "on","color": "#e2efe5ff"}}, {"featureType": "highway","elementType": "geometry","stylers": {"visibility": "on","weight": 4}}, {"featureType": "highway","elementType": "geometry.fill","stylers": {"color": "#f7c54dff"}}, {"featureType": "highway","elementType": "geometry.stroke","stylers": {"color": "#fed669ff"}}, {"featureType": "highway","elementType": "labels","stylers": {"visibility": "on"}}, {"featureType": "highway","elementType": "labels.text.fill","stylers": {"color": "#8f5a33ff"}}, {"featureType": "highway","elementType": "labels.text.stroke","stylers": {"color": "#ffffffff"}}, {"featureType": "highway","elementType": "labels.icon","stylers": {"visibility": "on"}}, {"featureType": "arterial","elementType": "geometry","stylers": {"visibility": "on","weight": 2}}, {"featureType": "arterial","elementType": "geometry.fill","stylers": {"color": "#d8d8d8ff"}}, {"featureType": "arterial","elementType": "geometry.stroke","stylers": {"color": "#ffeebbff"}}, {"featureType": "arterial","elementType": "labels","stylers": {"visibility": "on"}}, {"featureType": "arterial","elementType": "labels.text.fill","stylers": {"color": "#525355ff"}}, {"featureType": "arterial","elementType": "labels.text.stroke","stylers": {"color": "#ffffffff"}}, {"featureType": "local","elementType": "geometry","stylers": {"visibility": "on","weight": 1}}, {"featureType": "local","elementType": "geometry.fill","stylers": {"color": "#d8d8d8ff"}}, {"featureType": "local","elementType": "geometry.stroke","stylers": {"color": "#ffffffff"}}, {"featureType": "local","elementType": "labels","stylers": {"visibility": "on"}}, {"featureType": "local","elementType": "labels.text.fill","stylers": {"color": "#979c9aff"}}, {"featureType": "local","elementType": "labels.text.stroke","stylers": {"color": "#ffffffff"}}, {"featureType": "railway","elementType": "geometry","stylers": {"visibility": "on","weight": 1}}, {"featureType": "railway","elementType": "geometry.fill","stylers": {"color": "#949494ff"}}, {"featureType": "railway","elementType": "geometry.stroke","stylers": {"color": "#ffffffff"}}, {"featureType": "subway","elementType": "geometry","stylers": {"visibility": "on","weight": 1}}, {"featureType": "subway","elementType": "geometry.fill","stylers": {"color": "#d8d8d8ff"}}, {"featureType": "subway","elementType": "geometry.stroke","stylers": {"color": "#ffffffff"}}, {"featureType": "subway","elementType": "labels","stylers": {"visibility": "on"}}, {"featureType": "subway","elementType": "labels.text.fill","stylers": {"color": "#979c9aff"}}, {"featureType": "subway","elementType": "labels.text.stroke","stylers": {"color": "#ffffffff"}}, {"featureType": "continent","elementType": "labels","stylers": {"visibility": "on"}}, {"featureType": "continent","elementType": "labels.icon","stylers": {"visibility": "on"}}, {"featureType": "continent","elementType": "labels.text.fill","stylers": {"color": "#333333ff"}}, {"featureType": "continent","elementType": "labels.text.stroke","stylers": {"color": "#ffffffff"}}, {"featureType": "city","elementType": "labels.icon","stylers": {"visibility": "on"}}, {"featureType": "city","elementType": "labels","stylers": {"visibility": "on"}}, {"featureType": "city","elementType": "labels.text.fill","stylers": {"color": "#454d50ff"}}, {"featureType": "city","elementType": "labels.text.stroke","stylers": {"color": "#ffffffff"}}, {"featureType": "town","elementType": "labels.icon","stylers": {"visibility": "on"}}, {"featureType": "town","elementType": "labels","stylers": {"visibility": "off"}}, {"featureType": "town","elementType": "labels.text.fill","stylers": {"color": "#454d50ff"}}, {"featureType": "town","elementType": "labels.text.stroke","stylers": {"color": "#ffffffff"}}, {"featureType": "road","elementType": "geometry","stylers": {"visibility": "off"}}, {"featureType": "road","elementType": "labels","stylers": {"visibility": "off"}}, {"featureType": "village","elementType": "labels","stylers": {"visibility": "off"}}, {"featureType": "district","elementType": "labels","stylers": {"visibility": "on"}}];
// map.setMapStyleV2{styleJson:styleJson});
map.setMapStyle{styleJson:styleJson});
// resizeMapContainer);
// var sy = new BMap.SymbolBMap_Symbol_SHAPE_BACKWARD_OPEN_ARROW, {
// scale: 0.6,//图标缩放大小
// strokeColor:'#fff',//设置矢量图标的线填充颜色
// strokeWeight: '1',//设置线宽
// });
// var icons = new BMap.IconSequencesy, '10', '20');//封装ajax的一些常用参数 //data数据可以为空
function ajax_Allsync, cache, type, url, datatype, data, func) {$.ajax{sync: sync,cache: cache,type: type,url: url,dataType: datatype,data: data,error: function data) {//请求失败时被调用的函数alert"传输失败:" + data);},success: function data) {funcdata);}});
}// ajax_All"true", "false", "POST", "/ship/getAllShipName", "json", "", getShipList);//
//
// function getShipListdata) { //自己的函数 可以对data 这个数据对象进行操作或遍历数据
// // alertdata);
// console.logdata, "DDDD");
// var opt = "<option value='all' selected = \'selected\'>全部</option>";
// $"select[name=list]").appendopt);
// // 默认选中全部,调取全部船只
// getValue);
// var beanList = data;
// var selectNext = $"#list");
// for var i = 0; i < beanList.length; i++) {
// selectNext.append"<option value=" + beanList[i] + ">" + beanList[i] + "</option>");
// }
// //渲染option List, 选择船只触发ajax
// layui.use['form'], function){
// var form1 = layui.form;
// form1.render);
// form1.on'selectboardFilter)', functiondata){
// console.logdata.value,"选中");
// var shipName = data.value;
// if shipName=="all") {
// //调用全部船只
// getValue);
// }else{
// // 调用单船数据
// getSingleValueshipName);
// }
//
// });
// })
// }
// getShipList)function getShipList) {map.clearOverlays);$document).readyfunction ) {// $"select[name=list]").empty);$.ajax{url: "/ship/getAllShipName",type: "POST",async: true,dataType: 'json',traditional: true,success: function res) {// alertdata);console.logres, "DDDD");var opt = "<option value='all' selected = \'selected\'>全部</option>";$"select[name=list]").appendopt);// 默认选中全部,调取全部船只getValue);var beanList = res;var selectNext = $"#list");for var i = 0; i < beanList.length; i++) {selectNext.append"<option value=" + beanList[i] + ">" + beanList[i] + "</option>");}//渲染option List, 选择船只触发ajaxlayui.use['form'], function){var form1 = layui.form;form1.render);form1.on'selectboardFilter)', functiondata){console.logdata.value,"选中");var shipName = data.value;if shipName=="all") {//调用全部船只getValue);}else{// 调用单船数据getSingleValueshipName);}});})}});});// });
}
getShipList)//获取单船数据
function getSingleValueshipName){// 地图清除map.clearOverlays);$.ajax{url: "/ship/getShipLocationByShipName",type: "POST",async:true,data:{"ship_name":shipName},dataType: 'json',traditional : true,success: functiondata){// alertdata);console.logdata);var msg = eval"" + data + ")");// alertmsg);console.logmsg,"CCCCCC");console.logmsg.longitude,msg.latitude);// map.panTonew BMap.Point113.262232,23.154345));map.panTonew BMap.Pointmsg.longitude,msg.latitude),11);let resultArr = [];// msg.mapitem)=>{// resultArr.push[item]);resultArr.push[msg]);// });console.logresultArr);if resultArr) {var pointsArr = resultArr;showMarkerpointsArr)}},error:functionerrorMsg){}});
}
// getValue);//index默认显示船只末点
function getValue){//清除覆盖物map.clearOverlays);// 重定位到地图中心map.panTonew BMap.Point121.402584,38.301808),10);$.ajax{url: "/ship/index",type: "POST",async:true,data:"",dataType: 'json',traditional : true,success: functiondata){// alertdata);console.logdata);var msg = eval"" + data + ")");// alertmsg);console.logmsg);let resultArr = [];msg.mapitem)=>{resultArr.push[item]);});console.logresultArr);// console.logresultArr[0][0].longitude);// result = msg;if resultArr) {var pointsArr = resultArr;// showPolyLinepointsArr)showMarkerpointsArr)}},error:functionerrorMsg){}});
}
// getValue);
//获取单船详情
function getDetailcontent){$.ajax{url: "/ship/detail",type: "POST",async:true,data:{"pk":content},dataType: 'json',traditional : true,success: functiondata){// alertdata);console.logdata);var msg = eval"" + data + ")");// alertmsg);console.logmsg,"AAAA");if msg) {var pointDetail = msg;showDetailpointDetail);}},error:functionerrorMsg){}});
}
// getDetail);
//获取单船轨迹
function getLinesmmsi,starttime,endtime){$.ajax{url: "/ship/histortrack",type: "POST",async:true,data:{"mmsi" : mmsi,"starttime": starttime,"endtime" : endtime},dataType: 'json',traditional : true,success: functiondata){// alertdata);console.logdata);var msg = eval"" + data + ")");// alertmsg);console.logmsg,"lines");if msg.length == 0){// alert"暂未查询到轨迹")layer.open{title:false,closeBtn: 0,time: 2000,content: '<div style="padding: 20px 30px;font-size:20px">暂未查询到轨迹</div>',btn: '关闭',btnAlign: 'c' //按钮居中});}else{let resultArr = [];msg.mapitem)=>{resultArr.push[item]);});console.logresultArr);if resultArr) {var pointsArr = resultArr;// showMarkerpointsArr);showPolyLinepointsArr);}}},error:functionerrorMsg){}});
}// 地图相应屏幕缩放
var mapContainer = document.getElementById"allmap");
function resizeMapContainer ) {console.logwindow.innerHeight);mapContainer.style.height = window.innerHeight +'px';console.logmapContainer.style.height);
}
resizeMapContainer);
window.onresize=resizeMapContainer;//浏览器窗口发生变化时同时变化DIV高度// function showPolyLinepointsArr, color) {
//划线
function showPolyLinepointsArr) {var pLine = [];for var i = 0; i < pointsArr.length; i++) {// pLine.push[]);// console.logpLine,"ppp");for var j = 0; j < pointsArr[i].length; j++) {// var marker = new BMap.Markernew BMap.Pointpoints[i][j][0], points[i][j][1]));// var point = new BMap.PointpointsArr[i][j][0], pointsArr[i][j][1]);var point = new BMap.PointpointsArr[i][j].longitude, pointsArr[i][j].latitude);// alert"AAAA");// pLine[i].pushpoint);pLine.pushpoint);}if j == pointsArr[i].length - 1) {//起点终点图标map.addOverlaymarker);}// var polyline = new BMap.PolylinepLine[i], {var polyline = new BMap.PolylinepLine, {strokeColor : "tomato",strokeWeight : 1,// strokeOpacity : 0.5,strokeStyle: "dashed", //折线的样式，solid或dashed// icons:[icons],enableMassClear: true,enableClicking: true //是否响应点击事件，默认为true});// console.logpLine[i],"which");map.addOverlaypolyline);// console.logpolyline,"which");}
}
//打点
function showMarkerpointsArr) {/* 标注点, 点击弹出信息窗口 */for var i = 0; i < pointsArr.length; i++) {for var j = 0; j < pointsArr[i].length; j++) {// var marker = new BMap.Pointpoints[i][0], points[i][1]);// var marker = new BMap.Markernew BMap.Pointpoints[i][0], points[i][1]));// var marker = new BMap.Markernew BMap.PointpointsArr[i][j][0], pointsArr[i][j][1]));// var marker = new BMap.Markernew BMap.PointpointsArr[i][j].longitude, pointsArr[i][j].latitude));var point = new BMap.PointpointsArr[i][j].longitude, pointsArr[i][j].latitude); //将标注点转化成地图上的点// zPoints.pushpoint); // 添加到百度坐标数组 用于自动调整缩放级别var marker = addMarkerpoint);marker.setRotationpointsArr[i][j].course); //角度var label = new BMap.LabelpointsArr[i][j].shipname, {offset : new BMap.Size30, 8)});label.setStyle{background: 'none',color: 'grey',fontSize:'0.6px',fontWeight:'100',border: 'none'//只要对label样式进行设置就可达到在标注图标上显示数字的效果});marker.setLabellabel);//显示地理名称 a// 鼠标经过时// marker.addEventListener"mouseover", functione) {// var label = this.getLabel);// label.setStyle{// color: "red"// });// });// 点击显示识别marker.addEventListener"click", functione) {var label = this.getLabel);// alert"MMMM");label.setStyle{color: "red",fontWeight:'500',});});// // 鼠标离开时// marker.addEventListener"mouseout", functione) {// var label = this.getLabel);// label.setStyle{// color: "grey"// });// });// var content = pointsArr[i][j][2];// marker.setAnimationBMAP_ANIMATION_BOUNCE);//跳动var content = pointsArr[i][j].pk;// console.logcontent,"mmsi");addInfoWindowmarker, pointsArr[i][j], i);// pLine.pushmarker);// if i == 0 || i == points.length - 1) {//起点终点图标if j == pointsArr[i].length - 1) {//起点终点图标map.addOverlaymarker);}addClickHandlercontent, marker);}}
}/**** @param pointDetail*/
console.logzPoints,"AAAA")
// function setZoomzPoints) {
// var view = map.getViewportevalzPoints));
// var mapZoom = view.zoom;
// var centerPoint = view.center;
// map.centerAndZoomcenterPoint, mapZoom);
// }
// setTimeoutfunction ) {
// setZoomzPoints);
// }, 1000)// 详情展示
function showDetailpointDetail) {console.logpointDetail.latitude)var poi = pointDetail;var mmsi = poi.mmsi;//MMSivar ship_name = poi.ship_name;//船名var breadth = poi.breadth;//船宽var heading = poi.heading;//船艄向var mixcars = poi.mixcars;//最大载车数var latitude = poi.latitude;//纬度var longitude = poi.longitude;//经度var mixpeople = poi.mixpeople;//最大载客人数var length = poi.length;//船长var shiptype = poi.shiptype;//轮船类型var unit_name = poi.unit_name;//所属航运企业var draught = poi.draught;//吃水var course = poi.course;//航向var line_name = poi.line_name;//常运航线var updatetime = poi.updatetime;//最新更新时间// var updateTime = updatetime.split":");// console.logaddres)// var newtime = updateTime[1]// var title = '<div style="font-weight:bold;color:#CE5521;font-size:14px">AAAAAA</div>';//pop弹窗信息var html = [];html.push'<table class="layui-table" cellspacing="0" ' +'style="table-layout:fixed;margin:0 !important;color:#5c5f61;' +'width:100%;font:10px arial,simsun,sans-serif"><tbody>');html.push'<tr>');html.push'<td style="vertical-align:top;background-color: #f0f0f0; ;width:20%;">编号</td>');html.push'<td id="mmsi" style="vertical-align:top;width:30%; "> '+ mmsi +'</td>');html.push'<td style="vertical-align:top;background-color: #f0f0f0; ;width:20%;">船名</td>');html.push'<td id="mmsi" style="vertical-align:top;width:30%; "> '+ ship_name +'</td>');html.push'</tr>');html.push'<tr>');html.push'<td style="vertical-align:top; ;width:138px;background-color: #f0f0f0;">船宽</td>');html.push'<td style="vertical-align:top;width:100px; "> '+ breadth +' m</td>');html.push'<td style="vertical-align:top; ;width:138px;background-color: #f0f0f0;">船艄向</td>');html.push'<td style="vertical-align:top;width:100px; "> '+ heading +'°</td>');html.push'</tr>');html.push'<tr>');html.push'<td style="vertical-align:top; background-color: #f0f0f0;">最大载车量</td>');html.push'<td style="vertical-align:top; "> '+ mixcars +'</td>');html.push'<td style="vertical-align:top; background-color: #f0f0f0;">经度</td>');html.push'<td style="vertical-align:top; "> '+ Numberlongitude).toFixed6) +'</td>');html.push'</tr>');html.push'<tr>');html.push'<td style="vertical-align:top; background-color: #f0f0f0;">最大载客量</td>');html.push'<td style="vertical-align:top; "> '+ mixpeople +'</td>');html.push'<td style="vertical-align:top; background-color: #f0f0f0;">纬度</td>');html.push'<td style="vertical-align:top; "> '+ '  ' + Numberlatitude).toFixed6) +'</td>');html.push'</tr>');html.push'<tr>');html.push'<td style="vertical-align:top; background-color: #f0f0f0;">船长编号</td>');html.push'<td style="vertical-align:top; "> '+ length +'</td>');html.push'<td style="vertical-align:top; background-color: #f0f0f0;">吃水</td>');html.push'<td style="vertical-align:top; "> '+ draught +' m</td>');html.push'</tr>');html.push'<tr>');html.push'<td style="vertical-align:top; background-color: #f0f0f0;">轮船类型</td>');html.push'<td style="vertical-align:top; "> '+ shiptype +'</td>');html.push'<td style="vertical-align:top; background-color: #f0f0f0;">航向</td>');html.push'<td style="vertical-align:top; "> '+ course +'°</td>');html.push'</tr>');html.push'<tr>');html.push'<td style="vertical-align:top; background-color: #f0f0f0;">航运企业</td>');html.push'<td style="vertical-align:top; "> '+ unit_name +'</td>');html.push'<td style="vertical-align:top; background-color: #f0f0f0;">常运航线</td>');html.push'<td style="vertical-align:top; "> '+ line_name +'</td>');html.push'</tr>');html.push'</tbody></table>');html.push'<table class="layui-table" cellspacing="0" style="table-layout:fixed;margin:0 !important;' +'color:#5c5f61;width:100%;font:10px arial,simsun,sans-serif"><tbody>');html.push'<tr>');html.push'<td style="vertical-align:top; width:20%;background-color: #f0f0f0;">更新时间</td>');html.push'<td style="vertical-align:top;width:80%;color:red "> '+ updatetime +'</td>');html.push'</tr>');html.push'</tbody></table>');// html.push'<input id="Button1" type="button" value="Open" style="vertical-align:top; ;width:50%;white-space:nowrap;word-break:keep-all" onclick="return devOpen)"/>' +// '<input id="Button1" type="button" value="Close" style="vertical-align:top;color:red; ;width:50%;white-space:nowrap;word-break:keep-all" onclick="return devClose)"/>');html.push'<div style="margin:10px 0">');html.push'<input id="dateStart" class="layui-input" type="text" style="width:32%;display:inline-block;"/>' +'--'+'' +'<input id="dateEnd" class="layui-input" type="text" style="width:32%;display:inline-block;"/>');html.push'<input id="submit" type="button" class="layui-btn" style="position:absolute;width:30%;background-color: #03A9F4;" value="轨迹查询" onclick="linesOpen)">');html.push'</div>');// class="layui-input"layer.open{title:false,title:'详情',// closeBtn: 0,// offset: 'rt',area: ['503px', '462px'],// area: 'auto',content: html.join""),btn: '隐藏窗口',yes: functionindex, layero){//do something// devClose);layer.closeindex); //如果设定了yes回调，需进行手工关闭},cancel: functionindex, layero){// ifconfirm'确定要关闭么')){ //只有当点击confirm框的确定时，该层才会关闭//调用关闭devClose);layer.closeindex)}});laydate.render{elem: '#dateStart', //指定元素// show: true,// value: new Date1534766888000),value: new Date Date.parsenew Date))-86400000),//24小时时段trigger:'click',//默认为click，即点击后出现日历框type: 'datetime',min: -7, //7天前max: 0,theme: '#0094fe',calendar: true});laydate.render{elem: '#dateEnd', //指定元素value: new Date Date.parsenew Date))),type: 'datetime',min: -7, //7天前max: 0,theme: '#0094fe',calendar: true});}// // 添加图标标注
function addMarkerpoint) {var myIcon = new BMap.Icon// "./static/img/ship.png","./static/img/ship1.svg",new BMap.Size30, 40),{offset: new BMap.Size0, 0), // 指定定位位置// rotation:});// var myIcon = new BMap.Icon"http://api.map.baidu.com/img/markers.png",// new BMap.Size2, 2), {// offset: new BMap.Size1, 2), // 指定定位位置// imageOffset: new BMap.Size1, 0 - 10 * 25) // 设置图片偏移// });var marker = new BMap.Markerpoint, { icon: myIcon });map.addOverlaymarker);return marker;
}function addClickHandlercontent,marker){marker.addEventListener"click",functione){// openInfocontent,e);// alert"dianji")console.logmarker,content,"dian")getDetailcontent);});
}
//添加信息窗口
function addInfoWindowmarker, poi) {//pop弹窗标题// console.logpoi,"poi")// var opts = {// width:250,// height:400,// // offset:{width:200,height:0},// title:"信息窗口",// enableMessage:true //设置允许信息发送信息// };// var infoWindow = new BMap.InfoWindowhtml.join""), { title: title, width: 400 });// var infoWindow = new BMap.InfoWindowhtml.join""), opts);var infoWindow = new BMap.InfoWindow);var openInfoWinFun = function ) {// marker.openInfoWindowinfoWindow); //打开默认信息框// var point = new BMap.Pointp.getPosition).lng, p.getPosition).lat + 0.005);// var point = new BMap.Point123.166425,39.066987);// console.logpoint)// marker.openInfoWindowinfoWindow,point);};marker.addEventListener"click", openInfoWinFun);return openInfoWinFun;
}function linesOpen) {// alert"open guiji");// showPolyLine);// showBox);var mmsi = $"#mmsi").text);var starttime = $"#dateStart").val);var endtime = $"#dateEnd").val);console.logmmsi,starttime,endtime,"开始");// alert"kaishi")getLinesmmsi,starttime,endtime);
}
function devClose) {// alert"Close guiji");// showPolyLine"", "red");// hidePolyLinepoints, "red");// var points = "";// showPolyLine"", "red");// showPolyLinepoints, "#b3d6f8");// map.removeOverlaypolyline);//一次移除一个指定覆盖物// map.removeOverlayshowPolyLine);//一次移除一个指定覆盖物// map.addOverlayshowPolyLine);// map.disableMassClearmarker);// map.removeOverlayline);var val1 = $'#list').val);var val2 = $'#list option:selected').val);console.logval1,val2)ifval1=="all"){map.clearOverlays);getValue);}// getValue);// map.removeOverlayPolyline);// map.removeOverlaypoints);// map.removeOverlayListMarkers[i]);// map.clearOverlays)这个是清除所有// map.removeOverlay);//一次移除一个指定覆盖物
}
