From 9c85c2ace8c4d7b96ff6dfb0a2823f608fbe1236 Mon Sep 17 00:00:00 2001 From: ZhuDongming <773644075@qq.com> Date: Thu, 22 Aug 2019 16:57:38 +0800 Subject: [PATCH] 新增污染传播来源页面 --- src/main/webapp/view/pollutionsource.jsp | 202 ++++++++++++++++++++++++++++++++++++++++++++++++++ 1 files changed, 202 insertions(+), 0 deletions(-) diff --git a/src/main/webapp/view/pollutionsource.jsp b/src/main/webapp/view/pollutionsource.jsp new file mode 100644 index 0000000..31d1fd0 --- /dev/null +++ b/src/main/webapp/view/pollutionsource.jsp @@ -0,0 +1,202 @@ +<%@ 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> -- Gitblit v1.8.0