SIPAIIS_WMS_JSSW/WebRoot/jsp/timeefficiency/patrolRecordViewMap.jsp

<%@ page language="java" pageEncoding="UTF-8" %>
<%@ taglib uri="http://java.sun.com/jstl/core_rt" prefix="c" %>

<style type="text/css">
    #map_canvas {
        width: 100%;
        height: 100%;
    }

    #result {
        width: 100%
    }

    #btns {
        z-index: 999;
        position: fixed;
        bottom: 3.5rem;
        margin-left: 2.5rem;
        padding-left: 0;
        border-radius: .25rem;
        display: flex;
        box-shadow: 0 2px 6px 0 rgba(27, 142, 236, 0.5);
        text-align: center;
    }

    #btns li {
        border-right: 1px solid #d2d2d2;
        padding: 10px 10px;
        height: 100%;
        background-color: #fff;
        cursor: pointer;
        color: #3a79b5;
    }

    /*.modal-body {
        position: relative;
        padding: 15px;
    }*/
</style>

<script>
    window.BMAP_AUTHENTIC_KEY = '7Cc5Kmn672miPzG4qQhvlOrERcXMMinq';
</script>

<script type="text/javascript">
    var lushuArray = [];//多人巡检轨迹数

    // var map = new BMapGL.Map('map_canvas');
    var map = new BMapGL.Map('map_canvas', {
        minZoom: 19,
        maxZoom: 19
    });
    map.enableScrollWheelZoom();
    // 113.044283, 23.028002  沙口
    // 112.911564,23.370377   北江
    // 121.374879,30.73846   金山一厂
    var x1 = '121.374879';
    var y1 = '30.73846';
    map.centerAndZoom(new BMapGL.Point(x1, y1), 19);
    map.enableScrollWheelZoom(true);//禁止鼠标滚动
    map.setMapType(BMAP_EARTH_MAP);// 设置地图类型为地球模式
    // var lushu;
    //实例化一个轨迹用来生成路线
    var drv = new BMapGL.DrivingRoute('佛山', {
        onSearchComplete: function (res) {
            if (drv.getStatus() == BMAP_STATUS_SUCCESS) {

                var userName = '';//人员名称
                var userIcon = '';//人员头像

                $.post(ext.contextPath + "/timeEfficiency/patrolRecord/getGPS.do", {patrolRecordId: '${patrolRecord.id}'}, function (data) {
                    for (let i = 0; i < data.length; i++) {
                        var gpsStr = [];//gps数组

                        var str = data[i].data;
                        for (let j = 0; j < str.length; j++) {
                            gpsStr.push(str[j])
                        }

                        userName = data[i].userName;

                        if (data[i].icon != null && data[i].icon != '') {
                            userIcon = data[i].icon;
                        } else {
                            userIcon = ext.contextPath + '/IMG/sy/headportrait.png';
                        }

                        creatGPSLine(gpsStr, userName, userIcon);
                    }

                }, 'json');


            }
        }
    });

    //调用不同人员的巡检路线
    function creatGPSLine(gpsStr, userName, userIcon) {
        map.addOverlay(new BMapGL.Marker(gpsStr[0]));
        map.addOverlay(new BMapGL.Marker(gpsStr[gpsStr.length - 1]));
        map.addOverlay(new BMapGL.Polyline(gpsStr, {strokeColor: 'blue'}));
        map.setViewport(gpsStr);
        var lushu = new BMapGLLib.LuShu(map, gpsStr, {
            defaultContent: userName, // "信息窗口文案"
            autoView: false, // 是否开启自动视野调整，如果开启那么路书在运动过程中会根据视野自动调整
            speed: 50,
            icon: new BMapGL.Icon(userIcon, new BMapGL.Size(40, 40), {anchor: new BMapGL.Size(40, 40)}),
            enableRotation: false, // 是否设置marker随着道路的走向进行旋转
        });
        lushuArray.push(lushu);
    }

    var start = new BMapGL.Point(116.404844, 40);
    var end = new BMapGL.Point(116.308102, 40.056057);
    drv.search(start, end);

    //开始
    function run() {
        // lushu.start();
        for (var i = 0; i < lushuArray.length; i++) {
            // console.log(lushuArray[i]);
            lushuArray[i].start();//多人轨迹演示
        }
    }

    //停止
    function stop() {
        // lushu.stop();
        for (var i = 0; i < lushuArray.length; i++) {
            // console.log(lushuArray[i]);
            lushuArray[i].stop();//多人轨迹演示
        }
    }

    //暂停
    function pause() {
        // lushu.pause();
        for (var i = 0; i < lushuArray.length; i++) {
            // console.log(lushuArray[i]);
            lushuArray[i].pause();//多人轨迹演示
        }
    }

    /*$("hide").onclick = function () {
        //隐藏信息窗口
        lushu.hideInfoWindow();
    }
    $("show").onclick = function () {
        //展示信息窗口
        lushu.showInfoWindow();
    }*/

</script>
<div class="modal fade" id="subModal_recordMap">
    <div class="modal-dialog modal-xlg" style="width: 800px;height: 1000px;">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title">巡检轨迹</h4>
            </div>
            <div class="modal-body" style="width: 800px;height: 1000px;padding: 0px;">
                <div id="map_canvas"></div>
                <div id="result"></div>
                <ul id='btns'>
                    <li id="run" onclick="run();">开始</li>
                    <li id="stop" onclick="stop();">停止</li>
                    <li id="pause" onclick="pause();">暂停</li>
                    <%--<li id="hide" onclick="hide();">隐藏信息窗口</li>
                    <li id="show" onclick="show();">展示信息窗口</li>--%>
                </ul>
            </div>
        </div>
    </div>
</div>