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


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153
							<!--********************************************************************
* 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>
    <script type="text/javascript" src="../../dist/ol/include-ol.js"></script>
    <style>
        .ol-popup {
            position: absolute;
            background-color: white;
            filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.2));
            padding: 10px;
            border-radius: 5px;
            border: 1px solid #cccccc;
            bottom: 10px;
            left: 10px;
            min-width: 280px;
        }

    </style>
</head>
<body style=" margin: 0;overflow: hidden;background: #fff;width: 100%;height:100%; position: absolute;top: 0;">
<div id="map" style="width: 100%;height:100%"></div>
<div id="popup" class="ol-popup">
    <div id="popup-content"></div>
</div>
<script type="text/javascript">
    var container, content, info;
    var map, currentData, layersName = [],
        mapURL = (window.isLocal ? window.server : "https://iserver.supermap.io") + "/iserver/services/map-world/rest/maps/World",
        dataURL = (window.isLocal ? window.server : "https://iserver.supermap.io") + "/iserver/services/data-world/rest/data";

    map = new ol.Map({
        target: 'map',
        controls: ol.control.defaults({attributionOptions: {collapsed: false}})
            .extend([new ol.supermap.control.Logo()]),
        view: new ol.View({
            center: [0, 0],
            zoom: 3,
            projection: 'EPSG:4326',
            multiWorld: true
        })
    });
    var layer = new ol.layer.Tile({
        source: new ol.source.TileSuperMapRest({
            url: mapURL
        }),
        projection: 'EPSG:4326'
    });
    map.addLayer(layer);
    initResultInfoWin();
    showLayersInfo();

    function initResultInfoWin() {
        container = document.getElementById('popup');
        content = document.getElementById('popup-content');
        info = new ol.control.Control({element: container});
        info.setMap(map);
        map.addControl(info);
    }

    //获取子图层信息
    function showLayersInfo() {
        var subLayer;
        new ol.supermap.LayerInfoService(mapURL).getLayersInfo(function (serviceResult) {
            var layers = serviceResult.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: dataInfo.dataSourceName,
                    dataset: dataInfo.dataSetName
                });
                new ol.supermap.FieldService(dataURL).getFields(param, function (serviceResult) {
                    fieldStatistic();
                });
            }
        }
    }

    function fieldStatistic() {
        var fieldName = 'SmID';
        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
            ]
        });
        if (currentData) {
            new ol.supermap.FieldService(dataURL).getFieldStatisticsInfo(param, function (serviceResult) {
                showResult(serviceResult.result);
            });
        }
    }

    function showResult(serviceResult) {
        if (!serviceResult) {
            return;
        }
        var innerHTMLStr = '<div style="line-height: 35px;">'
            + '<strong>' + resources.text_layer + '</strong>（continent_T@World）&nbsp;&nbsp;&nbsp;<strong>' + resources.text_field + '</strong>（' + serviceResult.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>" + serviceResult[keys[i]] + "</td>";
        }
        resultTR += "</tr>";
        tableStr += resultTR + "</table>";
        innerHTMLStr += tableStr;
        content.innerHTML = innerHTMLStr;
        map.addControl(info);
    }
</script>
</body>
</html>