<!DOCTYPE html>
<html lang="zh-CN" xmlns="http://www.w3.org/1999/html"
      xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8"/>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>
    <title>设备位置信息</title>

    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=Z2045g3IUDzxUdIWhvjRi2IqMQTYXWrX"></script>
    <script type="text/javascript" src="http://api.map.baidu.com/library/CurveLine/1.5/src/CurveLine.min.js"></script>
    <script type="text/javascript" src="../static/js/map.js" th:src="@{/js/map.js}"></script>
    <style type="text/css">
        body, html {
            width: 100%;
            height: 100%;
            margin: 0;
            font-family: "微软雅黑";
        }

        #map {
            width: 100%;
            height: 100%;
        }

        p {
            margin-left: 5px;
            font-size: 14px;
        }

        .BMapLabel {
            border-radius: 20px 20px 20px 20px;
        }

        .anchorBL {
            display: none;
        }

        .BMap_cpyCtrl {
            display: none;
        }
    </style>
</head>
<body>
<div id="map"></div>

<script type="text/javascript">
    let top_left_control = new BMap.ScaleControl({anchor: BMAP_ANCHOR_TOP_LEFT});  // 左上角，添加比例尺
    let top_left_navigation = new BMap.NavigationControl();  // 左上角，添加默认缩放平移控件
    let top_right_navigation = new BMap.NavigationControl({anchor: BMAP_ANCHOR_TOP_RIGHT, type: BMAP_NAVIGATION_CONTROL_SMALL}); //右上角，仅包含平移和缩放按钮
    /*缩放控件type有四种类型:
    BMAP_NAVIGATION_CONTROL_SMALL：仅包含平移和缩放按钮；BMAP_NAVIGATION_CONTROL_PAN:仅包含平移按钮；BMAP_NAVIGATION_CONTROL_ZOOM：仅包含缩放按钮*/

    // 百度地图 API 功能
    let map = new BMap.Map("map");
    // 初始化地图,设置中心点坐标和地图级别
    let point = new BMap.Point(116.331398, 39.897445);
    // IP 定位
    let myCity = new BMap.LocalCity();
    myCity.get(getCity);
    map.centerAndZoom(point, 18);
    // 添加地图类型控件
    map.addControl(new BMap.MapTypeControl({mapTypes: [BMAP_NORMAL_MAP, BMAP_HYBRID_MAP]}));
    map.setCurrentCity("郑州");          // 设置地图显示的城市 此项是必须设置的
    map.enableScrollWheelZoom(true);     // 开启鼠标滚轮缩放
    map.addControl(top_left_control);
    map.addControl(top_left_navigation);

    let icon = new BMap.Icon("/images/car.png", new BMap.Size(64, 64));
    let marker = new BMap.Marker(point, {icon: icon});  // 创建标注
    let label = new BMap.Label("物联网汽车：" + new Date(), {offset: new BMap.Size(52, 0)});
    label.setStyle({
        color: "#2b2b2b",
        fontSize: "14px",
        backgroundColor: "rgba(255,255,255,1.0)",
        border: "1px solid rgb(43, 43, 43)",
        fontWeight: "normal",
        padding: "2px 8px 2px 8px"
    });

    marker.setLabel(label);                 // 创建标注的文字标签
    map.addOverlay(marker);                 // 将标注添加到地图中
    let circle = new BMap.Circle(point, 100, {fillColor: "gray", strokeWeight: 1, fillOpacity: 0.3, strokeOpacity: 0.3});
    map.addOverlay(circle);

    function updateLocation(data) {
        let device = JSON.parse(data);
        let newPoint = new BMap.Point(device.latitude, device.longitude);
        label.setContent("物联网汽车：" + device.remark);
        // 坐标转换
        let convertor = new BMap.Convertor();
        let pointArr = [];
        pointArr.push(newPoint);
        convertor.translate(pointArr, 1, 5, translateCallback);
    }

    // 坐标转换完之后的回调函数
    translateCallback = function (data) {
        if (data.status === 0) {
            moveCar(point, data.points[0], 50, marker, 10);
            point = data.points[0];
        }
    };

    let websocket = null;
    if ('WebSocket' in window) {
        websocket = new WebSocket("ws://127.0.0.1/ws/map");
    } else {
        alert('抱歉，浏览器不支持，请更换浏览器！')
    }

    websocket.onerror = function () {
        setMessageInnerHTML("连接错误");
    };

    websocket.onopen = function (event) {
        setMessageInnerHTML("连接打开");
    };

    websocket.onmessage = function (event) {
        console.log(event.data);
        //showMessage(JSON.parse(event.data));
        updateLocation(event.data);
    };

    websocket.onclose = function () {
        setMessageInnerHTML("连接关闭");
        if (window.confirm('连接已关闭，是否刷新页面？')) {
            window.location.reload();
            return true;
        } else {
            return false;
        }
    };

    window.onbeforeunload = function () {
        closeWebSocket();
    };

    function setMessageInnerHTML(message) {
        console.log(message);
    }

    function closeWebSocket() {
        websocket.close();
    }
</script>
</body>
</html>