// 百度地图API功能
var map = new BMap.Map("allmap",{minZoom:9,maxZoom:11}); // 创建Map实例
// var map = new BMap.Map("allmap"); // 创建Map实例map.centerAndZoom(new BMap.Point(121.402584,38.301808), 10); // 初始化地图,设置中心点坐标和地图级别121.402584,38.301808
map.addControl(new BMap.MapTypeControl({mapTypes: [BMAP_NORMAL_MAP,BMAP_SATELLITE_MAP ]})); //添加地图类型控件
// map.setCurrentCity("大连"); // 设置地图显示的城市 此项是必须设置的
map.enableScrollWheelZoom(false); //开启鼠标滚轮缩放
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.Symbol(BMap_Symbol_SHAPE_BACKWARD_OPEN_ARROW, {
// scale: 0.6,//图标缩放大小
// strokeColor:'#fff',//设置矢量图标的线填充颜色
// strokeWeight: '1',//设置线宽
// });
// var icons = new BMap.IconSequence(sy, '10', '20');//封装ajax的一些常用参数 //data数据可以为空
function ajax_All(sync, 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) {func(data);}});
}// ajax_All("true", "false", "POST", "/ship/getAllShipName", "json", "", getShipList);//
//
// function getShipList(data) { //自己的函数 可以对data 这个数据对象进行操作或遍历数据
// // alert(data);
// console.log(data, "DDDD");
// var opt = "<option value='all' selected = \'selected\'>全部</option>";
// $("select[name=list]").append(opt);
// // 默认选中全部,调取全部船只
// 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('select(boardFilter)', function(data){
// console.log(data.value,"选中");
// var shipName = data.value;
// if (shipName=="all") {
// //调用全部船只
// getValue();
// }else{
// // 调用单船数据
// getSingleValue(shipName);
// }
//
// });
// })
// }
// getShipList()function getShipList() {map.clearOverlays();$(document).ready(function () {// $("select[name=list]").empty();$.ajax({url: "/ship/getAllShipName",type: "POST",async: true,dataType: 'json',traditional: true,success: function (res) {// alert(data);console.log(res, "DDDD");var opt = "<option value='all' selected = \'selected\'>全部</option>";$("select[name=list]").append(opt);// 默认选中全部,调取全部船只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('select(boardFilter)', function(data){console.log(data.value,"选中");var shipName = data.value;if (shipName=="all") {//调用全部船只getValue();}else{// 调用单船数据getSingleValue(shipName);}});})}});});// });
}
getShipList()//获取单船数据
function getSingleValue(shipName){// 地图清除map.clearOverlays();$.ajax({url: "/ship/getShipLocationByShipName",type: "POST",async:true,data:{"ship_name":shipName},dataType: 'json',traditional : true,success: function(data){// alert(data);console.log(data);var msg = eval("(" + data + ")");// alert(msg);console.log(msg,"CCCCCC");console.log(msg.longitude,msg.latitude);// map.panTo(new BMap.Point(113.262232,23.154345));map.panTo(new BMap.Point(msg.longitude,msg.latitude),11);let resultArr = [];// msg.map((item)=>{// resultArr.push([item]);resultArr.push([msg]);// });console.log(resultArr);if (resultArr) {var pointsArr = resultArr;showMarker(pointsArr)}},error:function(errorMsg){}});
}
// getValue();//index默认显示船只末点
function getValue(){//清除覆盖物map.clearOverlays();// 重定位到地图中心map.panTo(new BMap.Point(121.402584,38.301808),10);$.ajax({url: "/ship/index",type: "POST",async:true,data:"",dataType: 'json',traditional : true,success: function(data){// alert(data);console.log(data);var msg = eval("(" + data + ")");// alert(msg);console.log(msg);let resultArr = [];msg.map((item)=>{resultArr.push([item]);});console.log(resultArr);// console.log(resultArr[0][0].longitude);// result = msg;if (resultArr) {var pointsArr = resultArr;// showPolyLine(pointsArr)showMarker(pointsArr)}},error:function(errorMsg){}});
}
// getValue();
//获取单船详情
function getDetail(content){$.ajax({url: "/ship/detail",type: "POST",async:true,data:{"pk":content},dataType: 'json',traditional : true,success: function(data){// alert(data);console.log(data);var msg = eval("(" + data + ")");// alert(msg);console.log(msg,"AAAA");if (msg) {var pointDetail = msg;showDetail(pointDetail);}},error:function(errorMsg){}});
}
// getDetail();
//获取单船轨迹
function getLines(mmsi,starttime,endtime){$.ajax({url: "/ship/histortrack",type: "POST",async:true,data:{"mmsi" : mmsi,"starttime": starttime,"endtime" : endtime},dataType: 'json',traditional : true,success: function(data){// alert(data);console.log(data);var msg = eval("(" + data + ")");// alert(msg);console.log(msg,"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.map((item)=>{resultArr.push([item]);});console.log(resultArr);if (resultArr) {var pointsArr = resultArr;// showMarker(pointsArr);showPolyLine(pointsArr);}}},error:function(errorMsg){}});
}// 地图相应屏幕缩放
var mapContainer = document.getElementById("allmap");
function resizeMapContainer () {console.log(window.innerHeight);mapContainer.style.height = window.innerHeight +'px';console.log(mapContainer.style.height);
}
resizeMapContainer();
window.onresize=resizeMapContainer;//浏览器窗口发生变化时同时变化DIV高度// function showPolyLine(pointsArr, color) {
//划线
function showPolyLine(pointsArr) {var pLine = [];for (var i = 0; i < pointsArr.length; i++) {// pLine.push([]);// console.log(pLine,"ppp");for (var j = 0; j < pointsArr[i].length; j++) {// var marker = new BMap.Marker(new BMap.Point(points[i][j][0], points[i][j][1]));// var point = new BMap.Point(pointsArr[i][j][0], pointsArr[i][j][1]);var point = new BMap.Point(pointsArr[i][j].longitude, pointsArr[i][j].latitude);// alert("AAAA");// pLine[i].push(point);pLine.push(point);}if (j == pointsArr[i].length - 1) {//起点终点图标map.addOverlay(marker);}// var polyline = new BMap.Polyline(pLine[i], {var polyline = new BMap.Polyline(pLine, {strokeColor : "tomato",strokeWeight : 1,// strokeOpacity : 0.5,strokeStyle: "dashed", //折线的样式，solid或dashed// icons:[icons],enableMassClear: true,enableClicking: true //是否响应点击事件，默认为true});// console.log(pLine[i],"which");map.addOverlay(polyline);// console.log(polyline,"which");}
}
//打点
function showMarker(pointsArr) {/* 标注点, 点击弹出信息窗口 */for (var i = 0; i < pointsArr.length; i++) {for (var j = 0; j < pointsArr[i].length; j++) {// var marker = new BMap.Point(points[i][0], points[i][1]);// var marker = new BMap.Marker(new BMap.Point(points[i][0], points[i][1]));// var marker = new BMap.Marker(new BMap.Point(pointsArr[i][j][0], pointsArr[i][j][1]));// var marker = new BMap.Marker(new BMap.Point(pointsArr[i][j].longitude, pointsArr[i][j].latitude));var point = new BMap.Point(pointsArr[i][j].longitude, pointsArr[i][j].latitude); //将标注点转化成地图上的点// zPoints.push(point); // 添加到百度坐标数组 用于自动调整缩放级别var marker = addMarker(point);marker.setRotation(pointsArr[i][j].course); //角度var label = new BMap.Label(pointsArr[i][j].shipname, {offset : new BMap.Size(30, 8)});label.setStyle({background: 'none',color: 'grey',fontSize:'0.6px',fontWeight:'100',border: 'none'//只要对label样式进行设置就可达到在标注图标上显示数字的效果});marker.setLabel(label);//显示地理名称 a// 鼠标经过时// marker.addEventListener("mouseover", function(e) {// var label = this.getLabel();// label.setStyle({// color: "red"// });// });// 点击显示识别marker.addEventListener("click", function(e) {var label = this.getLabel();// alert("MMMM");label.setStyle({color: "red",fontWeight:'500',});});// // 鼠标离开时// marker.addEventListener("mouseout", function(e) {// var label = this.getLabel();// label.setStyle({// color: "grey"// });// });// var content = pointsArr[i][j][2];// marker.setAnimation(BMAP_ANIMATION_BOUNCE);//跳动var content = pointsArr[i][j].pk;// console.log(content,"mmsi");addInfoWindow(marker, pointsArr[i][j], i);// pLine.push(marker);// if (i == 0 || i == points.length - 1) {//起点终点图标if (j == pointsArr[i].length - 1) {//起点终点图标map.addOverlay(marker);}addClickHandler(content, marker);}}
}/**** @param pointDetail*/
console.log(zPoints,"AAAA")
// function setZoom(zPoints) {
// var view = map.getViewport(eval(zPoints));
// var mapZoom = view.zoom;
// var centerPoint = view.center;
// map.centerAndZoom(centerPoint, mapZoom);
// }
// setTimeout(function () {
// setZoom(zPoints);
// }, 1000)// 详情展示
function showDetail(pointDetail) {console.log(pointDetail.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.log(addres)// 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; "> '+ Number(longitude).toFixed(6) +'</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; "> '+ '  ' + Number(latitude).toFixed(6) +'</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: function(index, layero){//do something// devClose();layer.close(index); //如果设定了yes回调，需进行手工关闭},cancel: function(index, layero){// if(confirm('确定要关闭么')){ //只有当点击confirm框的确定时，该层才会关闭//调用关闭devClose();layer.close(index)}});laydate.render({elem: '#dateStart', //指定元素// show: true,// value: new Date(1534766888000),value: new Date( Date.parse(new 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.parse(new Date())),type: 'datetime',min: -7, //7天前max: 0,theme: '#0094fe',calendar: true});}// // 添加图标标注
function addMarker(point) {var myIcon = new BMap.Icon(// "./static/img/ship.png","./static/img/ship1.svg",new BMap.Size(30, 40),{offset: new BMap.Size(0, 0), // 指定定位位置// rotation:});// var myIcon = new BMap.Icon("http://api.map.baidu.com/img/markers.png",// new BMap.Size(2, 2), {// offset: new BMap.Size(1, 2), // 指定定位位置// imageOffset: new BMap.Size(1, 0 - 10 * 25) // 设置图片偏移// });var marker = new BMap.Marker(point, { icon: myIcon });map.addOverlay(marker);return marker;
}function addClickHandler(content,marker){marker.addEventListener("click",function(e){// openInfo(content,e);// alert("dianji")console.log(marker,content,"dian")getDetail(content);});
}
//添加信息窗口
function addInfoWindow(marker, poi) {//pop弹窗标题// console.log(poi,"poi")// var opts = {// width:250,// height:400,// // offset:{width:200,height:0},// title:"信息窗口",// enableMessage:true //设置允许信息发送信息// };// var infoWindow = new BMap.InfoWindow(html.join(""), { title: title, width: 400 });// var infoWindow = new BMap.InfoWindow(html.join(""), opts);var infoWindow = new BMap.InfoWindow();var openInfoWinFun = function () {// marker.openInfoWindow(infoWindow); //打开默认信息框// var point = new BMap.Point(p.getPosition().lng, p.getPosition().lat + 0.005);// var point = new BMap.Point(123.166425,39.066987);// console.log(point)// marker.openInfoWindow(infoWindow,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.log(mmsi,starttime,endtime,"开始");// alert("kaishi")getLines(mmsi,starttime,endtime);
}
function devClose() {// alert("Close guiji");// showPolyLine("", "red");// hidePolyLine(points, "red");// var points = "";// showPolyLine("", "red");// showPolyLine(points, "#b3d6f8");// map.removeOverlay(polyline);//一次移除一个指定覆盖物// map.removeOverlay(showPolyLine);//一次移除一个指定覆盖物// map.addOverlay(showPolyLine);// map.disableMassClear(marker);// map.removeOverlay(line);var val1 = $('#list').val();var val2 = $('#list option:selected').val();console.log(val1,val2)if(val1=="all"){map.clearOverlays();getValue();}// getValue();// map.removeOverlay(Polyline);// map.removeOverlay(points);// map.removeOverlay(ListMarkers[i]);// map.clearOverlays()这个是清除所有// map.removeOverlay();//一次移除一个指定覆盖物
}
支付宝扫一扫
微信扫一扫
.png)
.png)
