<%@ page contentType="text/html;charset=UTF-8" language="java" %>
|
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
|
<!DOCTYPE html>
|
<head>
|
<meta charset="utf-8"/>
|
<title></title>
|
<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>
|
</head>
|
<style type="text/css">
|
body,
|
html,
|
#mapCanvas {
|
width: 100%;
|
height: 100%;
|
overflow: hidden;
|
margin: 0;
|
z-index: 0;
|
font-size: 14px;
|
font-family: "微软雅黑";
|
}
|
|
.main_body {
|
border: 0;
|
margin: 0;
|
width: 100%;
|
height: 100%;
|
position: relative;
|
}
|
|
* {
|
margin: 0;
|
padding: 0;
|
list-style: none;
|
}
|
|
.BMap_top {
|
display: none;
|
}
|
|
.BMap_center {
|
display: none;
|
}
|
|
.BMap_bubble_title {
|
color: white;
|
padding: 0 5px 0 5px;
|
background-color: #2DA0EB;
|
}
|
|
.BMap_bubble_content {
|
background-color: white;
|
padding: 5px;
|
}
|
|
.BMap_pop > img {
|
top: 42px !important;
|
margin-left: -10px;
|
}
|
|
.BMap_pop div:nth-child(1) div {
|
display: none;
|
}
|
|
.BMap_pop div:nth-child(3) {
|
display: none;
|
}
|
|
.BMap_pop div:nth-child(5) {
|
display: none;
|
}
|
|
.BMap_pop div:nth-child(7) {
|
display: none;
|
}
|
|
.BMap_pop div:nth-child(9) {
|
top: 35px !important;
|
border-radius: 5px;
|
}
|
|
#cpm {
|
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: 28px;
|
line-height: 100px;
|
text-align: center;
|
}
|
|
#show {
|
position: absolute;
|
z-index: 1;
|
top: 30px;
|
right: 50px;
|
display: inline-block;
|
width: 80px;
|
height: 40px;
|
border-width: 0px;
|
border-radius: 3px;
|
background: #6495ED;
|
cursor: pointer;
|
outline: none;
|
color: white;
|
font-size: 20px;
|
}
|
|
#show:hover {
|
background: #5CACEE;
|
}
|
</style>
|
|
<body>
|
<div class="main_body">
|
<input type="button" id="show" value="计算"/>
|
<div id="cpm">无法推测来源</div>
|
<div id="mapCanvas"></div> <!-- 百度地图 -->
|
<!-- 传sensorInfo,regionCode,regionName,monitorPoint,device-->
|
<div id="pollutionSourceParams" style="display: none;">
|
${requestScope.pollutionSourceParams}
|
</div>
|
</div>
|
</body>
|
</html>
|
|
<script type="text/javascript">
|
var moralMap = {};
|
var mapStyle = {
|
features: ["road", "building", "water", "land"], // 隐藏地图上的poi
|
style: "normal" // 设置地图风格为高端黑
|
};
|
var params = $.parseJSON($("#pollutionSourceParams").html());
|
var month = params["month"];
|
var device = params["device"];
|
var dirPoint = new BMap.Point(params["dirPoint"].lng, params["dirPoint"].lat);
|
var getPollutionSourceData = params["getPollutionSourceData"];
|
var map = new BMap.Map("mapCanvas", {enableMapClick: false});
|
map.setMapStyle(mapStyle);
|
map.enableScrollWheelZoom(true); // 开启鼠标滚轮缩放
|
var navigation = new BMap.NavigationControl({
|
anchor: BMAP_ANCHOR_BOTTOM_RIGHT,
|
type: BMAP_NAVIGATION_CONTROL_LARGE
|
});
|
map.addControl(navigation);
|
map.addControl(new BMap.ScaleControl());
|
var longitude = params["device"]["longitude"];
|
var latitude = params["device"]["latitude"];
|
var point = new BMap.Point(longitude, latitude);
|
var icon = new BMap.Icon("/img/ico00.png", new BMap.Size(50, 50));
|
var marker = new BMap.Marker(point, {icon: icon, offset: new BMap.Size(0, -20)});
|
map.addOverlay(marker);
|
map.centerAndZoom(point, 16);
|
|
|
$("#show").one('click', function () {
|
setTimeout(function () {
|
if ($.isEmptyObject(dirPoint) || $.isEmptyObject(getPollutionSourceData) || typeof (getPollutionSourceData["e6"]) == "undefined" || typeof (getPollutionSourceData["e7"]) == "undefined" || typeof (getPollutionSourceData["e18"]) == "undefined" || typeof (getPollutionSourceData["e23"]) == "undefined" || getPollutionSourceData["e18"] <= 0.03) {
|
showNoData();
|
} else {
|
var humidity = parseFloat(getPollutionSourceData["e6"]);
|
var temperature = parseFloat(getPollutionSourceData["e7"]);
|
var windSpeed = parseFloat(getPollutionSourceData["e18"]);
|
var windDir = parseFloat(getPollutionSourceData["e23"]);
|
var iconDir = new BMap.Icon("/img/ico07.gif", new BMap.Size(50, 50));
|
var markerDir = new BMap.Marker(dirPoint, {icon: iconDir, offset: new BMap.Size(0, -20)});
|
|
|
//centre:椭圆中心点,X:横向经度,Y:纵向纬度
|
function add_oval(centre, x, y) {
|
var assemble = new Array();
|
var angle;
|
var dot;
|
var tangent = x / y;
|
for (i = 0; i < 36; i++) {
|
angle = (2 * Math.PI / 36) * i;
|
dot = new BMap.Point(centre.lng + Math.sin(angle) * y * tangent, centre.lat + Math.cos(angle) * y);
|
assemble.push(dot);
|
}
|
return assemble;
|
}
|
|
//以画多边形区域的方法画扇形区域 画出以point点为圆心，半径为radius，夹角从sDegree到eDegree的扇形
|
function Sector(point, radius, sDegree, eDegree) {
|
var points = []; //创建构成多边形的点数组
|
var step = ((eDegree - sDegree) / 100) || 1; //根据扇形的总夹角确定每步夹角度数，最大为10
|
points.push(point);
|
for (var i = sDegree; i < eDegree + 0.001; i += step) { //循环获取每步的圆弧上点的坐标，存入点数组
|
points.push(EOffsetBearing(point, radius, i));
|
}
|
points.push(point);
|
return points;
|
}
|
|
//使用数学的方法计算需要画扇形的圆弧上的点坐标
|
function EOffsetBearing(point, dist, bearing) {
|
var lngConv = map.getDistance(point, new BMap.Point(point.lng + 0.1, point.lat)) * 10; //计算经度与原点的距离
|
var latConv = map.getDistance(point, new BMap.Point(point.lng, point.lat + 0.1)) * 10; //计算纬度与原点的距离
|
var lat = dist * Math.sin(bearing * Math.PI / 180) / latConv; //正弦计算待获取的点的纬度与原点纬度差
|
var lng = dist * Math.cos(bearing * Math.PI / 180) / lngConv; //余弦计算待获取的点的经度与原点经度差
|
return new BMap.Point(point.lng + lng, point.lat + lat);
|
}
|
|
var distance = windSpeed * 3600;
|
var winDirStart = 240 - windDir;
|
var winDirEnd = 300 - windDir;
|
setTimeout(function () {
|
var oval = new BMap.Polygon(Sector(dirPoint, distance, winDirStart, winDirEnd), {
|
strokeColor: "grey",
|
strokeWeight: 1,
|
strokeOpacity: 0.8,
|
fillColor: "grey"
|
});
|
map.addOverlay(oval);
|
}, 1500);
|
setTimeout(function () {
|
var oval = new BMap.Polygon(Sector(dirPoint, distance * 0.66, winDirStart, winDirEnd), {
|
strokeColor: "grey",
|
strokeWeight: 1,
|
strokeOpacity: 0.6,
|
fillColor: "grey"
|
});
|
map.addOverlay(oval);
|
var polyline = new BMap.Polyline([
|
dirPoint,
|
point
|
],
|
{strokeColor: "#5298FF", strokeWeight: 4, strokeOpacity: 1}
|
);
|
addArrow(polyline, 0, Math.PI / 7, temperature, humidity, windSpeed, windDir);
|
}, 1000);
|
setTimeout(function () {
|
var oval = new BMap.Polygon(Sector(dirPoint, distance * 0.33, winDirStart, winDirEnd), {
|
strokeColor: "grey",
|
strokeWeight: 1,
|
strokeOpacity: 0.4,
|
fillColor: "grey"
|
});
|
map.addOverlay(markerDir);
|
map.addOverlay(oval);
|
}, 500);
|
|
|
var winfowTextCause = "<p style='height: 44px;line-height: 22px'>汽车尾气，工厂废气，以及周边地区农田秸秆焚烧，污染传播途径是根据风向来做出调整</p>";
|
var winfowTextSource;
|
var supplement;
|
if (month == 12 || month == 1 || month == 2) {
|
if (windSpeed >= 3.4) {
|
supplement = "，但风速较大，大气扩散条件较有利，空气质量相对提升";
|
}
|
if (humidity >= 90.0) {
|
supplement = "，但降雨有利于对颗粒物的沉降、冲刷，改善污染状况";
|
} else {
|
supplement = "";
|
}
|
winfowTextSource = "<p style='height: 22px;line-height: 22px'>压强升高气温降低，会因冷空气带来的颗粒物，导致污染上升" + supplement + "</p>";
|
} else if (month == 3 || month == 4 || month == 5) {
|
if (windSpeed >= 3.4) {
|
supplement = "，但风速较大，大气扩散条件较有利，空气质量相对提升";
|
}
|
if (humidity >= 90.0) {
|
supplement = "，但降雨有利于对颗粒物的沉降、冲刷，改善污染状况";
|
} else {
|
supplement = "";
|
}
|
winfowTextSource = "<p style='height: 22px;line-height: 22px'>地面逆温频率的增加使污染物在近地层不断积累" + supplement + "</p>";
|
} else if (month == 6 || month == 7) {
|
if (windSpeed >= 3.4) {
|
supplement = "，同时风速较大，加速扩散";
|
}
|
if (humidity >= 90.0) {
|
supplement = "，同时降雨有利于对颗粒物的沉降、冲刷，改善污染状况";
|
} else {
|
supplement = "";
|
}
|
winfowTextSource = "<p style='height: 22px;line-height: 22px'>夏季的气温条件不易发生逆温,利于污染物扩散" + supplement + "</p>";
|
} else if (month == 8 || month == 9 || month == 10 || month == 11) {
|
if (windSpeed >= 3.4) {
|
supplement = "，但风速较大，利于污染物扩散";
|
}
|
if (humidity >= 90.0) {
|
supplement = "，但降雨有利于对颗粒物的沉降、冲刷，改善污染状况";
|
} else {
|
supplement = "";
|
}
|
winfowTextSource = "<p style='height: 22px;line-height: 22px'>大气扩散条件不好使污染物聚集，增大了气态污染物向二次颗粒物转化的机会" + supplement + "</p>";
|
}
|
|
var winfowText = '<div style="height:150px;" >';
|
var opts = {
|
width: 380,
|
title: '<h3>污染分析</h3>',
|
enableMessage: false //设置允许信息窗发送短息
|
}
|
winfowText += '<h3 style="background-color: #CD5C5C;color:white;margin-bottom: 1px">污染来源</h3>';
|
winfowText += winfowTextCause;
|
winfowText += '<h3 style="background-color: #66CD00;color:white;margin-bottom: 1px">污染成因</h3>';
|
winfowText += winfowTextSource;
|
winfowText += "</div>";
|
marker.addEventListener("click", function () {
|
var infoWindow = new BMap.InfoWindow(winfowText, opts);
|
this.openInfoWindow(infoWindow);
|
});
|
}
|
|
function addArrow(polyline, length, angleValue, temperature, humidity, windSpeed, windDir) {
|
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, poMiddleX, poMiddleY;// 临时点坐标
|
var pixelX, pixelY;// 箭头两个点
|
poMiddleX = (pixelEnd.x + pixelStart.x) / 2;
|
poMiddleY = (pixelEnd.y + pixelStart.y) / 2;
|
if (poMiddleX - pixelStart.x == 0) { // 斜率不存在时
|
pixelTemX = poMiddleX;
|
if (poMiddleY > pixelStart.y) {
|
pixelTemY = poMiddleY - r;
|
} else {
|
pixelTemY = poMiddleY + r;
|
}
|
// 已知直角三角形两个点坐标及其中一个角，求另外一个点坐标算法
|
pixelX = pixelTemX - r * Math.tan(angle);
|
pixelY = pixelTemY;
|
} else { // 斜率存在时
|
delta = (poMiddleY - pixelStart.y) / (poMiddleX - pixelStart.x);
|
param = Math.sqrt(delta * delta + 1);
|
if ((poMiddleX - pixelStart.x) < 0) { // 第二、三象限
|
pixelTemX = poMiddleX + r / param;
|
pixelTemY = poMiddleY + delta * r / param;
|
} else { // 第一、四象限
|
pixelTemX = poMiddleX - r / param;
|
pixelTemY = poMiddleY - delta * r / param;
|
}
|
// 已知直角三角形两个点坐标及其中一个角，求另外一个点坐标算法
|
pixelX = pixelTemX + Math.tan(angle) * r * delta / param;
|
pixelY = pixelTemY - Math.tan(angle) * r / param;
|
}
|
var pointMiddle = map.pixelToPoint(new BMap.Pixel(poMiddleX, poMiddleY));
|
var windDirection;
|
if (windDir == 0) {
|
windDirection = "北风";
|
} else if (windDir == 90) {
|
windDirection = "东风";
|
} else if (windDir == 180) {
|
windDirection = "南风";
|
} else if (windDir == 270) {
|
windDirection = "西风";
|
} else if (windDir > 0 && windDir < 90) {
|
windDirection = "东北风";
|
} else if (windDir > 90 && windDir < 180) {
|
windDirection = "东南风";
|
} else if (windDir > 180 && windDir < 270) {
|
windDirection = "西南风";
|
} else if (windDir > 270 && windDir < 360) {
|
windDirection = "西北风";
|
}
|
lab = new BMap.Label("<P>温度:" + temperature + "℃</p><P>湿度:" + humidity + "%</p><P>风速:" + windSpeed + "m/s</p><P>风向:" + windDirection + "</p>", {
|
position: pointMiddle,
|
offset: new BMap.Size(-50, -40)
|
});
|
lab.setStyle({
|
color: "#EE3B3B",
|
fontSize: "16px",
|
backgroundColor: "1",
|
border: "0",
|
fontWeight: "bold"
|
});
|
map.addOverlay(lab);
|
}
|
};
|
|
function showNoData() {
|
map.centerAndZoom(point, 17);
|
setTimeout(function () {
|
document.getElementById("cpm").style.display = 'block';
|
}, 250);
|
};
|
}, 1500);
|
});
|
|
</script>
|
