yf_zd
/
yfwlwCut


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298
							{% load staticfiles %}
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <link href="{% static '/lib/bootstrap-3.3.7/css/bootstrap.css' %}" rel="stylesheet">
    <link rel="stylesheet" href="{% static '/lib/font-awesome/4.5.0/css/font-awesome.css' %}">
    <link rel="stylesheet" href="{% static '/lib/css/ace.min.css' %}" />
    <link rel="stylesheet" href="{% static '/lib/layui/css/layui.css' %}">
    <!-- <link rel="stylesheet" href="{% static '/lib/css/ace-skins.min.css' %}"> -->
    <!-- <link rel="stylesheet" href="{% static '/lib/css/ace-rtl.min.css' %}"> -->

    <style>
        body {
            background: #fff;
        }

        .frameParent {
            /* display: flex; */
            /* justify-content: center; */
            /* align-items: center; */
            display: table;
            width: 100%;
            background: gray
        }

        .frameLeft,
        .frameRight {
            display: table-cell;
        }

        /* 图像左 */

        .frameLeftTitle {
            line-height: 50px;
            color: #fff;
            background: #313a47;
            padding-left: 20px;
            letter-spacing: 1px;
        }

        .frameLeftTitle>span {
            margin-right: 30px;
        }

        .frameLeftTitle>span i {
            color: #18ff18;
        }

        /* 图像右 */

        .frameRight {
            background: #464e60;
            color: rgb(224, 224, 224);
            width: 200px;
            position: relative;
        }

        .frameRight a {
            color: rgb(214, 182, 0);
        }

        .frameRight .equipList {
            line-height: 50px;
        }

        .frameRight .equipList li {
            padding: 0 15px;
            cursor: pointer;
        }

        .frameRight .equipList li:hover,
        .frameRight .equipList li.active {
            background: #36404d;
        }

        /* 控制按钮 */

        .ctrlBtnBox {
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            text-align: center;
        }

        .ctrlBtnBox .majorKey img {
            width: 80%;
            margin-bottom: 15px;
        }

        .ctrlBtnBox .zoomKey img,
        .ctrlBtnBox .cruiseKey img {
            width: 60%;
            margin-bottom: 15px;
        }
    </style>

    <body>
        <div class="content">
            <!-- <div class="page-header">
                <h1>
                    <font style="vertical-align: inherit;">
                        <font style="vertical-align: inherit;">
                            无人机
                        </font>
                    </font>
                </h1>
            </div> -->
            <div class="frameParent">
                <!-- 图像 -->
                <div class="frameLeft">
                    <div class="frameLeftTitle">
                        <span>经度：116.405289</span>
                        <span>维度：39.90498</span>
                        <span>飞行时间：2小时15分钟</span>
                        <span>剩余电量：
                            <i class="fa fa-battery-2" aria-hidden="true"></i> 39%</span>
                    </div>
                    <div>
                        <div id="map"></div>
                    </div>
                </div>
                <!-- 控制 -->
                <div class="frameRight">
                    <!-- 设备列表 -->
                    <div>
                        <div>
                            <ul class="equipList">
                                <li class="active">
                                    <img src="{% static '/img/uavImg/icon.png' %}" alt="">
                                    <span id="123456">设备123456</span>
                                    <a href="#">
                                        <i class="fa fa-file-photo-o" aria-hidden="true"></i>
                                    </a>
                                </li>
                                <li>
                                    <img src="{% static '/img/uavImg/icon.png' %}" alt="">
                                    <span id="123456">设备123456</span>
                                    <a href="#">
                                        <i class="fa fa-file-photo-o" aria-hidden="true"></i>
                                    </a>
                                </li>
                                <li>
                                    <img src="{% static '/img/uavImg/icon.png' %}" alt="">
                                    <span id="123456">设备123456</span>
                                    <a href="#">
                                        <i class="fa fa-file-photo-o" aria-hidden="true"></i>
                                    </a>
                                </li>
                                <li>
                                    <img src="{% static '/img/uavImg/icon.png' %}" alt="">
                                    <span id="123456">设备123456</span>
                                </li>
                                <li>
                                    <img src="{% static '/img/uavImg/icon.png' %}" alt="">
                                    <span id="123456">设备123456</span>
                                </li>
                            </ul>
                        </div>
                    </div>
                    <!-- 控制按钮 -->
                    <div class="ctrlBtnBox">
                        <div>
                            <div class="majorKey">
                                <img src="{% static '/img/uavImg/ctrlImg.png' %}" alt="">
                            </div>
                            <div class="zoomKey">
                                <img src="{% static '/img/uavImg/ctrlImg2.png' %}" alt="">
                            </div>
                            <div class="cruiseKey">
                                <img src="{% static '/img/uavImg/ctrlImg3.png' %}" alt="">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <script src="{% static '/lib/js/jquery-2.1.4.min.js' %}"></script>
        <script src="{% static '/lib/bootstrap-3.3.7/js/bootstrap.js' %}"></script>
        <script type="text/javascript" src='//webapi.amap.com/maps?v=1.4.15&key=a223a998dc112437cb32afb43a8b2c24'></script>
        <script src="../../../../plug/ext/dat.gui.min.js?v=1.0.11"></script>
        <!-- UI组件库 1.0 -->
        <script src="//webapi.amap.com/ui/1.0/main.js?v=1.0.11"></script>
        <script src="{% static '/js/common.js' %}?versions=0.5.0"></script>
        <script>
            $.ajaxSetup({
                data: {
                    csrfmiddlewaretoken: '{{ csrf_token }}'
                },
            });
        </script>
        <script>
            getHeight()

            //创建地图
            var map = new AMap.Map('map', {
                zoom: 4
            });
            map.add(new AMap.TileLayer.Satellite());
            AMapUI.load(['ui/misc/PathSimplifier', 'lib/$'], function (PathSimplifier, $) {

                if (!PathSimplifier.supportCanvas) {
                    alert('当前环境不支持 Canvas！');
                    return;
                }

                 var defaultRenderOptions = {
                    pathNavigatorStyle: {
                        initRotateDegree: 0,
                        width: 16,
                        height: 16,
                        autoRotate: true,
                        lineJoin: 'round',
                        content: 'defaultPathNavigator',
                        fillStyle: '#087EC4',
                        strokeStyle: '#116394', //'#eeeeee',
                        lineWidth: 1,
                        pathLinePassedStyle: {
                            lineWidth: 2,
                            strokeStyle: 'rgba(8, 126, 196, 1)',
                            borderWidth: 1,
                            borderStyle: '#eeeeee',
                            dirArrowStyle: false
                        }
                    }
                };

                var pathSimplifierIns = new PathSimplifier({
                    zIndex: 100,
                    //autoSetFitView:false,
                    map: map, //所属的地图实例

                    getPath: function (pathData, pathIndex) {

                        return pathData.path;
                    },
                    getHoverTitle: function (pathData, pathIndex, pointIndex) {

                        if (pointIndex >= 0) {
                            //point 
                            return pathData.name + '，点：' + pointIndex + '/' + pathData.path.length;
                        }

                        return pathData.name + '，点数量' + pathData.path.length;
                    },
                    renderOptions: defaultRenderOptions,
                    // renderOptions: {

                    //     renderAllPointsIfNumberBelow: 100 //绘制路线节点，如不需要可设置为-1
                    // }
                });

                window.pathSimplifierIns = pathSimplifierIns;

                //设置数据
                pathSimplifierIns.setData([{
                    name: '路线0',
                    path: [
                        [114.342379,34.847584],
                        [114.117159,35.029959],
                        [113.614535,35.081671],
                        [113.235506,34.901663],
                        [113.172335,34.526887],
                        [113.740877,34.334327],
                        [114.323153,34.47709],
                        [114.342379,34.847584],
                    ]
                }]);
                pathSimplifierIns.setSelectedPathIndex(0);

                //对第一条线路（即索引 0）创建一个巡航器
                var navg1 = pathSimplifierIns.createPathNavigator(0, {
                    loop: true, //循环播放
                    speed: 50000 //巡航速度，单位千米/小时
                });

                navg1.start();
            });


            function getHeight() {
                var width = $('#map').css('width').replace("px", "");
                var height = width * (9 / 16)
                console.log(width)
                console.log(height)
                $('#map').css('height', height)
                scrollBar()
            }
            window.onresize = function () {
                getHeight()
            }
        </script>
    </body>

</html>