<%@ 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:100px;
|
top:80px;
|
left:30px;
|
position:absolute;
|
z-index:1;
|
border:0px solid red;
|
background-color:#f5f3f0;
|
opacity: 0.8;
|
}
|
#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: 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="allmap" style="z-index: 0" ;>
|
</div>
|
<div id="box">
|
<p style="text-indent: 2em;line-height: 25px;color: red">注：方向箭头代表风向，箭头上的颜色变化代表该厂区内该时间点的因子浓度变化</p>
|
</div>
|
<div id="mapParams" style="display: none;">
|
${requestScope.params}
|
</div>
|
</body>
|
|
</html>
|
<script type="text/javascript">
|
// 百度地图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 device1 = params["deviceList"];
|
var preAngleDeviceString = params["preAngleDeviceString"];
|
var wind = params["wind"];
|
var devices=[];
|
var locationList=params["locationList"];
|
|
var color;
|
if (preAngleDeviceString!=""){
|
var preAngleDeviceList=JSON.parse(preAngleDeviceString);
|
var diff=preAngleDeviceList[0].sensor-preAngleDeviceList[1].sensor;
|
if (diff>0){
|
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(preAngleDeviceList[1].longitude, preAngleDeviceList[1].latitude)
|
], {strokeColor:"Gold", strokeWeight:8, strokeOpacity:0.5}); //创建折线
|
map.addOverlay(polyline4); //增加折线
|
var arrowLineList = new Array();//记录绘制的箭头线
|
color="Gold";
|
arrowLineList[arrowLineList.length] = addArrow(polyline4,30,Math.PI/7,color);//记录绘制的箭头线
|
} else {
|
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(preAngleDeviceList[1].longitude, preAngleDeviceList[1].latitude)
|
], {strokeColor:"red", strokeWeight:8, strokeOpacity:0.5}); //创建折线
|
map.addOverlay(polyline4); //增加折线
|
var arrowLineList = new Array();//记录绘制的箭头线
|
color="red";
|
arrowLineList[arrowLineList.length] = addArrow(polyline4,28,Math.PI/7,color);//记录绘制的箭头线
|
}
|
}else {
|
document.getElementById("cpm").style.display = 'block';
|
}
|
|
if (device1 != null) {
|
for (var i = 0; i < device1.length; i++) {
|
var icon1 = new BMap.Icon("/img/ico_co00.png", new BMap.Size(48, 48));
|
var mark1 = new BMap.Marker(new BMap.Point(device1[i].longitude, device1[i].latitude), {icon: icon1});
|
devices.push( new BMap.Point(device1[i].longitude, device1[i].latitude));
|
map.addOverlay(mark1);
|
}
|
}
|
|
|
//添加地图类型控件
|
map.addControl(new BMap.MapTypeControl({
|
mapTypes: [
|
BMAP_NORMAL_MAP,
|
BMAP_HYBRID_MAP
|
]
|
}));
|
|
|
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));
|
var Arrow = new BMap.Polyline([
|
pointArrow,
|
linePoint[i],
|
pointArrow1
|
], {strokeColor: color, strokeWeight: 6, strokeOpacity: 0.5});
|
map.addOverlay(Arrow);
|
return Arrow;
|
}
|
}
|
</script>
|
