无人机落点，污染源通道，溯源应用

jinpengyong

2020-06-19 21bc39e477ebf9421378aed76062e2be1f1e7f9e

无人机落点，污染源通道，溯源应用

 src/main/java/com/moral/controller/ScreenController.java

@@ -929,12 +929,12 @@
            }
        }

        for (int i = 0; i <resultList.size() ; i++) {
        for (int i = 0; i < resultList.size(); i++) {
            if (resultList.get(i) == null) {
                Map<String, Object> hashMap = new HashMap<>();
                if(type.equals("day")){
                if (type.equals("day")) {
                    hashMap.put("time", i);
                }else {
                } else {
                    hashMap.put("time", i + 1);
                }
                hashMap.put(s, "");
@@ -961,15 +961,15 @@
                ArrayList<String> values = new ArrayList<>();
                values.add(map.remove(s).toString());
                values.add("");
                map.put("values",values);
                map.put("values", values);
            }
        }

        Iterator<Map<String, Object>> it = resultList.iterator();
        while(it.hasNext()){
        while (it.hasNext()) {
            Map<String, Object> next = it.next();
            ArrayList<String> values = (ArrayList<String>)next.get("values");
            if(values.get(0).equals("")&&values.get(1).equals("")){
            ArrayList<String> values = (ArrayList<String>) next.get("values");
            if (values.get(0).equals("") && values.get(1).equals("")) {
                it.remove();
            }
        }
@@ -1635,4 +1635,148 @@
            return model;
        }
    }

    @GetMapping("/uavDroppoint")
    @ApiOperation(value = "无人机落点应用", notes = "无人机落点应用")
    @ApiImplicitParams(value = {
            @ApiImplicitParam(name = "mac", value = "设备mac（格式：p5dnd7a0392068）", required = true, paramType = "query", dataType = "String"),
            @ApiImplicitParam(name = "sensorKey", value = "传感器key", required = true, paramType = "query", dataType = "String"),
            @ApiImplicitParam(name = "startTime", value = "开始时间(格式：2019-07-17-17)", required = true, paramType = "query", dataType = "String"),
            @ApiImplicitParam(name = "endTime", value = "结束时间(格式：2019-07-17-18)", required = true, paramType = "query", dataType = "String")
    })
    public ModelAndView uavDroppoint(ModelAndView model, HttpServletRequest request) throws Exception {
        Map<String, Object> parameters = WebUtils.getParametersStartingWith(request, null);
        String st = parameters.get("startTime").toString();
        String startYearAndDay = st.substring(0, st.lastIndexOf("-"));
        String startHour = st.substring(st.lastIndexOf("-") + 1);
        String startTime = startYearAndDay + " " + startHour + ":00:00";
        String et = parameters.get("endTime").toString();
        String endHour = et.substring(et.lastIndexOf("-") + 1);
        int endHourValue = Integer.valueOf(endHour);
        int startHourValue = Integer.valueOf(startHour);
        if (endHourValue <= startHourValue) {
            endHourValue = startHourValue + 1;
        }
        String endTime = startYearAndDay + " " + endHourValue + ":00:00";
        parameters.put("startTime", startTime);
        parameters.put("endTime", endTime);
        String mac = parameters.get("mac").toString();
        if (mac != null && mac.length() != 0) {
            List<Map<String, Object>> sensorData = historyService.getUavSensorData(parameters);
            Map<String, String> sensorsMap = sensorService.getSensorsMap(parameters);
            JSONObject params = new JSONObject();
            params.put("sensorInfo", sensorData);
            params.put("sensorsMap", sensorsMap);
            params.put("sensorKey",parameters.get("sensorKey"));
            params.put("unit",parameters.get("unit"));
            params.put("description",parameters.get("description"));
            String paramsJson = params.toJSONString();
            model.addObject("uavDroppointParams", paramsJson);
            model.setViewName("uavdroppoint");
            return model;
        } else {
            StringBuilder msg = new StringBuilder();
            msg.append(" param[0] mac:");
            msg.append(mac);
            log.warn(msg);
            model.setViewName("403");
            return model;
        }
    }

    @GetMapping("/uavChannel")
    @ApiOperation(value = "无人机污染源通道应用", notes = "无人机污染源通道应用")
    @ApiImplicitParams(value = {
            @ApiImplicitParam(name = "mac", value = "设备mac（格式：p5dnd7a0392068）", required = true, paramType = "query", dataType = "String"),
            @ApiImplicitParam(name = "sensorKey", value = "传感器key", required = true, paramType = "query", dataType = "String"),
            @ApiImplicitParam(name = "startTime", value = "开始时间(格式：2019-07-17-17)", required = true, paramType = "query", dataType = "String"),
            @ApiImplicitParam(name = "endTime", value = "结束时间(格式：2019-07-17-18)", required = true, paramType = "query", dataType = "String")
    })
    public ModelAndView uavChannel(ModelAndView model, HttpServletRequest request) throws Exception {
        Map<String, Object> parameters = WebUtils.getParametersStartingWith(request, null);
        String st = parameters.get("startTime").toString();
        String startYearAndDay = st.substring(0, st.lastIndexOf("-"));
        String startHour = st.substring(st.lastIndexOf("-") + 1);
        String startTime = startYearAndDay + " " + startHour + ":00:00";
        String et = parameters.get("endTime").toString();
        String endHour = et.substring(et.lastIndexOf("-") + 1);
        int endHourValue = Integer.valueOf(endHour);
        int startHourValue = Integer.valueOf(startHour);
        if (endHourValue <= startHourValue) {
            endHourValue = startHourValue + 1;
        }
        String endTime = startYearAndDay + " " + endHourValue + ":00:00";
        parameters.put("startTime", startTime);
        parameters.put("endTime", endTime);
        String mac = parameters.get("mac").toString();
        if (mac != null && mac.length() != 0) {
            List<Map<String, Object>> sensorData = historyService.getUavSensorData(parameters);
            Map<String, String> sensorsMap = sensorService.getSensorsMap(parameters);
            JSONObject params = new JSONObject();
            params.put("sensorInfo", sensorData);
            params.put("sensorsMap", sensorsMap);
            params.put("sensorKey",parameters.get("sensorKey"));
            params.put("unit",parameters.get("unit"));
            params.put("description",parameters.get("description"));
            String paramsJson = params.toJSONString();
            model.addObject("uavDroppointParams", paramsJson);
            model.setViewName("uavchannel");
            return model;
        } else {
            StringBuilder msg = new StringBuilder();
            msg.append(" param[0] mac:");
            msg.append(mac);
            log.warn(msg);
            model.setViewName("403");
            return model;
        }
    }

    @GetMapping("/uavTracing")
    @ApiOperation(value = "无人机溯源应用", notes = "无人机溯源应用")
    @ApiImplicitParams(value = {
            @ApiImplicitParam(name = "mac", value = "设备mac（格式：p5dnd7a0392068）", required = true, paramType = "query", dataType = "String"),
            @ApiImplicitParam(name = "sensorKey", value = "传感器key", required = true, paramType = "query", dataType = "String"),
            @ApiImplicitParam(name = "startTime", value = "开始时间(格式：2019-07-17-17)", required = true, paramType = "query", dataType = "String"),
            @ApiImplicitParam(name = "endTime", value = "结束时间(格式：2019-07-17-18)", required = true, paramType = "query", dataType = "String")
    })
    public ModelAndView uavTracing(ModelAndView model, HttpServletRequest request) throws Exception {
        Map<String, Object> parameters = WebUtils.getParametersStartingWith(request, null);
        String st = parameters.get("startTime").toString();
        String startYearAndDay = st.substring(0, st.lastIndexOf("-"));
        String startHour = st.substring(st.lastIndexOf("-") + 1);
        String startTime = startYearAndDay + " " + startHour + ":00:00";
        String et = parameters.get("endTime").toString();
        String endHour = et.substring(et.lastIndexOf("-") + 1);
        int endHourValue = Integer.valueOf(endHour);
        int startHourValue = Integer.valueOf(startHour);
        if (endHourValue <= startHourValue) {
            endHourValue = startHourValue + 1;
        }
        String endTime = startYearAndDay + " " + endHourValue + ":00:00";
        parameters.put("startTime", startTime);
        parameters.put("endTime", endTime);
        String mac = parameters.get("mac").toString();
        if (mac != null && mac.length() != 0) {
            List<Map<String, Object>> sensorData = historyService.getUavSensorData(parameters);
            Map<String, String> sensorsMap = sensorService.getSensorsMap(parameters);
            JSONObject params = new JSONObject();
            params.put("sensorInfo", sensorData);
            params.put("sensorsMap", sensorsMap);
            params.put("sensorKey",parameters.get("sensorKey"));
            params.put("unit",parameters.get("unit"));
            params.put("description",parameters.get("description"));
            String paramsJson = params.toJSONString();
            model.addObject("uavDroppointParams", paramsJson);
            model.setViewName("uavtracing");
            return model;
        } else {
            StringBuilder msg = new StringBuilder();
            msg.append(" param[0] mac:");
            msg.append(mac);
            log.warn(msg);
            model.setViewName("403");
            return model;
        }
    }
}

 src/main/java/com/moral/mapper/HistoryMapper.java

@@ -30,6 +30,8 @@


    List<Map<String, Object>> getCarSensorData(Map<String, Object> parameters);



    List<Map<String, Object>> getUavSensorData(Map<String, Object> parameters);



    List<Map<String, Object>> listGetSensorData(Map<String, Object> parameters);



    //获取臭氧平缓平均值


 src/main/java/com/moral/service/HistoryService.java

@@ -31,6 +31,8 @@


    List<List<Map<String, Object>>> getCarSensorData(Map<String, Object> parameters) throws Exception;



    List<Map<String, Object>> getUavSensorData(Map<String, Object> parameters);



    //获取一天的所有臭氧值

    List<Map<String, Object>> getO3AVG(Map<String, Object> parameters);




 src/main/java/com/moral/service/impl/HistoryServiceImpl.java

@@ -34,8 +34,8 @@
import com.moral.service.HistoryService;

import com.moral.service.ProfessionService;

import com.moral.util.AQICalculation;



import com.moral.util.DatesUtil;



import org.apache.commons.collections.CollectionUtils;

import org.springframework.stereotype.Service;

import org.springframework.util.ObjectUtils;

@@ -543,10 +543,34 @@
    }



    @Override

    public List<Map<String,Object>> getO3AVG(Map<String, Object> parameters) {

        String mac= (String) parameters.get("mac");

        String stime= (String) parameters.get("time");

        SimpleDateFormat format=new SimpleDateFormat("yyyy-MM");

    public List<Map<String, Object>> getUavSensorData(Map<String, Object> parameters) {

        List<Sensor> sensors = sensorMapper.getSensorsByMac(parameters);

        List<String> sensorKeys = new ArrayList<>();

        for (Sensor sensor : sensors) {

            sensorKeys.add(sensor.getSensorKey());

        }

        parameters.put("sensorKeys", sensorKeys);

        List<Map<String, Object>> uavSensorData = historyMapper.getUavSensorData(parameters);

        for (Map<String, Object> dataMap : uavSensorData) {

            for (Map.Entry<String, Object> entry : dataMap.entrySet()) {

                for (Sensor sensor : sensors) {

                    if (sensor.getSensorKey().equals(entry.getKey())) {

                        dataMap.put(entry.getKey(), new BigDecimal(entry.getValue().toString().replace("\"", "")).stripTrailingZeros().toPlainString() + sensor.getUnit());

                    }

                }

            }

        }

        Map<String, Object> map = sensorMapper.getSensorBySensorKey(parameters.get("sensorKey").toString());

        parameters.put("unit",map.get("unit"));

        parameters.put("description",map.get("description"));

        return uavSensorData;

    }



    @Override

    public List<Map<String, Object>> getO3AVG(Map<String, Object> parameters) {

        String mac = (String) parameters.get("mac");

        String stime = (String) parameters.get("time");

        SimpleDateFormat format = new SimpleDateFormat("yyyy-MM");

        Date time = null;

        try {

            time = format.parse(stime);

@@ -554,7 +578,7 @@
            e.printStackTrace();

        }

        List<String> stringListDate = DatesUtil.getAllTheDateOftheMonth(time);

        List<Map<String,Object>> maxList=new ArrayList<Map<String,Object>>();

        List<Map<String, Object>> maxList = new ArrayList<Map<String, Object>>();

        for (String date : stringListDate) {

            Map<String, Object> parm = new HashMap<String, Object>();

            DateTimeFormatter df = DateTimeFormatter.ofPattern("yyyy-MM-dd HH:mm:ss");

@@ -566,53 +590,54 @@
            parm.put("nextDate", nextDate);

            parm.put("mac", mac);

            List<Map<String, Object>> listMap = historyMapper.getO3AVG(parm);

            List list=new ArrayList();

            DatesUtil.getList(listMap,list);

            List list1=new ArrayList();

            String maxO3="";

            for (int i = 0; i <list.size() ; i++) {

                List elist=new ArrayList();

                Double sum=0.0;

                Double avg=0.0;

                for (Object o : (List)list.get(i)) {

                    Iterator<Map.Entry> iterator= ((Map)o).entrySet().iterator();

                    while(iterator.hasNext()) {

            List list = new ArrayList();

            DatesUtil.getList(listMap, list);

            List list1 = new ArrayList();

            String maxO3 = "";

            for (int i = 0; i < list.size(); i++) {

                List elist = new ArrayList();

                Double sum = 0.0;

                Double avg = 0.0;

                for (Object o : (List) list.get(i)) {

                    Iterator<Map.Entry> iterator = ((Map) o).entrySet().iterator();

                    while (iterator.hasNext()) {

                        Map.Entry entry = iterator.next();

                        if (entry.getKey().equals("e15")){

                        if (entry.getKey().equals("e15")) {

                            elist.add(entry.getValue());

                        }

                    }

                }

                for (int j = 0; j <elist.size(); j++) {

                    sum+=Double.parseDouble((String) elist.get(j));

                    if (listMap.size()<=8 && listMap.size()>0){

                        avg=sum/listMap.size();

                    }else {

                        avg=sum/8;

                for (int j = 0; j < elist.size(); j++) {

                    sum += Double.parseDouble((String) elist.get(j));

                    if (listMap.size() <= 8 && listMap.size() > 0) {

                        avg = sum / listMap.size();

                    } else {

                        avg = sum / 8;

                    }

                }

                if (avg==0.0){

                if (avg == 0.0) {

                    list1.add("");

                }else {

                } else {

                    BigDecimal b = new BigDecimal(avg);

                    double avg1 = b.setScale(4,BigDecimal.ROUND_HALF_UP).doubleValue();

                    double avg1 = b.setScale(4, BigDecimal.ROUND_HALF_UP).doubleValue();

                    list1.add(avg1);

                }

            }

            String timef=date+" 00:00:00";

            String timea=date+" 23:59:59";

            int num=historyMapper.getNum(timef,timea);

            if (num==0) {

            String timef = date + " 00:00:00";

            String timea = date + " 23:59:59";

            int num = historyMapper.getNum(timef, timea);

            if (num == 0) {

                maxO3 = "";

            }else {

            if (list1.size()!=0){

                maxO3= ""+ Collections.max(list1);

            }else {

                maxO3="";

            }}

            Map<String,Object>  avgMap=new HashMap<String,Object>();

            avgMap.put("time",date);

            avgMap.put("e15",maxO3);

            } else {

                if (list1.size() != 0) {

                    maxO3 = "" + Collections.max(list1);

                } else {

                    maxO3 = "";

                }

            }

            Map<String, Object> avgMap = new HashMap<String, Object>();

            avgMap.put("time", date);

            avgMap.put("e15", maxO3);

            maxList.add(avgMap);

        }

        return maxList;


 src/main/resources/mapper/HistoryMapper.xml

@@ -236,6 +236,26 @@
        h.time

    </select>



    <!-- 无人机落点 -->

    <select id="getUavSensorData" resultType="java.util.LinkedHashMap">

        SELECT

        DATE_FORMAT(h.time,'%Y-%m-%d %H:%i:%s') time,

        <foreach collection="sensorKeys" item="sensorKey" separator=",">

            h.value->'$.${sensorKey}' as '${sensorKey}'

        </foreach>

        FROM

        history_special as h

        <where>

            <if test="mac!=null">

                and h.mac = #{mac}

            </if>

            and h.time >= #{startTime}

            and h.time <![CDATA[<]]> #{endTime}

        </where>

        ORDER BY

        h.time

    </select>



    <select id="listGetSensorData" resultType="java.util.LinkedHashMap">

        SELECT

        DATE_FORMAT(h.time,'%Y-%m-%d %H:%i:%s') time,


 src/main/webapp/img/uav_green.png

 src/main/webapp/img/uav_red.png

 src/main/webapp/view/uavchannel.jsp

New file
@@ -0,0 +1,185 @@
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>
    <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;
        }

        #cpm {
            width: 300px;
            height: 100px;
            position: absolute;
            background-color: #ffffff;
            display: none;
            left: 50%;
            top: 50%;
            margin-left: -150px;
            margin-top: -50px;
            z-index: 11;
            color: #000000;
            border: 2px solid #FF7F50;
            font-size: 28px;
            line-height: 100px;
            text-align: center;
        }

        #data {
            overflow: scroll;
            width: 300px;
            height: 400px;
            top: 20px;
            right: 5px;
            position: absolute;
            z-index: 1;
            background-color: gainsboro;
            opacity: 0.8;
            border: 2px solid red;
        }

        .trr {
            border-collapse: collapse;
        }

        .trr th, td {
            border: 1px solid black;
            text-align: center;
        }

        table {
            border-collapse: collapse;
            font-size: 12px;
        }
    </style>
    <script type="text/javascript"
            src="http://api.map.baidu.com/api?v=2.0&ak=dmzBXk6VTBG1SKUvqSSEgGBU8HcuoajQ"></script>
    <script type="text/javascript" src="../js/jquery.min.js"></script>
</head>
<body>

<div id="data">
    <%--存放数据的表--%>
    <table id="tab" style="border:1px solid black;width: 280px">
    </table>
</div>
<div class="main_body">
    <div id="cpm">查无落点</div>
    <div id="mapCanvas"></div> <!-- 百度地图容器-->
    <!-- 传sensorInfo,regionCode,regionName,monitorPoint,device-->
    <div id="uavDroppointParams" style="display: none;">
        ${requestScope.uavDroppointParams}
    </div>
</div>
</body>
</html>
<script type="text/javascript">
    var mapStyle = {
        features: ["road", "building", "water", "land"], // 隐藏地图上的poi
        style: "normal" // 设置地图风格为高端黑
    };
    var params = $.parseJSON($("#uavDroppointParams").html());
    var sensorInfo = params["sensorInfo"];
    var sensorKey = params['sensorKey'];
    var unit = params['unit'];
    var description=params['description'];
    var backgroundValue=32;
    $("#tab").append("<tr><td>经度(°)</td><td>纬度(°)</td><td>高度(m)</td><td>"+description+"(" + unit + ")</td></tr>");//控制输出的数据格式
    var map = new BMap.Map("mapCanvas", {enableMapClick: false});
    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());
    if (sensorInfo.length == 0) {
        showNoDroppoint();
    }
    var trackPoints = []; //用来存放从后台获取到的所有历史轨迹点的数据
    if (sensorInfo.length > 0) {
        $.each(sensorInfo, function (item, value) {
                if (typeof (value.e76) == "undefined" || typeof (value.e78) == "undefined") {
                    showNoDroppoint();
                } else {
                    var lon = parseFloat(value.e76.substr(0, value.e76.length - 1)).toFixed(4);
                    var lat = parseFloat(value.e77.substr(0, value.e77.length - 1)).toFixed(4);
                    if (lon <= 0 || lat <= 0 || lon > 180 || lat > 180) {
                        return true;
                    }
                    var heigh = parseFloat(value.e78.substr(0, value.e78.length - 1));
                    var concentration = "";
                    $.each(value, function (key, data) {
                        if (key == sensorKey) {
                            concentration = data == "undefined" ? "" : parseFloat(data.substr(0, data.length - 1));
                        }
                    });
                    var point = new BMap.Point(lon, lat);
                    var myIcon = "";
                     if (concentration > backgroundValue) {
                         myIcon = new BMap.Icon('/img/uav_red.png', new BMap.Size(20, 20));
                     } else if (concentration == backgroundValue) {
                         myIcon = new BMap.Icon('/img/uav_green.png', new BMap.Size(20, 20));
                     } else {
                         return true;
                     }
                    //var myIcon = new BMap.Icon('/img/uav_red.png', new BMap.Size(20, 20));
                    var marker = new BMap.Marker(point, {icon: myIcon});
                    map.addOverlay(marker);
                    trackPoints.push(point);
                    $("#tab").append("<tr><td>" + lon + "</td><td>" + lat + "</td><td>" + heigh + "</td><td>" + concentration + "</td></tr>");//控制输出的数据格式
                    var opts = {
                        width: 80,     // 信息窗口宽度
                        height: 80,     // 信息窗口高度
                    }
                    var msg = "经度： " + value.e76 + "<br>纬度： " + value.e77 + "<br>高度： " + value.e78 + "<br>" +description+":  "+concentration+unit;
                    if (concentration == "") {
                        msg = "经度： " + value.e76 + "<br>纬度： " + value.e77 + "<br>高度： " + value.e78;
                    }
                    var infoWindow = new BMap.InfoWindow(msg, opts);  // 创建信息窗口对象
                    marker.addEventListener("click", function () {
                        map.openInfoWindow(infoWindow, point); //开启信息窗口
                    });
                }
            }
        )
        map.centerAndZoom(trackPoints, 17);// 根据经纬度显示地图的范围
        map.setViewport(trackPoints);// 根据提供的地理区域或坐标设置地图视野
    }

    function showNoDroppoint() {
        var point = new BMap.Point(120.987287, 31.391562);
        map.centerAndZoom(point, 17);
        setTimeout(function () {
            document.getElementById("cpm").style.display = 'block';
            document.getElementById("data").style.display = 'none';
        }, 250);
    }
</script>

 src/main/webapp/view/uavdroppoint.jsp

New file
@@ -0,0 +1,185 @@
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>
    <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;
        }

        #cpm {
            width: 300px;
            height: 100px;
            position: absolute;
            background-color: #ffffff;
            display: none;
            left: 50%;
            top: 50%;
            margin-left: -150px;
            margin-top: -50px;
            z-index: 11;
            color: #000000;
            border: 2px solid #FF7F50;
            font-size: 28px;
            line-height: 100px;
            text-align: center;
        }

        #data {
            overflow: scroll;
            width: 300px;
            height: 400px;
            top: 20px;
            right: 5px;
            position: absolute;
            z-index: 1;
            background-color: gainsboro;
            opacity: 0.8;
            border: 2px solid red;
        }

        .trr {
            border-collapse: collapse;
        }

        .trr th, td {
            border: 1px solid black;
            text-align: center;
        }

        table {
            border-collapse: collapse;
            font-size: 12px;
        }
    </style>
    <script type="text/javascript"
            src="http://api.map.baidu.com/api?v=2.0&ak=dmzBXk6VTBG1SKUvqSSEgGBU8HcuoajQ"></script>
    <script type="text/javascript" src="../js/jquery.min.js"></script>
</head>
<body>

<div id="data">
    <%--存放数据的表--%>
    <table id="tab" style="border:1px solid black;width: 280px">
    </table>
</div>
<div class="main_body">
    <div id="cpm">查无落点</div>
    <div id="mapCanvas"></div> <!-- 百度地图容器-->
    <!-- 传sensorInfo,regionCode,regionName,monitorPoint,device-->
    <div id="uavDroppointParams" style="display: none;">
        ${requestScope.uavDroppointParams}
    </div>
</div>
</body>
</html>
<script type="text/javascript">
    var mapStyle = {
        features: ["road", "building", "water", "land"], // 隐藏地图上的poi
        style: "normal" // 设置地图风格为高端黑
    };
    var params = $.parseJSON($("#uavDroppointParams").html());
    var sensorInfo = params["sensorInfo"];
    var sensorKey = params['sensorKey'];
    var unit = params['unit'];
    var description=params['description'];
    var backgroundValue=32;
    $("#tab").append("<tr><td>经度(°)</td><td>纬度(°)</td><td>高度(m)</td><td>"+description+"(" + unit + ")</td></tr>");//控制输出的数据格式
    var map = new BMap.Map("mapCanvas", {enableMapClick: false});
    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());
    if (sensorInfo.length == 0) {
        showNoDroppoint();
    }
    var trackPoints = []; //用来存放从后台获取到的所有历史轨迹点的数据
    if (sensorInfo.length > 0) {
        $.each(sensorInfo, function (item, value) {
                if (typeof (value.e76) == "undefined" || typeof (value.e78) == "undefined") {
                    showNoDroppoint();
                } else {
                    var lon = parseFloat(value.e76.substr(0, value.e76.length - 1)).toFixed(4);
                    var lat = parseFloat(value.e77.substr(0, value.e77.length - 1)).toFixed(4);
                    if (lon <= 0 || lat <= 0 || lon > 180 || lat > 180) {
                        return true;
                    }
                    var heigh = parseFloat(value.e78.substr(0, value.e78.length - 1));
                    var concentration = "";
                    $.each(value, function (key, data) {
                        if (key == sensorKey) {
                            concentration = data == "undefined" ? "" : parseFloat(data.substr(0, data.length - 1));
                        }
                    });
                    var point = new BMap.Point(lon, lat);
                    var myIcon = "";
                     if (concentration > backgroundValue) {
                         myIcon = new BMap.Icon('/img/uav_red.png', new BMap.Size(20, 20));
                     } else if (concentration == backgroundValue) {
                         myIcon = new BMap.Icon('/img/uav_green.png', new BMap.Size(20, 20));
                     } else {
                         return true;
                     }
                    //var myIcon = new BMap.Icon('/img/uav_red.png', new BMap.Size(20, 20));
                    var marker = new BMap.Marker(point, {icon: myIcon});
                    map.addOverlay(marker);
                    trackPoints.push(point);
                    $("#tab").append("<tr><td>" + lon + "</td><td>" + lat + "</td><td>" + heigh + "</td><td>" + concentration + "</td></tr>");//控制输出的数据格式
                    var opts = {
                        width: 80,     // 信息窗口宽度
                        height: 80,     // 信息窗口高度
                    }
                    var msg = "经度： " + value.e76 + "<br>纬度： " + value.e77 + "<br>高度： " + value.e78 + "<br>" +description+":  "+concentration+unit;
                    if (concentration == "") {
                        msg = "经度： " + value.e76 + "<br>纬度： " + value.e77 + "<br>高度： " + value.e78;
                    }
                    var infoWindow = new BMap.InfoWindow(msg, opts);  // 创建信息窗口对象
                    marker.addEventListener("click", function () {
                        map.openInfoWindow(infoWindow, point); //开启信息窗口
                    });
                }
            }
        )
        map.centerAndZoom(trackPoints, 17);// 根据经纬度显示地图的范围
        map.setViewport(trackPoints);// 根据提供的地理区域或坐标设置地图视野
    }

    function showNoDroppoint() {
        var point = new BMap.Point(120.987287, 31.391562);
        map.centerAndZoom(point, 17);
        setTimeout(function () {
            document.getElementById("cpm").style.display = 'block';
            document.getElementById("data").style.display = 'none';
        }, 250);
    }
</script>

 src/main/webapp/view/uavtracing.jsp

New file
@@ -0,0 +1,185 @@
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>
    <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;
        }

        #cpm {
            width: 300px;
            height: 100px;
            position: absolute;
            background-color: #ffffff;
            display: none;
            left: 50%;
            top: 50%;
            margin-left: -150px;
            margin-top: -50px;
            z-index: 11;
            color: #000000;
            border: 2px solid #FF7F50;
            font-size: 28px;
            line-height: 100px;
            text-align: center;
        }

        #data {
            overflow: scroll;
            width: 300px;
            height: 400px;
            top: 20px;
            right: 5px;
            position: absolute;
            z-index: 1;
            background-color: gainsboro;
            opacity: 0.8;
            border: 2px solid red;
        }

        .trr {
            border-collapse: collapse;
        }

        .trr th, td {
            border: 1px solid black;
            text-align: center;
        }

        table {
            border-collapse: collapse;
            font-size: 12px;
        }
    </style>
    <script type="text/javascript"
            src="http://api.map.baidu.com/api?v=2.0&ak=dmzBXk6VTBG1SKUvqSSEgGBU8HcuoajQ"></script>
    <script type="text/javascript" src="../js/jquery.min.js"></script>
</head>
<body>

<div id="data">
    <%--存放数据的表--%>
    <table id="tab" style="border:1px solid black;width: 280px">
    </table>
</div>
<div class="main_body">
    <div id="cpm">查无落点</div>
    <div id="mapCanvas"></div> <!-- 百度地图容器-->
    <!-- 传sensorInfo,regionCode,regionName,monitorPoint,device-->
    <div id="uavDroppointParams" style="display: none;">
        ${requestScope.uavDroppointParams}
    </div>
</div>
</body>
</html>
<script type="text/javascript">
    var mapStyle = {
        features: ["road", "building", "water", "land"], // 隐藏地图上的poi
        style: "normal" // 设置地图风格为高端黑
    };
    var params = $.parseJSON($("#uavDroppointParams").html());
    var sensorInfo = params["sensorInfo"];
    var sensorKey = params['sensorKey'];
    var unit = params['unit'];
    var description=params['description'];
    var backgroundValue=32;
    $("#tab").append("<tr><td>经度(°)</td><td>纬度(°)</td><td>高度(m)</td><td>"+description+"(" + unit + ")</td></tr>");//控制输出的数据格式
    var map = new BMap.Map("mapCanvas", {enableMapClick: false});
    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());
    if (sensorInfo.length == 0) {
        showNoDroppoint();
    }
    var trackPoints = []; //用来存放从后台获取到的所有历史轨迹点的数据
    if (sensorInfo.length > 0) {
        $.each(sensorInfo, function (item, value) {
                if (typeof (value.e76) == "undefined" || typeof (value.e78) == "undefined") {
                    showNoDroppoint();
                } else {
                    var lon = parseFloat(value.e76.substr(0, value.e76.length - 1)).toFixed(4);
                    var lat = parseFloat(value.e77.substr(0, value.e77.length - 1)).toFixed(4);
                    if (lon <= 0 || lat <= 0 || lon > 180 || lat > 180) {
                        return true;
                    }
                    var heigh = parseFloat(value.e78.substr(0, value.e78.length - 1));
                    var concentration = "";
                    $.each(value, function (key, data) {
                        if (key == sensorKey) {
                            concentration = data == "undefined" ? "" : parseFloat(data.substr(0, data.length - 1));
                        }
                    });
                    var point = new BMap.Point(lon, lat);
                    var myIcon = "";
                     if (concentration > backgroundValue) {
                         myIcon = new BMap.Icon('/img/uav_red.png', new BMap.Size(20, 20));
                     } else if (concentration == backgroundValue) {
                         myIcon = new BMap.Icon('/img/uav_green.png', new BMap.Size(20, 20));
                     } else {
                         return true;
                     }
                    //var myIcon = new BMap.Icon('/img/uav_red.png', new BMap.Size(20, 20));
                    var marker = new BMap.Marker(point, {icon: myIcon});
                    map.addOverlay(marker);
                    trackPoints.push(point);
                    $("#tab").append("<tr><td>" + lon + "</td><td>" + lat + "</td><td>" + heigh + "</td><td>" + concentration + "</td></tr>");//控制输出的数据格式
                    var opts = {
                        width: 80,     // 信息窗口宽度
                        height: 80,     // 信息窗口高度
                    }
                    var msg = "经度： " + value.e76 + "<br>纬度： " + value.e77 + "<br>高度： " + value.e78 + "<br>" +description+":  "+concentration+unit;
                    if (concentration == "") {
                        msg = "经度： " + value.e76 + "<br>纬度： " + value.e77 + "<br>高度： " + value.e78;
                    }
                    var infoWindow = new BMap.InfoWindow(msg, opts);  // 创建信息窗口对象
                    marker.addEventListener("click", function () {
                        map.openInfoWindow(infoWindow, point); //开启信息窗口
                    });
                }
            }
        )
        map.centerAndZoom(trackPoints, 17);// 根据经纬度显示地图的范围
        map.setViewport(trackPoints);// 根据提供的地理区域或坐标设置地图视野
    }

    function showNoDroppoint() {
        var point = new BMap.Point(120.987287, 31.391562);
        map.centerAndZoom(point, 17);
        setTimeout(function () {
            document.getElementById("cpm").style.display = 'block';
            document.getElementById("data").style.display = 'none';
        }, 250);
    }
</script>