New file |
| | |
| | | <%@ 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; |
| | | } |
| | | </style> |
| | | |
| | | <body> |
| | | <div class="main_body"> |
| | | <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 weatherInfoToday = params["weatherInfoToday"]; |
| | | var weatherInfoForecast = params["weatherInfoForecast"]; |
| | | var isToday = params["isToday"]; |
| | | console.log(weatherInfoToday); |
| | | console.log(weatherInfoForecast); |
| | | console.log(isToday); |
| | | var device = params["device"]; |
| | | var cityName = params["weatherInfoToday"]["cityName"]; |
| | | var map = new BMap.Map("mapCanvas", {enableMapClick: false}); |
| | | map.setCurrentCity("昆山"); |
| | | 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.setCurrentCity(cityName); |
| | | map.centerAndZoom(point, 19); |
| | | var bounds = map.getBounds(); //获取地图可视区域 |
| | | var sw = bounds.getSouthWest(); //获取西南角的经纬度(左下端点) |
| | | var ne = bounds.getNorthEast(); //获取东北角的经纬度(右上端点) |
| | | var wn = new BMap.Point(sw.lng, ne.lat); //获取西北角的经纬度(左上端点) |
| | | var es = new BMap.Point(ne.lng, sw.lat); //获取东南角的经纬度(右下端点) |
| | | var n = new BMap.Point(longitude, ne.lat); |
| | | var s = new BMap.Point(longitude, sw.lat); |
| | | var w = new BMap.Point(sw.lng, latitude); |
| | | var e = new BMap.Point(ne.lng, latitude); |
| | | var dirPoint; |
| | | if (Object.keys(weatherInfoForecast).length === 0) { |
| | | var windDir = weatherInfoToday["windDir"]; |
| | | dirPoint = getWindDir(windDir, dirPoint); |
| | | } else { |
| | | if (isToday) { |
| | | var windDir = weatherInfoToday["windDir"]; |
| | | dirPoint = getWindDir(windDir, dirPoint); |
| | | } else { |
| | | var windDir = weatherInfoForecast["windDirDay"]; |
| | | dirPoint = getWindDir(windDir, dirPoint); |
| | | } |
| | | } |
| | | var polyline = new BMap.Polyline([ |
| | | dirPoint, |
| | | point |
| | | ], |
| | | {strokeColor: "#5298FF", strokeWeight: 4, strokeOpacity: 1} |
| | | ); |
| | | map.addOverlay(polyline);// 画两点间线 |
| | | addArrow(polyline, 50, Math.PI / 7); |
| | | |
| | | var winfowText = |
| | | '<div style="min-height:20px;overflow:auto;max-height:330px;" >'; |
| | | var opts = { |
| | | width: 220, |
| | | height: 220, |
| | | enableMessage: false //设置允许信息窗发送短息 |
| | | } |
| | | winfowText += ("<p style='height: 22px;line-height: 22px'></p>"); |
| | | |
| | | winfowText += "</div>"; |
| | | marker.addEventListener("click", function () { |
| | | var infoWindow = new BMap.InfoWindow(winfowText, opts); |
| | | this.openInfoWindow(infoWindow); |
| | | }); |
| | | |
| | | |
| | | function addArrow(polyline, length, angleValue) { |
| | | 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, pixelX1, pixelY1;// 箭头两个点 |
| | | 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); |
| | | pixelX1 = pixelTemX + r * Math.tan(angle); |
| | | pixelY = pixelY1 = 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; |
| | | 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)); |
| | | var Arrow = new BMap.Polyline([pointArrow, pointMiddle, pointArrow1], |
| | | {strokeColor: "#5298FF", strokeWeight: 4, strokeOpacity: 1}); |
| | | map.addOverlay(Arrow); |
| | | } |
| | | }; |
| | | |
| | | function getWindDir(windDir, dirPoint) { |
| | | if (windDir == "北风") { |
| | | dirPoint = n; |
| | | } else if (windDir == "南风") { |
| | | dirPoint = s; |
| | | } else if (windDir == "西风") { |
| | | dirPoint = w; |
| | | } else if (windDir == "东风") { |
| | | dirPoint = e; |
| | | } else if (windDir == "西北风") { |
| | | dirPoint = wn; |
| | | } else if (windDir == "东北风") { |
| | | dirPoint = ne; |
| | | } else if (windDir == "西南风") { |
| | | dirPoint = sw; |
| | | } else if (windDir == "东南风") { |
| | | dirPoint = es; |
| | | } else { |
| | | dirPoint = n; |
| | | } |
| | | return dirPoint; |
| | | }; |
| | | </script> |