<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ include file="../../include/importer.jsp"%>
<c:set var="ctx" value="${pageContext.request.contextPath}" />
<!DOCTYPE html>
<html lang="zh-CN" style="height: 100%;">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>
     <%--加载地图文件--%>
    <link rel="stylesheet" type="text/css" href="${ctx}/css/plugin/map/SearchInfoWindow_min.css">
    <link rel="stylesheet" type="text/css" href="${ctx}/css/plugin/map/bmap.css">

    <title>地图监控台</title>
    <style type="text/css">
        body, html, #allmap {
            width: 100%;
            height: 100%;
            overflow: hidden;
            margin: 0;
            font-family: "微软雅黑";
        }

        #rightContent label {
            max-width: none;
        }

        .line {
            width: 65px;
            display: block;
            height: 0;
            float: left;
            margin-top: 10px;
            margin-right: 3px;
        }
    </style>
    <script type="text/javascript">
    /**
     * Created by njcn on 2017/2/20.
     */
    $(document).ready(function () {
        initMap();
    });

    /********************************************
     JS初始化百度地图
     *******************************************/
    var map;
    function initMap() {
        map = new BMap.Map("rightContent", {maxZoom: 15, enableMapClick: false});
        //map = new BMap.Map("rightContent", {enableMapClick: false});    // 创建Map实例 关闭底图可点功能
        //map.setMapStyle({style:'googlelite'});
        var point = new BMap.Point(104.054989, 30.664836); //地图加载中心点(成都电科院地址)
        map.centerAndZoom(point, 14);  //设初始化地图
        map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放
        map.addControl(new BMap.NavigationControl());  //添加移图，放大缩小控件
       /* map.addControl(new BMap.MapTypeControl({mapTypes: [BMAP_NORMAL_MAP, BMAP_HYBRID_MAP]}));   //添加地图类型切换控件 [地图/混合]*/

        drawPoint(104.054989, 30.664836, 1, "监测点1");
        drawPoint(104.051253, 30.654647, 1, "监测点2");
        drawPoint(104.079998, 30.668377, 1, "监测点3");
        drawPoint(104.06311, 30.649863, 1, "监测点4");
        drawPoint(104.035299, 30.654833, 1, "监测点5");

        //画出一个区域
        var oval = new BMap.Polygon(add_oval(point, 0.03, 0.02), {strokeColor: "red", strokeWeight: 6, strokeOpacity: 0.5});
        map.addOverlay(oval);

    }

    function add_oval(centre, x, y) {
        var assemble = new Array();
        var angle;
        var dot;
        var tangent = x / y;
        for (i = 0; i < 36; i++) {
            angle = (2 * Math.PI / 36) * i;
            dot = new BMap.Point(centre.lng + Math.sin(angle) * y * tangent, centre.lat + Math.cos(angle) * y);
            assemble.push(dot);
        }
        return assemble;
    }

    /************************************
     获取监测点经纬度信息加载到地图
     lon---经度
     lat---纬度
     state---井盖的状态
     strInfo---井盖基本信息描述
     ***********************************/
    function drawPoint(lon, lat, state, strInfo) {
        //创建图标
        var redIcon = new BMap.Icon("${ctx}/images/img/red.png", new BMap.Size(15, 15));
        var greenIcon = new BMap.Icon("${ctx}/images/img/yellow.png", new BMap.Size(15, 15));
        var yellowIcon = new BMap.Icon("${ctx}/images/img/green.png", new BMap.Size(15, 15));
        var point = new BMap.Point(lon, lat);

        var redMarkerOptions = {
            icon: redIcon,
            enableDragging: false
        }

        var greenMarkerOptions = {
            icon: greenIcon,
            enableDragging: false
        }

        var yellowMarkerOptions = {
            icon: yellowIcon,
            enableDragging: false
        }

        var strState;
        var marker;
        if (state == 3) {
            marker = new BMap.Marker(point, redMarkerOptions);
            map.addOverlay(marker);// 将标注添加到地图中
            strState = '中断';
        } else if (state == 2) {
            marker = new BMap.Marker(point, yellowMarkerOptions);
            map.addOverlay(marker);// 将标注添加到地图中
            strState = '检修';
        } else if (state == 1) {
            marker = new BMap.Marker(point, greenMarkerOptions);
            map.addOverlay(marker);// 将标注添加到地图中
            strState = '投运';
        }

        //添加lable信息
        var lable = new BMap.Label(strInfo, {offset: new BMap.Size(-21, -21)});
        marker.setLabel(lable);
        lable.setStyle({
            color: "red"
        });

        var showInfo = '状态:' + strState + '<br/>' + '经度:' + lon + '<br/>' + '纬度:' + lat + '<br/>';
        var searchInfoWindow = new BMapLib.SearchInfoWindow(map, showInfo, {
            title: strInfo, //标题
            width: 50, //宽度
            height: 70, //高度
            searchTypes: [],
            enableSendToPhone: false
        });

        marker.addEventListener("click", function () {
            searchInfoWindow.open(point);
        });
    }
    </script>
</head>

<body style="height: 100%; overflow: hidden;">
<div id="rightContent" style="width:100%; height: 100%;">
</div>
<div style="float: right; background-color: white;width: 130px;padding:10px;position:absolute;right:0;top:0;filter:alpha(Opacity=80);-moz-opacity:0.8;opacity: 0.8; ">
    <dl>
        <dd><img src="${ctx}/images/img/red.png"><label style="margin-left: 5px;color: #002a80">监测点异常</label></dd>
        <dd><img src="${ctx}/images/img/yellow.png"><label style="margin-left: 5px;color: #002a80">监测点检修</label></dd>
        <dd><img src="${ctx}/images/img/green.png"><label style="margin-left: 5px;color: #002a80">监测点投运</label></dd>
    </dl>
</div>
<script type="text/javascript" src="${ctx}/js/plugin/map/apiv2.0.min.js"></script>
<script type="text/javascript" src="${ctx}/js/plugin/map/SearchInfoWindow_min.js"></script>
<script src="${ctx}/jspJS/utils/judgeAjaxStatus.js"></script>
</body>
</html>