ZhuDongming
2019-08-22 9c85c2ace8c4d7b96ff6dfb0a2823f608fbe1236
新增污染传播来源页面
1 files added
202 ■■■■■ changed files
src/main/webapp/view/pollutionsource.jsp 202 ●●●●● patch | view | raw | blame | history
src/main/webapp/view/pollutionsource.jsp
New file
@@ -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>