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


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160
							<!--********************************************************************
* Copyright© 2000 - 2021 SuperMap Software Co.Ltd. All rights reserved.
*********************************************************************-->
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title data-i18n="resources.title_fieldStatistics"></title>
    <script type="text/javascript" include="bootstrap-css" src="../js/include-web.js"></script>
    <style>
        .resultInfo {
            padding: 6px 8px;
            font: 14px/16px Arial, Helvetica, sans-serif;
            background: white;
            background: rgba(255, 255, 255, 0.8);
            box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
            border-radius: 5px;
        }
    </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" src="../../dist/leaflet/include-leaflet.js"></script>
<script type="text/javascript">
    var host = window.isLocal ? window.server : "https://iserver.supermap.io";
    var map, currentData, layersName = [], info, fieldService,
        mapURL = host + "/iserver/services/map-world/rest/maps/World",
        dataURL = host + "/iserver/services/data-world/rest/data";
    map = L.map('map', {
        preferCanvas: true,
        crs: L.CRS.EPSG4326,
        center: {lon: 0, lat: 0},
        maxZoom: 18,
        zoom: 2
    });
    L.supermap.tiledMapLayer(mapURL).addTo(map);
    initResultInfoWin();
    showLayersInfo();

    function initResultInfoWin() {
        info = L.control({position: 'bottomleft'});
        info.onAdd = function () {
            this._div = L.DomUtil.create('div', 'resultInfo');
            info.update();
            handleMapEvent(this._div, this._map);
            return this._div;
        };

        info.update = function (currentStatisticResult) {
            if (!currentStatisticResult) {
                return;
            }
            var innerHTMLStr = '<div style="line-height: 35px;">'
                + '<strong>' + resources.text_layer + '</strong>（continent_T@World）&nbsp;&nbsp;&nbsp;<strong>' + resources.text_field + '</strong>（' + currentStatisticResult.fieldName + '）<div>';
            innerHTMLStr += '<div style="line-height: 35px;">'
                + '<strong>' + resources.text_statisticResult + '</strong><div>';
            var keys = ["AVERAGE", "MAX", "MIN", "STDDEVIATION", "SUM", "VARIANCE"];
            var tableStr = "<table id='trafficRes' class='table table-bordered'><tr><td>" + resources.text_averageValue + "</td><td>" + resources.text_maxValue + "</td><td>" + resources.text_minValue + "</td>"
                + "<td>" + resources.text_standardDeviation + "</td><td>" + resources.text_sum + "</td><td>" + resources.text_variance + "</td></tr>";
            var resultTR = "<tr>";
            for (var i = 0; i < keys.length; i++) {
                resultTR += "<td>" + currentStatisticResult[keys[i]] + "</td>";
            }
            resultTR += "</tr>";
            tableStr += resultTR + "</table>";
            innerHTMLStr += tableStr;
            this._div.innerHTML = innerHTMLStr;
        };
        info.addTo(map);
    }

    //获取子图层信息
    function showLayersInfo() {
        var subLayer;
        L.supermap
            .layerInfoService(mapURL)
            .getLayersInfo(function (serviceResult) {
                var result = serviceResult.result;
                var layers = result.subLayers.layers;
                if (!layers) return;
                for (var i = 0, len = layers.length; i < len; i++) {
                    subLayer = layers[i];
                    if ("UGC" == subLayer.type) {
                        //记录数据源，数据集信息供字段查询统计使用
                        if (subLayer.datasetInfo.name && subLayer.datasetInfo.dataSourceName) {
                            layersName[i] = {
                                dataSetName: subLayer.datasetInfo.name,
                                dataSourceName: subLayer.datasetInfo.dataSourceName,
                                layerName: subLayer.name
                            };
                        }
                    }
                }
                getFields();
            });
    }

    //获取字段
    function getFields() {
        var name = 'continent_T@World';
        var dataInfo;
        for (var i = 0; i < layersName.length; i++) {
            dataInfo = layersName[i];
            if (dataInfo.layerName == name) {
                //设置数据集，数据源，查询fields信息
                currentData = dataInfo;
                var param = new SuperMap.FieldParameters({
                    datasource: currentData.dataSourceName,
                    dataset: currentData.dataSetName,
                });
                L.supermap.fieldService(dataURL).getFields(param, function (serviceResult) {
                    if (serviceResult.result && serviceResult.result.fieldNames) {
                        fieldStatistic(serviceResult.result.fieldNames[0]);
                    }
                });
            }
        }
    }

    //统计结果
    function fieldStatistic(fieldName) {

        if (currentData) {
            var param = new SuperMap.FieldStatisticsParameters({
                datasource: currentData.dataSourceName,
                dataset: currentData.dataSetName,
                fieldName: fieldName,
                statisticMode: [
                    SuperMap.StatisticMode.MAX,
                    SuperMap.StatisticMode.MIN,
                    SuperMap.StatisticMode.SUM,
                    SuperMap.StatisticMode.AVERAGE,
                    SuperMap.StatisticMode.STDDEVIATION,
                    SuperMap.StatisticMode.VARIANCE
                ]
            });
            L.supermap.fieldService(dataURL).getFieldStatisticsInfo(param, function (serviceResult) {
                info.update(serviceResult.result);
            });
        }
    }

    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();
        });
    }
</script>
</body>
</html>