| | |
| | | var params = $.parseJSON($("#pollutionSourceParams").html()); |
| | | var month = params["month"]; |
| | | var device = params["device"]; |
| | | var dirPoint=params["dirPoint"]; |
| | | console.log(dirPoint.lng); |
| | | console.log(dirPoint.lat); |
| | | var dirPoint = new BMap.Point(params["dirPoint"].lng, params["dirPoint"].lat); |
| | | var getPollutionSourceData=params["getPollutionSourceData"]; |
| | | var windSpeed = parseFloat(getPollutionSourceData["e18"]); |
| | | var map = new BMap.Map("mapCanvas", {enableMapClick: false}); |
| | | map.setMapStyle(mapStyle); |
| | | map.enableScrollWheelZoom(true); // 开启鼠标滚轮缩放 |
| | |
| | | }); |
| | | map.addControl(navigation); |
| | | map.addControl(new BMap.ScaleControl()); |
| | | if ($.isEmptyObject(dirPoint)||$.isEmptyObject(getPollutionSourceData)||getPollutionSourceData["e18"]==0) { |
| | | if ($.isEmptyObject(dirPoint) || $.isEmptyObject(getPollutionSourceData) || getPollutionSourceData["e6"] == 0 || getPollutionSourceData["e18"] == 0 || getPollutionSourceData["e23"] == 0 || windSpeed <= 0.03) { |
| | | showNoData(); |
| | | }else{ |
| | | var humidity=getPollutionSourceData["e6"]; |
| | | var windSpeed=getPollutionSourceData["e18"]; |
| | | var humidity = parseFloat(getPollutionSourceData["e6"]); |
| | | var windDir = parseFloat(getPollutionSourceData["e23"]); |
| | | 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, 17); |
| | | var polyline1 = new BMap.Polyline([ |
| | | dirPoint, |
| | | new BMap.Point(point.lng+0.01, point.lat+0.01) |
| | | ], |
| | | {strokeColor: "#5298FF", strokeWeight: 4, strokeOpacity: 1} |
| | | ); |
| | | var polyline2 = new BMap.Polyline([ |
| | | dirPoint, |
| | | new BMap.Point( point.lng-0.02, point.lat-0.01) |
| | | ], |
| | | {strokeColor: "#5298FF", strokeWeight: 4, strokeOpacity: 1} |
| | | ); |
| | | var distance=windSpeed*3600; |
| | | console.log(distance); |
| | | var arrowLength;//两点间箭头长度 |
| | | if (distance <= 5) { |
| | | arrowLength = 0; |
| | | } else if (distance > 5 && distance <= 20) { |
| | | arrowLength = 2; |
| | | } else if (distance > 20 && distance <= 50) { |
| | | arrowLength = 3; |
| | | } else if (distance > 50 && distance <= 100) { |
| | | arrowLength = 5; |
| | | } else if (distance > 100 && distance <= 200) { |
| | | arrowLength = 10; |
| | | } else if (distance > 200 && distance <= 500) { |
| | | arrowLength = 20; |
| | | } else if (distance > 500 && distance <= 1000) { |
| | | arrowLength = 40; |
| | | } else if (distance > 1000 && distance <= 2000) { |
| | | arrowLength = 80; |
| | | } else if (distance > 2000 && distance <= 3000) { |
| | | arrowLength = 120; |
| | | } else if (distance > 3000 && distance <= 10000) { |
| | | arrowLength = 500; |
| | | } else if (distance > 10000 && distance <= 20000) { |
| | | arrowLength = 1000; |
| | | } else if (distance > 20000 && distance <= 50000) { |
| | | arrowLength = 2500; |
| | | } else if (distance > 50000 && distance <= 100000) { |
| | | arrowLength = 5000; |
| | | } else if (distance > 100000 && distance <= 200000) { |
| | | arrowLength = 10000; |
| | | } else if (distance > 200000 && distance <= 500000) { |
| | | arrowLength = 25000; |
| | | } else if (distance > 500000 && distance <= 1000000) { |
| | | arrowLength = 50000; |
| | | } else if (distance > 1000000 && distance <= 2000000) { |
| | | arrowLength = 100000; |
| | | } else { |
| | | arrowLength = 150000; |
| | | map.centerAndZoom(point, 16); |
| | | |
| | | //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); |
| | | } |
| | | map.addOverlay(polyline1);// 画两点间线 |
| | | addArrow(polyline1, arrowLength, Math.PI / 7,windSpeed); |
| | | map.addOverlay(polyline2);// 画两点间线 |
| | | addArrow(polyline2, arrowLength, Math.PI / 7,windSpeed); |
| | | return assemble; |
| | | } |
| | | |
| | | //以画多边形区域的方法画扇形区域 画出以point点为圆心,半径为radius,夹角从sDegree到eDegree的扇形 |
| | | function Sector(point, radius, sDegree, eDegree) { |
| | | var points = []; //创建构成多边形的点数组 |
| | | var step = ((eDegree - sDegree) / 10) || 10; //根据扇形的总夹角确定每步夹角度数,最大为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; |
| | | var oval = new BMap.Polygon(Sector(dirPoint, distance, winDirStart, winDirEnd), { |
| | | strokeColor: "grey", |
| | | strokeWeight: 1, |
| | | strokeOpacity: 0.8, |
| | | fillColor: "grey" |
| | | }); |
| | | map.addOverlay(oval); |
| | | 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 oval = new BMap.Polygon(Sector(dirPoint, distance * 0.33, winDirStart, winDirEnd), { |
| | | strokeColor: "grey", |
| | | strokeWeight: 1, |
| | | strokeOpacity: 0.4, |
| | | fillColor: "grey" |
| | | }); |
| | | map.addOverlay(oval); |
| | | |
| | | var polyline = new BMap.Polyline([ |
| | | dirPoint, |
| | | point |
| | | ], |
| | | {strokeColor: "#5298FF", strokeWeight: 4, strokeOpacity: 1} |
| | | ); |
| | | addArrow(polyline, 0, Math.PI / 7, windSpeed, humidity); |
| | | var winfowTextCause = "<p style='height: 44px;line-height: 22px'>汽车尾气,工厂废气,以及周边地区农田秸秆焚烧,污染传播途径是根据风向来做出调整</p>"; |
| | | var winfowTextSource; |
| | | var supplement; |
| | |
| | | }); |
| | | } |
| | | |
| | | |
| | | |
| | | function addArrow(polyline, length, angleValue,windSpeed) { |
| | | function addArrow(polyline, length, angleValue, windSpeed, humidity) { |
| | | var linePoint = polyline.getPath();// 线的坐标串 |
| | | var arrowCount = linePoint.length; |
| | | for (var i = 1; i < arrowCount; i++) { // 在拐点处绘制箭头 |
| | |
| | | var delta = 0; // 主线斜率,垂直时无斜率 |
| | | var param = 0; // 代码简洁考虑 |
| | | var pixelTemX, pixelTemY, poMiddleX, poMiddleY;// 临时点坐标 |
| | | var pixelX, pixelY, pixelX1, pixelY1;// 箭头两个点 |
| | | var pixelX, pixelY;// 箭头两个点 |
| | | poMiddleX = (pixelEnd.x + pixelStart.x) / 2; |
| | | poMiddleY = (pixelEnd.y + pixelStart.y) / 2; |
| | | if (poMiddleX - pixelStart.x == 0) { // 斜率不存在时 |
| | |
| | | } |
| | | // 已知直角三角形两个点坐标及其中一个角,求另外一个点坐标算法 |
| | | pixelX = pixelTemX - r * Math.tan(angle); |
| | | pixelX1 = pixelTemX + r * Math.tan(angle); |
| | | pixelY = pixelY1 = pixelTemY; |
| | | pixelY = pixelTemY; |
| | | } else { // 斜率存在时 |
| | | delta = (poMiddleY - pixelStart.y) / (poMiddleX - pixelStart.x); |
| | | param = Math.sqrt(delta * delta + 1); |
| | |
| | | // 已知直角三角形两个点坐标及其中一个角,求另外一个点坐标算法 |
| | | 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 pointMiddle = map.pixelToPoint(new BMap.Pixel(poMiddleX, poMiddleY)); |
| | | lab = new BMap.Label("风速:"+windSpeed+"m/s", {position: pointMiddle, offset: new BMap.Size(0, -30)}); |
| | | lab = new BMap.Label("<P>风速:" + windSpeed + "m/s</p><P>湿度:" + humidity + "°</p>", { |
| | | position: pointMiddle, |
| | | offset: new BMap.Size(-50, -20) |
| | | }); |
| | | lab.setStyle({ |
| | | color: "red", |
| | | color: "#FFFFFF", |
| | | fontSize: "16px", |
| | | backgroundColor: "1", |
| | | border: "0", |
| | | fontWeight: "bold" |
| | | }); |
| | | map.addOverlay(lab); |
| | | var Arrow = new BMap.Polyline([pointArrow, pointMiddle, pointArrow1], |
| | | {strokeColor: "#5298FF", strokeWeight: 4, strokeOpacity: 1}); |
| | | map.addOverlay(Arrow); |
| | | } |
| | | }; |
| | | |
| | |
| | | document.getElementById("cpm").style.display = 'block'; |
| | | }, 250); |
| | | }; |
| | | |
| | | </script> |