var map = new BMap.Map("container") var dataArr; var markers = [];//需要聚合的监测点 var monitors = [] //添加地图类型控件 map.addControl(new BMap.MapTypeControl({ mapTypes: [ BMAP_NORMAL_MAP, BMAP_HYBRID_MAP, ] })); var point = new BMap.Point(120.753092, 31.631542); // 创建点坐标 map.centerAndZoom(point, 15); // 初始化地图,设置中心点坐标和地图级别 map.setCurrentCity("常熟"); // 设置地图显示的城市 此项是必须设置的 map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放 //单击获取点击的经纬度 /*map.addEventListener("click", function (e) { alert(e.point.lng + "," + e.point.lat); })*/ function rightBox() { $('#leftT').animate({'left': '-240'}, 2000); $("#rightIcon").hide() $("#leftIcon").show() } function leftBox() { $('#leftT').animate({'left': '0'}, 2000); $("#rightIcon").show() $("#leftIcon").hide() } var color; $(function () { $.ajax({ type: "POST", url: "/pqs9000/theme/getThemeInfo", async: false, dataType: 'json', success: function (data) { color = data.body.value; } }) getMonitorMap() $('#leftT').on('click', '#monitorInfo', function () { layer.open({ id: 'monitorMap', type: 2, title: '监测点详情', maxmin: false, resize: false, shadeClose: true, //点击遮罩关闭层 area: ['100%', '100%'], content: '/pqs9000/business/lineledger', scrollbar: false }); }) $('#leftT').on('click', '#eventInfo', function () { layer.open({ id: 'monitorMap', type: 2, title: '暂态事件详情', maxmin: false, resize: false, shadeClose: true, //点击遮罩关闭层 area: ['100%', '100%'], content: '/pqs9000/area/vdlist', scrollbar: false }); }) }) let loading; function getMonitorMap() { let date = new Date(); // 获取当前日期时间 let myyear = date.getFullYear(); let mymonth = date.getMonth() + 1; let myweekday = date.getDate(); mymonth < 10 ? mymonth = "0" + mymonth : mymonth; myweekday < 10 ? myweekday = "0" + myweekday : myweekday; let startTime = myyear + "-" + mymonth + "-01" let endTime = myyear + "-" + mymonth + "-" + myweekday $.ajax({ type: "get", url: "/pqs9000/monitorScope/getAreaLineMap", data: { startTime: startTime, endTime: endTime }, beforeSend: function () { loading = ityzl_SHOW_LOAD_LAYER(); }, dataType: 'json', success: function (data) { if (data.code == 200) { dataArr = data.body; let key = [] let lngArr = [] let ltgArr = [] for(let i=0;i item.hangLine != null) let max = Math.max(...temArr.map(line => line.eventCount)); console.log("==========") let arr = [] if(max === 0){ //没有最大暂降数,展示最多挂接线路 let group = arrayGroupBy(dataArr,'hangLine') let tem = group.reduce((prev,next)=>{return prev.length > next.length ? prev:next}) tem.forEach(it => { var point1 = new BMap.Point(it.lng, it.lat); arr.push(point1) }) }else { let maxLine = dataArr.find(line => line.eventCount === max); let newTemArr = dataArr.filter(item => item.hangLine === maxLine.hangLine) newTemArr.forEach(it => { var point1 = new BMap.Point(it.lng, it.lat); arr.push(point1) }) } arr.sort((a, b) => a.lng - b.lng) var polyline = new BMap.Polyline(arr, {strokeColor: color, strokeWeight: 3, strokeOpacity: 1}); polyline.setStrokeStyle("dashed"); map.addOverlay(polyline) drawElement(dataArr, map) var view = map.getViewport(eval(monitors)); var mapZoom = view.zoom; var centerPoint = view.center; map.centerAndZoom(centerPoint, mapZoom); initSelect() // var strictBounds=new Bmap.Bounds(new BMap.Point(116.3645,39.9673),new BMap.Point(116.3646,39.9685));//sw西南,ne东北 var strictBounds = map.getBounds(); map.addEventListener("dragend", function () { if (strictBounds.containsPoint(map.getCenter())) return; var view = map.getViewport(eval(monitors)); var mapZoom = view.zoom; let tem = mapZoom; var now = map.getZoom(); if (now >= mapZoom) { tem = now } var centerPoint = view.center; map.centerAndZoom(centerPoint, tem); }) map.addEventListener("zoomstart", function () { if (strictBounds.containsPoint(map.getCenter())) return; var view = map.getViewport(eval(monitors)); var mapZoom = view.zoom; let tem = mapZoom; var now = map.getZoom(); if (now >= mapZoom) { tem = now } var centerPoint = view.center; map.centerAndZoom(centerPoint, tem); }) } else { layer.msg(data.message, {icon: 2, time: 2000}); } //***********关闭loading ityzl_CLOSE_LOAD_LAYER(loading); } }) getAreaLineEventCount(startTime, endTime) } function getAreaLineEventCount(startTime, endTime) { $.ajax({ type: 'get', url: '/pqs9000/monitorScope/getAreaLineEventCount', data: { startTime: startTime, endTime: endTime }, success: function (data) { if (data.code === 200) { $("#leftContent").empty() let da = data.body; let html = '
' + '
' + '
' + '
' + '
' + '
' + '
'+ '
' $("#leftContent").html(html) } else { layer.msg(data.message, {icon: 2, time: 2000}); } } }) } //初始化下拉框数据 function initSelect() { $('.selectpicker').selectpicker('val', ''); $('.selectpicker').selectpicker('refresh'); let html = ""; for (var i = 0; i < dataArr.length; i++) { html += ""; } $("#select_article").html(html); $('.selectpicker').selectpicker('refresh');//加载select框选择器 $("#select_article").change(function () { searchPoint() }) } function getPoint(lineMap, map) { var point = new BMap.Point(lineMap.lng, lineMap.lat); if (lineMap.lng > 0 && lineMap.lat > 0) { monitors.push(point) } //监测点点位信息;终端状态;终端状态颜色 var marker, strState = '停运', fontState = '#808080'; //通讯状态,通讯状态颜色 var strStatus = '中断', fontStatus = '#FF0000'; /******************************** 终端状态: 2停运 灰色 128,128,128 #808080 1热备用 金色 255,215,0 #FFD700 0投运(正常的则判断通讯状态) 通讯状态: 0正常 绿色 0,128,0 #08CF5A 1中断 红色 255,0,0 #FF0000 **********************************/ switch (lineMap.runFlag) { case 0: strState = '投运'; fontState = '#08CF5A'; //终端通讯状态(0:中断;1:正常) switch (lineMap.comFlag) { case 0: strStatus = '中断'; fontStatus = '#FF0000'; if (lineMap.eventCount > 0) marker = new BMap.Marker(point, wingreenMarkerOptions);//假如终端出现了暂降事件 else marker = new BMap.Marker(point, redMarkerOptions); break; case 1: strStatus = '正常'; fontStatus = '#08CF5A'; if (lineMap.eventCount > 0) marker = new BMap.Marker(point, wingreenMarkerOptions);//假如终端出现了暂降事件 else marker = new BMap.Marker(point, greenMarkerOptions); break; } break; case 1: strState = '热备用'; fontState = '#FFD700'; if (lineMap.eventCount > 0) marker = new BMap.Marker(point, yellowMarkerOptions);//假如终端出现了暂降事件 else marker = new BMap.Marker(point, yellowMarkerOptions); break; case 2: strState = '停运'; fontState = '#808080'; if (lineMap.eventCount > 0) marker = new BMap.Marker(point, grayMarkerOptions); else marker = new BMap.Marker(point, grayMarkerOptions); break; } //设置marker其他属性 marker.lineId = lineMap.lineId;//存储监测点的id marker.lineName = lineMap.lineName;//存储监测点的名称 marker.runFlag = lineMap.runFlag;//存储监测点的状态 marker.eventCount = lineMap.eventCount;//存储未处理事件 marker.lineMap = lineMap;//所存储的监测点信息 let hang = lineMap.hangLine == null ? "/" : lineMap.hangLine var strTitle = '监测点名称: ' + lineMap.subName + "_" + lineMap.lineName; strTitle += '\n' + '挂接线路: ' + hang; if (lineMap.eventCount > 0) { strTitle += '\n' + '暂降事件发生次数:' + lineMap.eventCount + '(次)'; } marker.setTitle(strTitle);//设置标注的标题,当鼠标移至标注上时显示此标题 /************************************ 设置弹出框相关内容 ************************************/ //监测点界面 //组装TIP var showInfo = '
' + ' ' + lineMap.subName + '
' + ' ' + lineMap.busBarName + '
' + ' ' + hang + '
' + ' ' + lineMap.ip + '
' + ' ' + lineMap.pt1 / 1000 + '/' + lineMap.pt2 / 1000 + '
' + ' ' + lineMap.ct1 + '/' + lineMap.ct2 + '
' + ' ' + lineMap.manufacturer + '
' + ' ' + strState + '
' + ' ' + strStatus + '
' + ' 
' + '
' + '
'; var searchInfoWindow = new BMapLib.SearchInfoWindow(map, showInfo, { title: '监测点名称:' + lineMap.lineName, //标题 width: 250, //宽度 height: 260, //高度 searchTypes: [], enableSendToPhone: false }); marker.searchInfoWindow = searchInfoWindow; marker.addEventListener("click", function () { searchInfoWindow.open(point); var allOverlay = map.getOverlays(); let index = 0 for (var i = 0; i < allOverlay.length; i++) { if (allOverlay[i].toString().indexOf("Polyline") > 0) {//删除折线 if(index>0){ map.removeOverlay(allOverlay[i]); } index++; } } if (lineMap.hangLine !== null) { let temArr = dataArr.filter(item => item.hangLine === lineMap.hangLine) let arr = [] temArr.forEach(it => { var point1 = new BMap.Point(it.lng, it.lat); arr.push(point1) }) arr.sort((a, b) => a.lng - b.lng) var polyline = new BMap.Polyline(arr, {strokeColor: color, strokeWeight: 3, strokeOpacity: 1}); polyline.setStrokeStyle("dashed"); map.addOverlay(polyline) } }); return marker; } function searchPoint() { var searchPoint = document.getElementById('select_article'); if (searchPoint.value != "") { var marker; for (var i = 0; i < markers.length; i++) { marker = markers[i]; //先匹配是否有全名称的 if (marker.lineId == searchPoint.value) { map.centerAndZoom(marker.getPosition(), 15); marker.searchInfoWindow.open(marker.getPosition()); break; } } } else { parent.layer.msg("请输入监测点名称!", {icon: 5, time: 2000}); } } //跳转到监测点页面 function toMonitorPage(lineId) { parent.addTab('monitor','在线监测点') } //查看监测点一次接线图 function openmonitorImg() { layer.open({ type: 1, title: '一次接线图', maxmin: false, resize: false, shadeClose: true, //点击遮罩关闭层 area: ['90%', '90%'], content: '
', scrollbar: false }); } function drawElement(dataarr, map) { let colors = []; // 存储已生成的颜色 //解析Map for (key in dataarr) { //解析监测点信息 let lineDetail = dataarr[key]; let pointmarker = getPoint(lineDetail, map); map.addOverlay(pointmarker); markers.push(pointmarker);//把监测点信息放到集合中去 } /* pLineArr.forEach(item=>{ let arr= []; item.forEach(it=>{ var point1 = new BMap.Point(it.lng, it.lat); arr.push(point1) }) let color; do { // 生成随机颜色 let r = Math.floor(Math.random() * 256); let g = Math.floor(Math.random() * 256); let b = Math.floor(Math.random() * 256); color = 'rgb(' + r + ',' + g + ',' + b + ')'; } while (colors.includes(color) || isLightColor(color)); // 如果颜色已经存在,就重新生成 colors.push(color); // 将新颜色添加到数组中 var polyline = new BMap.Polyline(arr, {strokeColor: color, strokeWeight: 3, strokeOpacity: 1}); polyline.setStrokeStyle("dashed"); map.addOverlay(polyline) })*/ } const groupBy = (array, f) => { let groups = {}; array.forEach(function (o) { var group = JSON.stringify(f(o)); groups[group] = groups[group] || []; groups[group].push(o); }); return Object.keys(groups).map(function (group) { return groups[group]; }); }; const arrayGroupBy = (list, groupId) => { let sorted = groupBy(list, function (item) { return [item[groupId]]; }); return sorted; }; //创建图标 var redIcon = new BMap.Icon("../images/img/pred.png", new BMap.Size(20, 20)); var greenIcon = new BMap.Icon("../images/img/pgreen.png", new BMap.Size(30, 30)); var yellowIcon = new BMap.Icon("../images/img/pyellow.png", new BMap.Size(20, 20)); var grayIcon = new BMap.Icon("../images/img/pgray.png", new BMap.Size(20, 20)); var stationIcon = new BMap.Icon("../images/img/station.png", new BMap.Size(25, 25)); var wingrayIcon = new BMap.Icon("../images/img/wingray.gif", new BMap.Size(40, 40)); var wingreenIcon = new BMap.Icon("../images/img/wingreen.gif", new BMap.Size(30, 30)); var winredIcon = new BMap.Icon("../images/img/winred.gif", new BMap.Size(30, 30)); var redMarkerOptions = {icon: redIcon, enableDragging: false} var greenMarkerOptions = {icon: greenIcon, enableDragging: false} var yellowMarkerOptions = {icon: yellowIcon, enableDragging: false} var grayMarkerOptions = {icon: grayIcon, enableDragging: false} var wingreenMarkerOptions = {icon: wingreenIcon, enableDragging: false} var winredMarkerOptions = {icon: winredIcon, enableDragging: false}