<%@ page contentType="text/html;charset=UTF-8" language="java" %>
|
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
|
<%@page isELIgnored="false" %>
|
|
<!DOCTYPE html>
|
<html>
|
<head>
|
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
|
<meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>
|
<style type="text/css">
|
body, html, #allmap {
|
width: 100%;
|
height: 100%;
|
overflow: hidden;
|
margin: 0;
|
font-family: "微软雅黑";
|
}
|
|
#box {
|
width: 300px;
|
height: 400px;
|
top: 30px;
|
right: 30px;
|
position: absolute;
|
z-index: 1;
|
border: 2px solid red;
|
background-color: gainsboro;
|
opacity: 0.8;
|
}
|
|
#cpm, #cpm1 {
|
width: 300px;
|
height: 100px;
|
position: absolute;
|
background-color: #ffffff;
|
display: none;
|
left: 50%;
|
top: 50%;
|
margin-left: -150px;
|
margin-top: -50px;
|
z-index: 11;
|
color: #000000;
|
border: 2px solid #FF7F50;
|
font-size: 14px;
|
line-height: 100px;
|
text-align: center;
|
}
|
</style>
|
<script type="text/javascript"
|
src="http://api.map.baidu.com/api?v=2.0&ak=rER1sgBIcQxkfNSlm2wmBGZGgEERrooM"></script>
|
<script type="text/javascript" src="/js/jquery.min.js"></script>
|
<script type="text/javascript" src="/js/utils.js"></script>
|
<script type="text/javascript">
|
if (typeof (JSON) == 'undefined') {
|
$.getScript("js/json2.js");
|
}
|
</script>
|
<script type="text/javascript" src="/js/paging.js"></script>
|
<title>地图展示</title>
|
</head>
|
<body>
|
<div id="cpm">该时间存在设备无风向数据，数据不能作为参考</div>
|
<div id="cpm1">该时间在线设备小于两台，数据不能作为参考</div>
|
<div id="allmap" style="z-index: 0">
|
</div>
|
<div id="box">
|
<p>
|
<img src="/img/wind_dir02.png" style="width: 30px;height: 45px;margin-left: 20px;"/> <span
|
style="position: relative;top: -9px;"> ：风向(尖头向上代表正北方向)</span>
|
</p>
|
<p>
|
<img src="/img/arrows01.png" style="margin-left: 20px;transform:rotate(90deg);width: 30px;height: 60px;"/> <span
|
style="position: relative;top: -25px;"> ：浓度由高到低</span>
|
</p>
|
<p>
|
<img src="/img/arrows02.png" style="width: 30px;height: 60px;margin-left: 20px;transform:rotate(90deg);"/> <span
|
style="position: relative;top: -25px;"> ：浓度由低到高</span>
|
</p>
|
|
<p style="text-indent: 1em;line-height: 25px;color: red" id="alarm">浓度变化：<span id="diff"></span></br></br>
|
注：浓度变化为下风向因子浓度减去上风向因子浓度</p>
|
</div>
|
<div id="mapParams" style="display: none;">
|
${requestScope.params}
|
</div>
|
</body>
|
|
</html>
|
<script type="text/javascript">
|
var hostAndPort = document.location.host;
|
// 百度地图API功能
|
var map = new BMap.Map("allmap", {minZoom: 14, maxZoom: 19}); // 创建Map实例
|
map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放
|
var params = $.parseJSON($("#mapParams").html());
|
var longitude = params["longitudeCompany"];
|
var latitude = params["latitudeCompany"];
|
var point = new BMap.Point(longitude, latitude);
|
map.centerAndZoom(point, 18.5); // 初始化地图,设置中心点坐标和地图级别
|
var devices = [];
|
var deviceList = params["deviceList"];
|
var sensor = params["sensor"];
|
var accountId = params["accountId"];
|
var orgId = params["orgId"];
|
var monitPointId = params["monitPointId"];
|
var arrows=[];
|
//添加地图类型控件
|
map.addControl(new BMap.MapTypeControl({
|
mapTypes: [
|
BMAP_HYBRID_MAP,
|
BMAP_NORMAL_MAP
|
]
|
}));
|
map.setMapType(BMAP_HYBRID_MAP);
|
if (deviceList != null) {
|
if (deviceList.length > 1) {
|
for (var i = 0; i < deviceList.length; i++) {
|
var icon = new BMap.Icon("/img/ico00.png", new BMap.Size(48, 48));
|
var mark = new BMap.Marker(new BMap.Point(deviceList[i].longitude, deviceList[i].latitude), {icon: icon});
|
devices.push(new BMap.Point(deviceList[i].longitude, deviceList[i].latitude));
|
map.addOverlay(mark);
|
}
|
} else {
|
var icon1 = new BMap.Icon("/img/ico00.png", new BMap.Size(48, 48));
|
var mark1 = new BMap.Marker(new BMap.Point(deviceList.longitude, deviceList.latitude), {icon: icon1});
|
devices.push(new BMap.Point(deviceList.longitude, deviceList.latitude));
|
map.addOverlay(mark1);
|
$("#alarm").css("visibility", "hidden");
|
}
|
}
|
var ws;
|
if (typeof (WebSocket) === "undefined") {
|
alert("您的浏览器不支持WebSocket");
|
} else {
|
var p=0;
|
ws = new WebSocket('ws://' + hostAndPort + '/screen/webSocketNew/' + orgId + '&' + accountId + '&' + monitPointId+ '&' +p);
|
ws.onopen = function () {
|
};
|
|
//获得消息事件
|
ws.onmessage = function (msg) {
|
// $("#searchParam").val(JSON.parse(msg.data));
|
if(deviceList.length>=2){
|
realTimeData(JSON.parse(JSON.parse(msg.data)), deviceList,monitPointId);
|
}else{
|
if(deviceList.length==0){
|
$("#box").css("visibility","hidden");
|
document.getElementById("cpm").style.display = 'block';
|
}
|
if(deviceList.length==1){
|
$("#box").css("visibility","hidden");
|
document.getElementById("cpm1").style.display = 'block';
|
}
|
|
}
|
|
/* if (moralMap.showSensors && typeof (moralMap.showSensors) == "function") {
|
moralMap.showSensors(JSON.parse(JSON.parse(msg.data)));
|
}*/
|
};
|
window.onbeforeunload=function(e){
|
e = window.event||e;
|
|
e.returnValue=("确定离开当前页面吗？");
|
ws.onclose = function () {
|
};
|
alert(1)
|
}
|
//关闭事件
|
/*ws.onclose = function () {
|
};*/
|
//发生了错误事件
|
ws.onerror = function () {
|
};
|
}
|
|
var marks = [];
|
function realTimeData(data, deviceList,monitPointId) {
|
for (var j = 0; j < marks.length; j++) {
|
map.removeOverlay(marks[j]);
|
}
|
var diffArr=[];
|
for (var i = 0; i < deviceList.length; i++) {
|
var deviceInfo = data;
|
var mac = deviceInfo["mac"];
|
if (mac == deviceList[i].mac) {
|
deviceList[i]["deviceInfo"] = deviceInfo;
|
}
|
}
|
|
for (var i = 0; i < deviceList.length; i++) {
|
for (var j = 0; j <deviceList.length ; j++) {
|
if (j != i) {
|
var maps={};
|
var windNumj=deviceList[j]["deviceInfo"]["e23"];
|
var windNumi=deviceList[i]["deviceInfo"]["e23"];
|
var diff=windNumj-windNumi;
|
if (diff > 180) {
|
diff = 360 - diff;
|
}
|
maps["j"]=j;
|
maps["i"]=i;
|
maps["diff"]=Math.abs(diff);
|
diffArr.push(maps);
|
}
|
}
|
var icon = new BMap.Icon("/img/wind_dir02.png", new BMap.Size(25, 25), {anchor: new BMap.Size(11, 21.5)});
|
var mark = new BMap.Marker(new BMap.Point(deviceList[i].longitude, deviceList[i].latitude), {icon: icon});
|
devices.push(new BMap.Point(deviceList[i].longitude, deviceList[i].latitude));
|
var dirWind=0;
|
if (deviceList[i]["deviceInfo"]["e23"]<=180){
|
dirWind=180+parseInt(deviceList[i]["deviceInfo"]["e23"]);
|
}else {
|
dirWind=deviceList[i]["deviceInfo"]["e23"].valueOf()-180
|
}
|
mark.setRotation(dirWind);
|
marks.push(mark);
|
map.addOverlay(mark);
|
|
}
|
var minIndex=0;
|
var minWindDir=0.0;
|
minWindDir=diffArr[0]["diff"];
|
for (var i = 1; i <diffArr.length ; i++) {
|
if (minWindDir>diffArr[i]["diff"]){
|
minWindDir=diffArr[i]["diff"];
|
minIndex=i;
|
}else {
|
minIndex=minIndex;
|
}
|
}
|
var firstDevice=deviceList[diffArr[minIndex]["j"]];
|
var secondDevice=deviceList[diffArr[minIndex]["i"]];
|
var fNum=Number(firstDevice["deviceInfo"]["e23"]);
|
var sNum=Number(secondDevice["deviceInfo"]["e23"]);
|
var wind=0;
|
if(Math.abs(fNum-secondDevice)>180){
|
wind=(fNum+sNum)/2+180;
|
if (wind>360){
|
wind=wind-360;
|
}
|
}else {
|
wind=(fNum+sNum)/2
|
}
|
$.ajax({
|
url: "/screen/chooseDevice",
|
type: "get",
|
dataType: "json",
|
data:{"wind":wind,"monitPointId":monitPointId},
|
success: function (info) {
|
var locationList=info["locationList"];
|
var preAngleDeviceString = info["preAngleDeviceString"];
|
|
var preAngleDeviceList="";
|
if (preAngleDeviceString!=0 &&preAngleDeviceString!=1){
|
var arrow="";
|
preAngleDeviceList=JSON.parse(preAngleDeviceString);
|
|
var mac0=preAngleDeviceList[0]["mac"];
|
var mac1=preAngleDeviceList[1]["mac"];
|
for (var i = 0; i <deviceList.length ; i++) {
|
if (mac0==deviceList[i]["mac"]){
|
preAngleDeviceList[0]["sensors"]=deviceList[i]["deviceInfo"];
|
}else if (mac1==deviceList[i]["mac"]){
|
preAngleDeviceList[1]["sensors"]=deviceList[i]["deviceInfo"];
|
}else {
|
continue;
|
}
|
}
|
var diff=preAngleDeviceList[0]["sensors"][sensor]-preAngleDeviceList[1]["sensors"][sensor];
|
var diffSensor=preAngleDeviceList[1]["sensors"][sensor]-preAngleDeviceList[0]["sensors"][sensor];
|
diffSensor=String(diffSensor).replace(/^(.*\..{4}).*$/,"$1");
|
connectionDoublePoint(diff,preAngleDeviceList,locationList,diffSensor);
|
}}}
|
);
|
|
}
|
function connectionDoublePoint(diff,preAngleDeviceList,locationList,diffSensor) {
|
for (var i = 0; i <arrows.length ; i++) {
|
map.removeOverlay(arrows[i]);
|
}
|
var info="";
|
if (diff>0){
|
info="厂区内无排放";
|
var polyline = new BMap.Polyline([
|
new BMap.Point(preAngleDeviceList[0].longitude, preAngleDeviceList[0].latitude),
|
new BMap.Point(locationList[0][0],locationList[0][1])
|
], {strokeColor:"red", strokeWeight:8, strokeOpacity:0.5}); //创建折线
|
map.addOverlay(polyline); //增加折线
|
var polyline1 = new BMap.Polyline([
|
new BMap.Point(locationList[0][0],locationList[0][1]),
|
new BMap.Point(locationList[1][0],locationList[1][1])
|
], {strokeColor:"Tomato", strokeWeight:8, strokeOpacity:0.5}); //创建折线
|
map.addOverlay(polyline1); //增加折线
|
var polyline2 = new BMap.Polyline([
|
new BMap.Point(locationList[1][0],locationList[1][1]),
|
new BMap.Point(locationList[2][0],locationList[2 ][1])
|
], {strokeColor:"Coral", strokeWeight:8, strokeOpacity:0.5}); //创建折线
|
map.addOverlay(polyline2); //增加折线
|
var polyline3 = new BMap.Polyline([
|
new BMap.Point(locationList[2][0],locationList[2][1]),
|
new BMap.Point(locationList[3][0],locationList[3][1])
|
], {strokeColor:"Orange", strokeWeight:8, strokeOpacity:0.5}); //创建折线
|
map.addOverlay(polyline3); //增加折线
|
var polyline4 = new BMap.Polyline([
|
new BMap.Point(locationList[3][0],locationList[3][1]),
|
new BMap.Point(locationList[4][0],locationList[4][1])
|
], {strokeColor:"Gold", strokeWeight:8, strokeOpacity:0.5}); //创建折线
|
map.addOverlay(polyline4); //增加折线
|
var arrowLineList = new Array();//记录绘制的箭头线
|
arrows.push(polyline);
|
arrows.push(polyline1);
|
arrows.push(polyline2);
|
arrows.push(polyline3);
|
arrows.push(polyline4);
|
color="Gold";
|
arrowLineList[arrowLineList.length] = addArrow(polyline4,30,Math.PI/7,color);//记录绘制的箭头线
|
} else {
|
info="厂区内有排放";
|
var polyline = new BMap.Polyline([
|
new BMap.Point(preAngleDeviceList[0].longitude, preAngleDeviceList[0].latitude),
|
new BMap.Point(locationList[0][0],locationList[0][1])
|
], {strokeColor:"Gold", strokeWeight:8, strokeOpacity:0.5}); //创建折线
|
map.addOverlay(polyline); //增加折线
|
var polyline1 = new BMap.Polyline([
|
new BMap.Point(locationList[0][0],locationList[0][1]),
|
new BMap.Point(locationList[1][0],locationList[1][1])
|
], {strokeColor:"Orange", strokeWeight:8, strokeOpacity:0.5}); //创建折线
|
map.addOverlay(polyline1); //增加折线
|
var polyline2 = new BMap.Polyline([
|
new BMap.Point(locationList[1][0],locationList[1][1]),
|
new BMap.Point(locationList[2][0],locationList[2 ][1])
|
], {strokeColor:"Coral", strokeWeight:8, strokeOpacity:0.5}); //创建折线
|
map.addOverlay(polyline2); //增加折线
|
var polyline3 = new BMap.Polyline([
|
new BMap.Point(locationList[2][0],locationList[2][1]),
|
new BMap.Point(locationList[3][0],locationList[3][1])
|
], {strokeColor:"Tomato", strokeWeight:8, strokeOpacity:0.5}); //创建折线
|
map.addOverlay(polyline3); //增加折线
|
var polyline4 = new BMap.Polyline([
|
new BMap.Point(locationList[3][0],locationList[3][1]),
|
new BMap.Point(locationList[4][0],locationList[4][1])
|
], {strokeColor:"red", strokeWeight:8, strokeOpacity:0.5}); //创建折线
|
map.addOverlay(polyline4); //增加折线
|
arrows.push(polyline);
|
arrows.push(polyline1);
|
arrows.push(polyline2);
|
arrows.push(polyline3);
|
arrows.push(polyline4);
|
var arrowLineList = new Array();//记录绘制的箭头线
|
color="red";
|
arrowLineList[arrowLineList.length] = addArrow(polyline4,28,Math.PI/7,color);//记录绘制的箭头线
|
}
|
$("#diff").html(diffSensor+" ("+info+")");
|
}
|
function addArrow(polyline, length, angleValue, color) { //绘制箭头的函数
|
var linePoint = polyline.getPath();//线的坐标串
|
var arrowCount = linePoint.length;
|
for (var i = 1; i < arrowCount; i++) { //在拐点处绘制箭头
|
var pixelStart = map.pointToPixel(linePoint[i - 1]);
|
var pixelEnd = map.pointToPixel(linePoint[i]);
|
var angle = angleValue;//箭头和主线的夹角
|
var r = length; // r/Math.sin(angle)代表箭头长度
|
var delta = 0; //主线斜率，垂直时无斜率
|
var param = 0; //代码简洁考虑
|
var pixelTemX, pixelTemY;//临时点坐标
|
var pixelX, pixelY, pixelX1, pixelY1;//箭头两个点
|
if (pixelEnd.x - pixelStart.x == 0) { //斜率不存在是时
|
pixelTemX = pixelEnd.x;
|
if (pixelEnd.y > pixelStart.y) {
|
pixelTemY = pixelEnd.y - r;
|
} else {
|
pixelTemY = pixelEnd.y + r;
|
}
|
//已知直角三角形两个点坐标及其中一个角，求另外一个点坐标算法
|
pixelX = pixelTemX - r * Math.tan(angle);
|
pixelX1 = pixelTemX + r * Math.tan(angle);
|
pixelY = pixelY1 = pixelTemY;
|
} else //斜率存在时
|
{
|
delta = (pixelEnd.y - pixelStart.y) / (pixelEnd.x - pixelStart.x);
|
param = Math.sqrt(delta * delta + 1);
|
|
if ((pixelEnd.x - pixelStart.x) < 0) //第二、三象限
|
{
|
pixelTemX = pixelEnd.x + r / param;
|
pixelTemY = pixelEnd.y + delta * r / param;
|
} else//第一、四象限
|
{
|
pixelTemX = pixelEnd.x - r / param;
|
pixelTemY = pixelEnd.y - delta * r / param;
|
}
|
//已知直角三角形两个点坐标及其中一个角，求另外一个点坐标算法
|
pixelX = pixelTemX + Math.tan(angle) * r * delta / param;
|
pixelY = pixelTemY - Math.tan(angle) * r / param;
|
|
pixelX1 = pixelTemX - Math.tan(angle) * r * delta / param;
|
pixelY1 = pixelTemY + Math.tan(angle) * r / param;
|
}
|
|
var pointArrow = map.pixelToPoint(new BMap.Pixel(pixelX, pixelY));
|
var pointArrow1 = map.pixelToPoint(new BMap.Pixel(pixelX1, pixelY1));
|
arrow = new BMap.Polyline([
|
pointArrow,
|
linePoint[i],
|
pointArrow1
|
], {strokeColor: color, strokeWeight: 6, strokeOpacity: 0.5});
|
|
arrows.push(arrow);
|
map.addOverlay(arrow);
|
return arrow;
|
}
|
}
|
</script>
|
