fuyuhang
/
Project_yhfu
镜像自地址 http://121.37.83.100:3000/sooka_onest/sooka_onest_forestfire_vue2_visualization.git


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476
							<!--********************************************************************
* Copyright© 2000 - 2021 SuperMap Software Co.Ltd. All rights reserved.
*********************************************************************-->
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title data-i18n="resources.title_ESHeatMap"></title>
    <script type="text/javascript" include="jquery,bootstrap,moment,bootstrap-datetimepicker,bootstrap-select,geohash"
            src="../js/include-web.js"></script>
    <style>
        .bootstrap-select {
            width: 168px !important;
        }

        .form-group label {
            width: 100px;
            padding-right: 5px;
        }

        .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,
            stopRender,
            timeControl,
            liveESService,
            liveRenderer,
            liveDataSet,
            geoFenceLayer,
            dataUrl = "https://iclient.supermap.io/es",
            info = L.control({position: 'bottomleft'}),
            layerOptions = getGridOptions();

    init();

    function init() {
        initMap();
        info.onAdd = function () {
            var popup = L.DomUtil.create('div');
            popup.innerHTML = "<div class='btn-group' role='group' aria-label='...'>" +
                    "<button  value='grid' type='button' class='btn btn-default'>"+resources.btn_grid+"</button>" +
                    "<button value='heatmap' type='button' class='btn btn-default'>"+resources.title_heatMap+"</button></div>"
            handleMapEvent(popup, map);
            return popup;
        };
        info.addTo(map);
        liveESService = new SuperMap.ElasticSearch(dataUrl);
    }

    function handleMapEvent(div, map) {
        if (!div || !map) {
            return;
        }
        div.addEventListener('mouseover', function () {
            map.dragging.disable();
            map.scrollWheelZoom.disable();
            map.doubleClickZoom.disable();
        });
        div.addEventListener('mouseout', function () {
            map.dragging.enable();
            map.scrollWheelZoom.enable();
            map.doubleClickZoom.enable();
        });
    }

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

    //暂停播放
    function pause() {
        timeControl && timeControl.pause();
    }

    //停止播放
    function stop() {
        stopRender = true;
        timeControl && timeControl.stop();
        clearAll();
    }

    //时间控制器回调参数，即每次刷新时执行的操作，此处为向服务器请求数据并绘制。实时刷新执行。
    function loadLiveData(currentTime) {
        getESAggregations(map.getZoom(), map.getBounds(), currentTime, currentTime + getControlOptions().speed);
        updateProgress(moment(currentTime).format("YYYY-MM-DD HH:mm:ss"));
    }

    function wrapLatLngBounds(extent) {
        var left = extent.getNorthWest().lng < -180 ? -180 : extent.getNorthWest().lng;
        var bottom = extent.getSouthEast().lat < -90 ? -90 : extent.getSouthEast().lat;
        var right = extent.getSouthEast().lng > 180 ? 180 : extent.getSouthEast().lng;
        var top = extent.getNorthWest().lat > 90 ? 90 : extent.getNorthWest().lat;
        return L.latLngBounds(L.latLng(bottom, left), L.latLng(top, right));
    }

    function getESAggregations(level, extent, startT, endT) {
        if (startT > endT) {
            return;
        }
        
        var coords = wrapLatLngBounds(extent), prec;
        
        if (level <= 2) {
            prec = 2;
        } else if (level > 2 && level <= 5) {
            prec = 4;
        } else if (level > 5) {
            prec = 8;
        } else if (level > 8 && level <= 11) {
            prec = 9;
        } else if (level > 11 && level <= 13) {
            prec = 10;
        } else if (level > 13 && level <= 15) {
            prec = 11;
        } else if (level > 15) {
            prec = 12;
        }
        liveESService.search({
            index: "flights",
            type: "flight_utc",
            body: {
                query: {
                    constant_score: {
                        filter: {
                            range: {
                                'time-ms': {
                                    from: startT,
                                    to: endT
                                }
                            }
                        }
                    }
                },
                aggregations: {
                    zoomedInView: {
                        filter: {
                            geo_bounding_box: {
                                'pin.location': {
                                    top_left: {
                                        lat: coords.getNorthWest().lat,
                                        lon: coords.getNorthWest().lng
                                    },
                                    bottom_right: {
                                        lat: coords.getSouthEast().lat,
                                        lon: coords.getSouthEast().lng
                                    }
                                }
                            }
                        },
                        aggregations: {
                            geohash: {
                                geohash_grid: {
                                    field: "pin.location",
                                    precision: prec
                                }
                            }
                        }
                    }
                }
            }
        }).then(function (response) {
            if (response.error) {
                console.log(error);
                console.log(error.body);
                return;
            }
            !stopRender && renderLive(response.aggregations.zoomedInView.geohash.buckets);
        });
    }

    //渲染实时点数据
    function renderLive(result) {
        if (timeControl && !timeControl.getRunning()) {
            return;
        }
        result = result || {};
        var data = createLiveRendererData(result);
        if (data.length < 1) {
            return;
        }
        updateDataSet(data);
        if (!liveRenderer) {
            liveRenderer = L.supermap.mapVLayer(liveDataSet, layerOptions, {noWrap: true}).addTo(map);
        } else {
            liveRenderer.update({data: liveDataSet, options: layerOptions});
        }
    }

    var buttons = $('.btn-group').children();
    buttons.map(function (key) {
        var value = buttons[key].value;
        if (value === 'grid') {
            $(buttons[key]).on('click', function () {
                layerOptions = getGridOptions();
                if (liveDataSet) {
                    liveRenderer.update({data: liveDataSet, options: layerOptions});
                }
            });
            return;
        }
        if (value === 'heatmap') {
            $(buttons[key]).on('click', function () {
                layerOptions = getHeatMapOptions();
                if (liveDataSet) {
                    liveRenderer.update({data: liveDataSet, options: layerOptions});
                }
            });
        }
    });

    function getGridOptions() {
        return {
            fillStyle: 'rgba(55, 50, 250, 0.8)',
            shadowColor: 'rgba(255, 250, 50, 1)',
            shadowBlur: 10,
            size: 40,
            globalAlpha: 0.5,
            label: {
                show: true,
                fillStyle: 'white',
                shadowColor: 'yellow',
                font: '15px Arial',
                shadowBlur: 10
            },
            gradient: {
                0: "rgba(49, 54, 149, 0)",
                0.2: "rgba(69,117,180, 0.7)",
                0.3: "rgba(116,173,209, 0.7)",
                0.4: "rgba(171,217,233, 0.7)",
                0.5: "rgba(224,243,248, 0.7)",
                0.6: "rgba(254,224,144,0.7)",
                0.7: "rgba(253,174,97,0.7)",
                0.8: "rgba(244,109,67,0.8)",
                0.9: "rgba(215,48,39,0.8)",
                0.95: "rgba(165, 0, 38,0.8)"
            },
            draw: 'grid'
        }
    }

    function getHeatMapOptions() {
        return {
            size: 20,
            gradient: {
                0: "rgba(49, 54, 149, 0)",
                0.2: "rgba(69,117,180, 0.7)",
                0.3: "rgba(116,173,209, 0.7)",
                0.4: "rgba(171,217,233, 0.7)",
                0.5: "rgba(224,243,248, 0.7)",
                0.6: "rgba(254,224,144,0.7)",
                0.7: "rgba(253,174,97,0.7)",
                0.8: "rgba(244,109,67,0.8)",
                0.9: "rgba(215,48,39,0.8)",
                0.95: "rgba(165, 0, 38,0.8)"
            },
            draw: 'heatmap'
        }
    }

    //解析点查询结果数据为mapv数据
    function createLiveRendererData(results) {
        var data = [];
        results.map(function (feature) {
            var coords = decodeGeoHash(feature.key);
            data.push({
                geometry: {
                    type: 'Point',
                    coordinates: [coords.longitude[2], coords.latitude[2]]
                },
                count: feature.doc_count
            });
        });
        return data;
    }

    //更新点数据集
    function updateDataSet(data) {
        if (!liveDataSet) {
            liveDataSet = new mapv.DataSet(data);
            return;
        }
        var innerData = liveDataSet.get();
        var dataLen = data.length;
        for (var i = 0; i < innerData.length; i++) {
            if (i < dataLen && data[i].ident === innerData[i].ident) {
                innerData[i] = data[i];
            }
        }
        liveDataSet.set(innerData);
    }

    //获取时间控件设置的参数
    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
        }
    }

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

    //默认设置参数
    function getDefaultControlOptions() {
        var startMs = 1498772645774;
        var endMs = 1498935332879;
        var start = moment(startMs).format("YYYY-MM-DD HH:mm:ss");
        var end = moment(endMs).format("YYYY-MM-DD HH:mm:ss");
        return {
            startTime: start,
            endTime: end,
            speed: 900000,
            frequency: 1000
        }
    }

    function initMap() {
        if (!map) {
            map = L.map('map', {
                center: [40.745654, -90.931577],
                maxZoom: 15,
                minZoom: 1,
                zoom: 4,
                crs: L.CRS.EPSG3857
            });
            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);

            var defaultOption = getDefaultControlOptions();

            $("<div class='form-group form-inline'><label class='text-right' for='startTime' >"+resources.text_startTime+":  "+"</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+":  "+"</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+":  "+"</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+":  "+"</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);
        $("#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 (liveRenderer) {
            map.removeLayer(liveRenderer);
            liveRenderer = null;
        }
        if (liveDataSet) {
            liveDataSet = null;
        }
        if (geoFenceLayer) {
            geoFenceLayer.remove();
            geoFenceLayer = null;
        }
    }

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