fuyuhang
/
Project_yhfu
mirror of http://121.37.83.100:3000/sooka_onest/sooka_onest_forestfire_vue2_visualization.git


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510
							<!--********************************************************************
* Copyright© 2000 - 2021 SuperMap Software Co.Ltd. All rights reserved.
*********************************************************************-->
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title data-i18n="resources.title_planesMonitor"></title>
    <script type="text/javascript"
            include="jquery,bootstrap,moment,bootstrap-datetimepicker,bootstrap-select,geohash,randomcolor,widgets.alert"
            src="../js/include-web.js"></script>
    <style>
        .bootstrap-select {
            width: 168px !important;
        }
        .form-control.input-sm {
            width: 166px;
        }
        .form-group label {
            width: 100px;
        }

        .tips {
            z-index: 1000;
        }
    </style>
</head>
<body style=" margin: 0;overflow: hidden;background: #fff;width: 100%;height:100%;position: absolute;top: 0;">
<div id="map" style="margin:0 auto;width: 100%;height: 100%;"></div>
<script type="text/javascript" include="mapv,elasticsearch" src="../../dist/leaflet/include-leaflet.js"></script>
<script type="text/javascript">
    var map;
    var timeControl,
        liveESService,//实时点查询的ESService
        trackESService,//历史轨迹查询的ESService
        liveRenderer,//实时点层
        trackLineLayers,//历史轨迹层
        trackLineMap,//轨迹线数据
        liveDataSet,//渲染用实时点数据集
        planeStyles,
        planeLabels,//航班信息提示框集合
        dataUrl = "https://iclient.supermap.io/es";

    var flightIdens = [
        'CCA4189', 'CCA4187', 'CBJ5531', 'CSC8747', 'TBA9879',
        'CCA4113', 'CES2251', 'CCA4521', 'CSC8927', 'CSC8811',
        'CSC8857', 'UEA2711', 'UEA2205', 'CCA4439', 'CCA415',
        'CSC8719', 'CSC8555', 'CCA4211', 'HDA825'
    ];

    init();

    function init() {
        initMap();
        liveESService = new SuperMap.ElasticSearch(dataUrl);
        trackESService = new SuperMap.ElasticSearch(dataUrl);
        planeStyles = initPlaneStyles();
    }


    //开始播放
    function start() {
        var options = getControlOptions();
        if (!timeControl) {
            timeControl = new SuperMap.TimeFlowControl(loadLiveData, options);
        } else {
            timeControl.updateOptions(options);
        }
        timeControl.start();
    }

    //暂停播放
    function pause() {
        if(!timeControl){
            return;
        }else{
            timeControl.pause();
        }

    }

    //停止播放
    function stop() {
        if(!timeControl){
            return;
        }else{
            timeControl.stop();
            clearAll();
        }
    }

    //时间控制器回调参数，即每次刷新时执行的操作，此处为向服务器请求数据并绘制。实时刷新执行。
    function loadLiveData(currentTime) {

        var datetime = moment(currentTime).format("YYYY-MM-DDTHH:mm:ss") + "Z";
        var options = getServiceParamOptions();
        var liveParameters = [];
        for (var i = 0; i < options.flightIds.length; i++) {
            var code = options.flightIds[i];
            if (code === 'ZUUU') {
                continue;
            }
            liveParameters.push({index: "flights", type: "flight_utc"});
            liveParameters.push({
                "query": {
                    "bool": {
                        "must": {"match": {"ident": code}},
                        "filter": {"match": {"datetime": datetime}},
                    }
                },
                "sort": {"time-ms": {"order": "ASC"}},
                "from": 0,
                "size": 20
            });
        }
        liveESService.msearch({body: liveParameters}, function (error, result) {
            if (error) {
                widgets.alert.showAlert(JSON.stringify(error), false);
                timeControl.stop();
                return;
            }
            result.responses && renderData.call(window, result.responses);
        });
        updateProgress(datetime);
    }

    //渲染实时点数据和轨迹图层
    function renderData(result) {
        if (timeControl && !timeControl.getRunning()) {
            return;
        }
        var data = createLiveRendererData(result);

        if (data.length < 1) {
            return;
        }
        updateDataSet(data);

        if (!liveRenderer) {
            liveRenderer = L.supermap.mapVLayer(liveDataSet, {
                zIndex: 800,
                globalCompositeOperation: "lighter",
                shadowColor: "white",
                shadowBlur: 2,
                draw: 'icon',
                methods: {
                    click: function (evt) {
                        renderLiveLabel.call(window, evt)
                    }
                }
            }).addTo(map);
        } else {
            liveRenderer.update({data: liveDataSet});
        }

        renderTrackLineLayers();
    }

    //解析点查询结果数据为mapv数据
    function createLiveRendererData(results) {
        var data = [];
        results && results.map(function (result) {
            result.hits.hits.map(function (source) {
                var content = source._source;
                data.push({
                    geometry: {
                        type: 'Point',
                        coordinates: [content.x, content.y],
                    },
                    deg: content.direction,
                    icon: planeStyles[content.ident].img,
                    ident: content.ident,
                    content: content
                });
                trackLineMap = trackLineMap || {};
                if (!trackLineMap[content.ident]) {
                    trackLineMap[content.ident] = [];
                }
                trackLineMap[content.ident].push([content.x, content.y]);
            });
        });
        return data;
    }

    //更新点数据集
    function updateDataSet(data) {
        if (!liveDataSet) {
            liveDataSet = new mapv.DataSet(data);
            return;
        }
        var dat = data.slice();
        var innerData = liveDataSet.get();

        for (var i = 0; i < dat.length; i++) {
            for (var j = 0; j < innerData.length; j++) {
                if (dat[i].ident === innerData[j].ident) {
                    innerData[j] = dat[i];
                    break;
                }
            }
            //如果是新的飞机Id则追加到飞机数组里
            if (j === innerData.length) {
                innerData.push(dat[i]);
            }

        }
        liveDataSet.set(innerData);
    }

    //渲染轨迹图层
    function renderTrackLineLayers() {
        if (!trackLineLayers) {
            trackLineLayers = {};
        }
        for (var id in trackLineMap) {
            renderTrackLayerData(id, trackLineMap[id]);
        }

    }

    //渲染飞机id所对应的轨迹
    function renderTrackLayerData(id, coordinates) {
        var trackLayer = trackLineLayers[id];

        var trackDataSet = new mapv.DataSet({
            geometry: {
                type: 'LineString',
                coordinates: coordinates
            }
        });
        if (!trackLayer) {
            var options = {
                zIndex: 1,
                strokeStyle: planeStyles[id].color,
                shadowColor: "white",
                shadowBlur: 1,
                lineCap: 'butt',
                lineJoin: "round",
                lineWidth: 3,
                draw: 'simple'
            };
            trackLayer = L.supermap.mapVLayer(trackDataSet, options).addTo(map);
            trackLineLayers[id] = trackLayer;
        } else {
            trackLayer.update({data: trackDataSet});
        }
    }

    //实时点的提示框
    function renderLiveLabel(data) {
        planeLabels = planeLabels || {};
        var content = data && data.content;

        if (!content) return;
        var latlng = L.latLng(content.y, content.x);
        var labelContent = resources.text_flight + "： " + content.ident + "<br>" +
            resources.text_startPoint + "： " + content.origin + "/" + content.originLabel + "<br>" +
            resources.text_endPoint + "： " + content.destination + "/" + content.destinationLabel + "<br>" +
            resources.text_time + "： " + content.datetime;
        if (planeLabels[content.ident]) {
            planeLabels[content.ident].remove();
        }

        planeLabels[content.ident] = L.popup({
            autoPan: false,
            maxWidth: 180,
            offset: L.point(0, -1)
        }).setContent(labelContent).setLatLng(latlng).addTo(map);

    }


    //初始化飞机的样式，颜色随机
    function initPlaneStyles() {
        var planes = {};
        var colors = randomColor({
            luminosity: 'bright',
            hue: 'random',
            alpha: 1,
            count: flightIdens.length
        });
        $.ajaxSetup({
            async: false
        });
        var count = flightIdens.length;
        
            $.get('../data/plane.svg', function (svg) {
                flightIdens.map(function (ident, key) {
                    $(svg).children('svg').css("fill",colors[key]);
                    var svgUrl= "data:image/svg+xml;utf8,"+$(svg).children('svg')[0].outerHTML;
                    var img = new Image();
                    img.src = svgUrl;
                    planes[ident] = {color: colors[key], img: img};
            });
        });
        return planes;
    }

    //获取时间控件设置的参数
    function getControlOptions() {
        var startTime = $("#startTime").val();
        var endTime = $("#endTime").val();
        startTime = new Date(Date.parse(startTime.replace(/-/g, "/"))).getTime();
        endTime = new Date(Date.parse(endTime.replace(/-/g, "/"))).getTime();
        var speed = $("#speed").val();
        speed = (speed > 0) ? speed : 1000;
        speed = parseInt(speed);
        var frequency = $("#frequency").val();
        frequency = (frequency > 0) ? frequency : 1000;
        frequency = parseInt(frequency);
        return {
            startTime: startTime,
            endTime: endTime,
            speed: speed,
            frequency: frequency
        }
    }

    //获取ES服务查询参数
    function getServiceParamOptions() {
        var flightIds = $("#flightIds").val();
        return {
            flightIds: flightIds
        }
    }


    //更新当前时间界面
    function updateProgress(currentTime) {
        $("#progress").html(currentTime);
    }


    //默认设置参数
    function getDefaultControlOptions() {
        var startMs = 1498781767725;
        var endMs = 1498935332876;
        var start = moment(startMs).format("YYYY-MM-DDTHH:mm:ss") + "Z";
        var end = moment(endMs).format("YYYY-MM-DDTHH:mm:ss") + "Z";
        return {
            startTime: start,
            endTime: end,
            speed: 1000,
            frequency: 100,
        }
    }

    function initMap() {
        if (!map) {
            map = L.map('map', {
                crs: L.CRS.EPSG3857,
                center: [31.3677, 108.116],
                maxZoom: 20,
                minZoom: 3,
                zoom: 7
            });
            var attr = 'Data © <a href="https://www.elastic.co/products/elasticsearch" target="_blank">Elasticsearch</a> Map Data <span>© <a href="http://support.supermap.com.cn/product/iServer.aspx" target="_blank">SuperMap iServer</a></span>';
            var host = window.isLocal ? window.server : "https://iserver.supermap.io";
            var url = host + "/iserver/services/map-china400/rest/maps/ChinaDark";
            L.supermap.tiledMapLayer(url, {attribution: attr}).addTo(map);
        }

        initTimeControlView();
    }

    //初始化时间控制控件，仅UI
    function initTimeControlView() {

        var control = L.control({position: "topright"});
        control.onAdd = function () {
            var me = this;
            me._div = L.DomUtil.create('div', 'panel panel-primary controlPane');
            me._div.style.width = "300px";
            var titleDiv = $("<div class='panel-heading text-center' id='toggle' style='cursor: pointer'>" +
                "<span class='panel-title text-center'>" + resources.text_console + "</span>&nbsp;" +
                "<span class='glyphicon glyphicon-triangle-top' id='toggleIcon' ></span></div>").appendTo(me._div);

            var contentDiv = $("<div class='panel-body content center-block' style='font-size: 14px'></div>").appendTo(me._div);

            var optionsDiv = $("<div class='' id='options'></div>").appendTo(contentDiv);

            $("<div class='form-group'><label class='text-right' for='flightIds'  >" +
                resources.text_flightNumber + "<span style='color:red'>*</span></label>" +
                "<select class='selectpicker ' id='flightIds' multiple " +
                "data-actions-box='true' " +
                "data-select-all-Text='" + resources.text_allSelect + "' " +
                "data-deselect-all-Text='" + resources.text_deSelectAll + "' " +
                "title='" + resources.text_select + "'>" +
                initSelectOpitons() +
                "</select></div><hr/>").appendTo(optionsDiv);

            function initSelectOpitons() {
                var str = '';
                flightIdens.map(function (ident, key) {
                    str += "<option value=" + ident + " selected>" + ident + "</option> "

                });
                return str;
            }

            var defaultOption = getDefaultControlOptions();

            $("<div class='form-group form-inline'><label class='text-right' for='startTime' >" + resources.text_startTime + "<span style='color:red'>*</span></label>" +
                "<input id='startTime' type='text' class='form-control input-sm' placeholder='" + defaultOption.startTime +
                "' value='" + defaultOption.startTime + "'/></div></div>").appendTo(optionsDiv);

            $("<div class='form-group form-inline'><label class='text-right' for='endTime' >" + resources.text_finishTime + "<span style='color:red'>*</span></label>" +
                "<input id='endTime' type='text' class='form-control input-sm' placeholder='" + defaultOption.endTime +
                "' value='" + defaultOption.endTime + "'/></div></div>").appendTo(optionsDiv);

            $("<div class='form-group form-inline'><label class='text-right' for='speed' >" + resources.text_refreshStepSize + "(ms)</label>" +
                "<input id='speed' type='number' min='1' class='form-control input-sm' placeholder='" + defaultOption.speed +
                "' value='" + defaultOption.speed + "'/></div></div>").appendTo(optionsDiv);

            $("<div class='form-group form-inline'><label class='text-right' for='frequency' >" + resources.text_refreshFrequency + "(ms)</label>" +
                "<input id='frequency' type='number' min='1' class='form-control input-sm' placeholder='" + defaultOption.frequency +
                "' value='" + defaultOption.frequency + "'/></div></div>").appendTo(optionsDiv);

            var progressDiv = $("<div class='form-group'><div class='form-horizontal text-center'><div class='form-group'>" +
                "<label  for='progress'>" + resources.text_currentTime + "</label><span class='form-control-static' id='progress'>" + resources.text_noStart + "</span>" +
                "</div></div></div>").appendTo(contentDiv);

            var controlDiv = $("<section><div class='form-inline text-center'>" +
                "<input id='start' type='button'  class='btn btn-default text-center' value='" + resources.btn_start + "'/>&nbsp;" +
                "<input id='pause' type='button'  class='btn btn-default text-center' value='" + resources.btn_pause + "'/>&nbsp;" +
                "<input id='stop' type='button'  class='btn btn-default text-center' value='" + resources.btn_stop + "'/>" +
                "</div></section>").appendTo(contentDiv);


            me._div.addEventListener('mouseover', function () {
                me._map.dragging.disable();
                me._map.scrollWheelZoom.disable();
                me._map.doubleClickZoom.disable();
            });
            me._div.addEventListener('mouseout', function () {
                me._map.dragging.enable();
                me._map.scrollWheelZoom.enable();
                me._map.doubleClickZoom.enable();
            });

            return me._div;
        };
        control.addTo(map);
        var dateOptions = {
            format: "YYYY-MM-DD HH:mm:ss",
            stepping: 1,
            showClose: true,
            locale: 'zh-cn'
        };
        $("#startTime").datetimepicker(dateOptions);
        $("#endTime").datetimepicker(dateOptions);
        $('#flightIds').selectpicker();
        $("#start").on('click', function () {
            $("#options").slideUp("fast", function () {
                toggle(this);
            });
            start();
        });
        $("#pause").on('click', pause);
        $("#stop").on('click', stop);
        $("#toggle").on('click', function () {
            $("#options").slideToggle("fast", function () {
                toggle(this);
            });
            return false;
        });

        function toggle(ele) {
            if ($(ele).is(":visible")) {
                $("#toggleIcon").attr('class', "glyphicon glyphicon-triangle-top");
            } else {
                $("#toggleIcon").attr('class', "glyphicon glyphicon-triangle-bottom");
            }
        }
    }

    function clearAll() {
        if (timeControl) {
            timeControl.destroy();
            timeControl = null;
        }
        if (trackLineLayers) {
            for (var id in trackLineLayers) {
                map.removeLayer(trackLineLayers[id]);
            }
            trackLineLayers = null;
        }
        if (trackLineMap) {
            trackLineMap = null;
        }
        if (liveRenderer) {
            map.removeLayer(liveRenderer);
            liveRenderer = null;
        }
        if (liveDataSet) {
            liveDataSet = null;
        }
        if (planeLabels) {
            for (var item in planeLabels) {
                planeLabels[item].remove();
            }
            planeLabels = {};
        }
    }

</script>
</body>
</html>