修改最大值、最小值按钮和信息保持在同一水平线上及调整起点和终点图标上1显示的位置

ZhuDongming

2019-08-19 3e8e381d224145a676ef932bf2878c6f4b204523

 src/main/webapp/view/uavTrajectory.jsp

@@ -66,21 +66,17 @@
        font-size: 13px;
        font-weight: bold;
        text-align: left;
        padding-left: 5px;
        padding-top: 5px;
        padding: 5px 5px 0 5px;
        background-color: #2DA0EB;
    }

    .BMap_bubble_content {
        background-color: white;
        padding-left: 5px;
        padding-top: 5px;
        padding-bottom: 10px;
        padding: 5px 5px 10px 5px;
    }

    .BMap_pop img {
        top: 45px !important;
        left: 220px !important;
    }

    .BMap_pop div:nth-child(1) div {
@@ -129,8 +125,9 @@
        style: "normal" // 设置地图风格为高端黑
    };
    var params = $.parseJSON($("#uavTrajectoryParams").html());
    moralMap['params'] = params;
    var sensorInfo = params["sensorInfo"];
    var sensorInfoMin = params["sensorInfoMin"];
    var sensorInfoMax = params["sensorInfoMax"];
    //var map = new BMap.Map("mapCanvas", defaultParam);
    var map = new BMap.Map("mapCanvas", {enableMapClick: false});
    map.setCurrentCity("昆山");
@@ -147,6 +144,8 @@
    }
    var trackPoints = []; //用来存放从后台获取到的所有历史轨迹点的数据
    var coincidentPoints = new Array();
    var flyingParameters = ['经度', '纬度', '高度', '速度x', '速度y', '速度z'];
    var monitorParameters = ['PM2.5', 'PM10', '一氧化碳', '二氧化硫', '二氧化氮', '臭氧', 'VOCs总量', '气压', '温度', '湿度', '核辐射'];
    if (sensorInfo.length > 0) {
        $.each(sensorInfo, function (item, value) {
            if (typeof (value.经度) == "undefined") {
@@ -156,6 +155,13 @@
            }
        })
        for (var i = 0; i < trackPoints.length; i++) {
            var flyingData = [];
            var monitorData = [];
            var flyingDataMin = [];
            var monitorDataMin = [];
            var flyingDataMax = [];
            var monitorDataMax = [];
            var list = new Array();
            var startPoint = trackPoints[i];
            var endPoint = trackPoints[i + 1];
            var marker;
@@ -163,9 +169,11 @@
            var arrowLength;//两点间箭头长度
            if (distance <= 5) {
                arrowLength = 0;
            } else if (distance > 5 && distance <= 10) {
            } else if (distance > 5 && distance <= 20) {
                arrowLength = 2;
            } else if (distance <= 100) {
            } else if (distance > 20 && distance <= 50) {
                arrowLength = 3;
            } else if (distance > 50 && distance <= 100) {
                arrowLength = 5;
            } else if (distance > 100 && distance <= 200) {
                arrowLength = 10;
@@ -200,7 +208,7 @@
                    startPoint,
                    endPoint
                ],
                {strokeColor: "#5298FF", strokeWeight: 5, strokeOpacity: 1}
                {strokeColor: "#5298FF", strokeWeight: 4, strokeOpacity: 1}
            );
            if (i < trackPoints.length - 1 && trackPoints.length > 1) {
                map.addOverlay(polyline);// 画两点间线
@@ -232,8 +240,14 @@
            var winfowText =
                '<div style="min-height:20px;overflow:auto;max-height:400px;" >';
            var opts = {
                width: 420,
                title: '<h4>时间：' + sensorInfo[i].时间 + '</h4>', // 信息窗口标题
                enableMessage: false, //设置允许信息窗发送短息
            }

            var optsCoincide = {
                width: 220,
                title: '<h4>无人机信息</h4>', // 信息窗口标题
                title: '<h4>重合点坐标信息</h4>', // 信息窗口标题
                enableMessage: false, //设置允许信息窗发送短息
            }

@@ -242,6 +256,7 @@
                if (distance <= 1.9) {
                    if (coincidentPoints.indexOf(i) == -1) {
                        coincidentPoints.push(i);
                        winfowText += '<p id="' + i + '" onclick="openInfo(this)" onmousemove="red(this.id)" onmouseout="black(this.id)">' + "时间：" + sensorInfo[i].时间 + "</p>";
                    }
                    coincidentPoints.push(j);
                    count++;
@@ -250,36 +265,77 @@
                    winfowText += winfowTextAdd;
                }
            }

            var monitorDataResult = monitorDataSort(sensorInfo[i], monitorData, monitorParameters);
            var flyingDataResult = flyingDataSort(sensorInfo[i], flyingData, flyingParameters);
            var monitorSensorsCount = -1;
            var flyingSensorsCount = -1;
            if (coincidentPoints.indexOf(i) > -1) {
                winfowText = '<p id="' + i + '" onclick="openInfo(this)" onmousemove="red(this.id)" onmouseout="black(this.id)">' + "时间：" + sensorInfo[i].时间 + "</p>" + winfowText + "</div>";
                winfowText = winfowText + "</div>";
            } else {
                for (var prop in sensorInfo[i]) {
                    if (sensorInfo[i].hasOwnProperty(prop)) {
                        winfowText += (prop + "：" + sensorInfo[i][prop] + "</br>");
                winfowText += '<h4 style="background-color: #CD5C5C;color:white;margin-bottom: 1px">监测因子信息</h4>';
                for (var prop in monitorDataResult) {
                    if (monitorDataResult.hasOwnProperty(prop)) {
                        monitorSensorsCount++;
                        winfowText += ("<p style='height: 22px;line-height: 22px'>" + prop + "：" + monitorDataResult[prop] + '<input id="a' + i + monitorSensorsCount + '" class="' + i + '" type="button" value="最小值" onclick="showMonitorMinOrMax(this,sensorInfoMin,monitorDataMin,monitorParameters)" onmousemove="moveChangeColor(this)" onmouseout="outChangeColor(this)" style="width:80px;height:18px;margin-top:2px;display: inline-block;position: absolute;right:120px;border-width: 0px;border-radius: 3px; background:#7C73E9;cursor: pointer; outline: none;color:white"/><span id="aa' + i + monitorSensorsCount + '" style="width:80px;display: none;position: absolute;right:120px;text-align: center"></span><input id="b' + i + monitorSensorsCount + '" class="' + i + '" type="button" value="最大值" onclick="showMonitorMinOrMax(this,sensorInfoMax,monitorDataMax,monitorParameters)" onmousemove="moveChangeColor(this)" onmouseout="outChangeColor(this)" style="width:80px;height:18px;margin-top:2px;display: inline-block;position: absolute;right:25px;border-width: 0px;border-radius: 3px; background:#7C73E9;cursor: pointer; outline: none;color:white"/><span id="bb' + i + monitorSensorsCount + '" style="width:80px;display: none;position: absolute;right:25px;text-align: center"></span>' + "</p>");
                    }
                }
                winfowText += '<h4 style="background-color: #66CD00;color:white;margin-bottom: 1px">飞行因子信息</h4>';
                for (var prop in flyingDataResult) {
                    if (flyingDataResult.hasOwnProperty(prop)) {
                        flyingSensorsCount++;
                        winfowText += ("<p style='height: 22px;line-height: 22px'>" + prop + "：" + flyingDataResult[prop] + '<input id="c' + i + flyingSensorsCount + '" class="' + i + '" type="button" value="最小值" onclick="showFlyingMinOrMax(this,sensorInfoMin,flyingDataMin,flyingParameters)" onmousemove="moveChangeColor(this)" onmouseout="outChangeColor(this)" style="width:80px;height:18px;margin-top:2px;display: inline-block;position: absolute;right:120px;border-width: 0px;border-radius: 3px; background:#7C73E9;cursor: pointer; outline: none;color:white"/><span id="cc' + i + flyingSensorsCount + '" style="width:80px;display: none;position: absolute;right:120px;text-align: center"></span><input id="d' + i + flyingSensorsCount + '" class="' + i + '" type="button" value="最大值" onclick="showFlyingMinOrMax(this,sensorInfoMax,flyingDataMax,flyingParameters)" onmousemove="moveChangeColor(this)" onmouseout="outChangeColor(this)" style="width:80px;height:18px;margin-top:2px;display: inline-block;position: absolute;right:25px;border-width: 0px;border-radius: 3px; background:#7C73E9;cursor: pointer; outline: none;color:white"/><span id="dd' + i + flyingSensorsCount + '" style="width:80px;display: none;position: absolute;right:25px;text-align: center"></span>' + "</p>");
                    }
                }
                winfowText += "</div>";
            }

            (function (x) {
                var infoWindow = new BMap.InfoWindow(winfowText, opts);
                if (coincidentPoints.indexOf(i) > -1) {
                    var infoWindow = new BMap.InfoWindow(winfowText, optsCoincide);
                } else {
                    var infoWindow = new BMap.InfoWindow(winfowText, opts);
                }
                marker.addEventListener("click", function () {
                    this.openInfoWindow(infoWindow);
                    $(".BMap_pop img").css('margin-left', '-10px');
                    for (var i = 0; i < list.length; i++) {
                        $("#" + list[i]).css('color', 'blue');
                    }
                });
            })(i);

            function openInfo(e) {
                if (list.indexOf(e.id) == -1) {
                    list.push(e.id);
                }
                var point = new BMap.Point(sensorInfo[e.id].经度.substr(0, sensorInfo[e.id].经度.length - 1), sensorInfo[e.id].纬度.substr(0, sensorInfo[e.id].纬度.length - 1));
                var monitorDataCoincide = monitorDataSort(sensorInfo[e.id], monitorData, monitorParameters);
                var flyingDataCoincide = flyingDataSort(sensorInfo[e.id], flyingData, flyingParameters);
                var winfowText1 =
                    '<div style="min-height:20px;overflow:auto;max-height:400px;" >';
                for (var prop in sensorInfo[e.id]) {
                    if (sensorInfo[e.id].hasOwnProperty(prop)) {
                        winfowText1 += (prop + "：" + sensorInfo[e.id][prop] + "</br>");
                winfowText1 += '<h4 style="background-color: #CD5C5C;color:white;margin-bottom: 1px">监测因子信息</h4>';
                var monitorSensorsCoincideCount = -1;
                var flyingSensorsCoincideCount = -1;
                for (var prop in monitorDataCoincide) {
                    if (monitorDataCoincide.hasOwnProperty(prop)) {
                        monitorSensorsCoincideCount++;
                        winfowText1 += ("<p style='height: 22px;line-height: 22px'>" + prop + "：" + monitorDataCoincide[prop] + '<input id="e' + e.id + monitorSensorsCoincideCount + '" class="' + e.id + '" type="button" value="最小值" onclick="showMonitorMinOrMax(this,sensorInfoMin,monitorDataMin,monitorParameters)" onmousemove="moveChangeColor(this)" onmouseout="outChangeColor(this)" style="width:80px;height:18px;margin-top:2px;display: inline-block;position: absolute;right:120px;border-width: 0px;border-radius: 3px; background:#7C73E9;cursor: pointer; outline: none;color:white "/><span id="ee' + e.id + monitorSensorsCoincideCount + '" style="width:80px;display: none;position: absolute;right:120px;text-align: center"></span><input id="f' + e.id + monitorSensorsCoincideCount + '" class="' + e.id + '" type="button" value="最大值" onclick="showMonitorMinOrMax(this,sensorInfoMax,monitorDataMax,monitorParameters)" onmousemove="moveChangeColor(this)" onmouseout="outChangeColor(this)" style="width:80px;height:18px;margin-top:2px;display: inline-block;position: absolute;right:25px;border-width: 0px;border-radius: 3px; background:#7C73E9;cursor: pointer; outline: none;color:white"/><span id="ff' + e.id + monitorSensorsCoincideCount + '" style="width:80px;display: none;position: absolute;right:25px;text-align: center"></span>' + "</p>");
                    }
                }
                winfowText1 += '<h4 style="background-color: #66CD00;color:white;margin-bottom: 1px">飞行因子信息</h4>';
                for (var prop in flyingDataCoincide) {
                    if (flyingDataCoincide.hasOwnProperty(prop)) {
                        flyingSensorsCoincideCount++;
                        winfowText1 += ("<p style='height: 22px;line-height: 22px'>" + prop + "：" + flyingDataCoincide[prop] + '<input id="g' + e.id + flyingSensorsCoincideCount + '" class="' + e.id + '" type="button" value="最小值" onclick="showFlyingMinOrMax(this,sensorInfoMin,flyingDataMin,flyingParameters)" onmousemove="moveChangeColor(this)" onmouseout="outChangeColor(this)" style="width:80px;height:18px;margin-top:2px;display: inline-block;position: absolute;right:120px;border-width: 0px;border-radius: 3px; background:#7C73E9;cursor: pointer; outline: none;color:white "/><span id="gg' + e.id + flyingSensorsCoincideCount + '" style="width:80px;display: none;position: absolute;right:120px;text-align: center"></span><input id="h' + e.id + flyingSensorsCoincideCount + '" class="' + e.id + '" type="button" value="最大值" onclick="showFlyingMinOrMax(this,sensorInfoMax,flyingDataMax,flyingParameters)" onmousemove="moveChangeColor(this)" onmouseout="outChangeColor(this)" style="width:80px;height:18px;margin-top:2px;display: inline-block;position: absolute;right:25px;border-width: 0px;border-radius: 3px; background:#7C73E9;cursor: pointer; outline: none;color:white"/><span id="hh' + e.id + flyingSensorsCoincideCount + '" style="width:80px;display: none;position: absolute;right:25px;text-align: center"></span>' + "</p>");
                    }
                }
                winfowText1 += "</div>";
                var infoWindow1 = new BMap.InfoWindow(winfowText1, opts);
                var optsCoincideChild = {
                    width: 420,
                    title: '<h4>时间：' + sensorInfo[e.id].时间 + '</h4>', // 信息窗口标题
                    enableMessage: false, //设置允许信息窗发送短息
                }
                var infoWindow1 = new BMap.InfoWindow(winfowText1, optsCoincideChild);
                //开启信息窗口
                map.openInfoWindow(infoWindow1, point);
            }
@@ -290,11 +346,65 @@
            }

            function black(x) {
                document.getElementById(x).style.color = "#000000";
                if (list.length > 0) {
                    if (list.indexOf(x) == -1) {
                        document.getElementById(x).style.color = "#000000";
                    } else {
                        document.getElementById(x).style.color = "blue";
                    }
                } else {
                    document.getElementById(x).style.color = "#000000";
                }
            }

            function openInfoWindow() {
                map.openInfoWindow.apply(map, arguments); //开启信息窗口
            }

            function monitorDataSort(sensorMap, monitorData, monitorParameters) {
                for (var j = 0; j < monitorParameters.length; j++) {
                    $.map(sensorMap, function (value, key) {
                        if (monitorParameters[j] == key) {
                            monitorData[key] = sensorMap[key];
                        }
                    });
                }
                return monitorData;
            }

            function flyingDataSort(sensorMap, flyingData, flyingParameters) {
                for (var k = 0; k < flyingParameters.length; k++) {
                    $.map(sensorMap, function (value, key) {
                        if (flyingParameters[k] == key) {
                            flyingData[key] = sensorMap[key];
                        }
                    });
                }
                return flyingData;
            }

            function showMonitorMinOrMax(e, sensorInfoMinOrMax, monitorDataMinOrMax, monitorParameters) {
                var i = $("#" + e.id).attr('class');
                var monitorDataResultMinOrMax = monitorDataSort(sensorInfoMinOrMax[i], monitorDataMinOrMax, monitorParameters);
                $("#" + e.id).hide();
                $("#" + e.id.substr(0, 1) + e.id).html(monitorDataResultMinOrMax[monitorParameters[e.id.substr(1 + i.length, e.id.length)]]);
                $("#" + e.id.substr(0, 1) + e.id).show();
            }

            function showFlyingMinOrMax(e, sensorInfoMinOrMax, flyingDataMinOrMax, flyingParameters) {
                var i = $("#" + e.id).attr('class');
                var flyingDataResultMinOrMax = flyingDataSort(sensorInfoMinOrMax[i], flyingDataMinOrMax, flyingParameters);
                $("#" + e.id).hide();
                $("#" + e.id.substr(0, 1) + e.id).html(flyingDataResultMinOrMax[flyingParameters[e.id.substr(1 + i.length, e.id.length)]]);
                $("#" + e.id.substr(0, 1) + e.id).show();
            }

            function moveChangeColor(e) {
                $("#" + e.id).css('backgroundColor', '#A49EF0');
            }

            function outChangeColor(e) {
                $("#" + e.id).css('backgroundColor', '#7C73E9');
            }

            if (count > 0) {
@@ -307,6 +417,21 @@
                    lab = new BMap.Label(count + 1, {position: startPoint, offset: new BMap.Size(-14, -9)});
                } else {
                    lab = new BMap.Label(count + 1, {position: startPoint, offset: new BMap.Size(-18, -9)});
                }
                lab.setStyle({
                    color: "#fff",
                    fontSize: "16px",
                    backgroundColor: "1",
                    border: "0",
                    fontWeight: "bold"
                });
                map.addOverlay(lab);
            }
            if (count == 0) {
                if (i != 0 && i != trackPoints.length - 1) {
                    var lab = new BMap.Label(count + 1, {position: startPoint, offset: new BMap.Size(-7, -22)});
                } else if (i == 0 || i == trackPoints.length - 1) {
                    var lab = new BMap.Label(count + 1, {position: startPoint, offset: new BMap.Size(-6, -21)});
                }
                lab.setStyle({
                    color: "#fff",
@@ -366,7 +491,7 @@
            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: 5, strokeOpacity: 1});
                {strokeColor: "#5298FF", strokeWeight: 4, strokeOpacity: 1});
            map.addOverlay(Arrow);
        }
    };