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


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288
							<!--********************************************************************
* Copyright© 2000 - 2021 SuperMap Software Co.Ltd. All rights reserved.
*********************************************************************-->
<!DOCTYPE html>
<html lang="en-US">

<head>
    <meta charset="UTF-8">
    <title data-i18n='resources.title_chart_iServer'></title>
    <script type="text/javascript" include="bootstrap" src="../js/include-web.js"></script>
    <script type="text/javascript" include="iclient-mapboxgl-css,echarts" src="../../dist/mapboxgl/include-mapboxgl.js"></script>

    <style>
        .chart-setting {
            position: absolute;
            top: 50px;
            right: 10px;
            width: 450px;
            height: 50px;
            z-index: 800;
            background-color: #fff;
        }

        .chart-type-btn {
            position: absolute;
            top: 8px;
            right: 20px;
            width: 112px;
            height: 36px;
            float: right;
            z-index: 800;
        }

        .chart-setting .input-group {
            left: 16px;
            top: 8px;
            width: 260px;
        }

        .graph {
            margin: 5px;
            width: 26px;
            height: 26px;
            border: none;
            border-radius: 4px;
            background-size: 100%;
            outline: none;
        }

        button {
            float: right;
        }

        #bar {
            background-image: url("../img/bar.png");
        }

        #line {
            background-image: url("../img/ling.png");
        }

        #scatter {
            background-image: url("../img/scatter.png");
        }

        #chart {
            position: absolute;
            top: 100px;
            right: 10px;
            width: 450px;
            height: 350px;
            z-index: 800;
        }
    </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>
    <div class="chart-setting"></div>
    <div id="chart"></div>
    <script>
        init();

        function init() {
            var container = document.getElementsByClassName("chart-setting")[0];
            container.innerHTML = "<div class='input-group'><span class='input-group-addon'>" +
                resources.text_dataset + "</span>" +
                "<select class='form-control' id='rule' name='rule'>" +
                "<option value='https://iserver.supermap.io/iserver/services/data-jingjin/rest/data/datasources/Jingjin/datasets/Landuse_R' selected>Landuse_R@Jingjin</option>" +
                "<option value='https://iserver.supermap.io/iserver/services/data-jingjin/rest/data/datasources/Jingjin/datasets/BaseMap_P'>BaseMap_P@Jingjin</option>" +
                "<option value='https://iserver.supermap.io/iserver/services/map-world/rest/maps/World/layers/Rivers@World@@World'>Rivers@World</option>" +
                "</select></div>" +
                "<div class='chart-type-btn'>" +
                "<button type='button' class='btn btn-default graph' id='scatter' title='" + resources.title_Scatter +
                "'></button>" +
                "<button type='button' class='btn btn-default graph' id='line' title='" + resources.title_GraphLine +
                "'></button>" +
                "<button type='button' class='btn btn-default graph active' id='bar' title='" + resources.title_GraphBar +
                "''></button></div>"
        }

        var host = window.isLocal ? window.server : "https://iserver.supermap.io";
        var map, resultLayer, url = host + "/iserver/services/map-world/rest/maps/World";
        var attribution = "<a href='https://www.mapbox.com/about/maps/' target='_blank'>© Mapbox </a>" +
            " with <span>© <a href='https://iclient.supermap.io' target='_blank'>SuperMap iClient</a> | </span>" +
            " Map Data <span>© <a href='http://support.supermap.com.cn/product/iServer.aspx' target='_blank'>SuperMap iServer</a></span> ";
        map = new mapboxgl.Map({
            container: 'map',
            style: {
                "version": 8,
                "sources": {
                    "raster-tiles": {
                        "attribution": attribution,
                        "type": "raster",
                        "tiles": [url + "/zxyTileImage.png?z={z}&x={x}&y={y}"],
                        "tileSize": 256
                    }
                },
                "layers": [{
                    "id": "simple-tiles",
                    "type": "raster",
                    "source": "raster-tiles",
                }]
            },
            center: [118, 40],
            zoom: 6
        });
        //图表组件
        var options = {
            type: 'bar',
            datasets: {
                type: 'iServer', //iServer iPortal 
                url: host + "/iserver/services/data-jingjin/rest/data/datasources/Jingjin/datasets/Landuse_R",
                withCredentials: false, //默认值是false
                queryInfo: {
                    attributeFilter: "SmID > 0"

                }
            },
            chartOptions: [{
                xAxis: {
                    field: "LANDTYPE",
                    name: "type"
                },
                yAxis: {
                    field: "AREA",
                    name: "Area"
                }
            }]
        }
        var barChart = new SuperMap.Components.Chart("chart", options);
        resultLayer = {
            "id": 'jinjin',
            "type": 'fill',
            // "layout": {
            //     'visibility': 'visible',
            // },
            "paint": {
                'fill-color': 'blue', // 返回的是id的值
            }
        };
        //加载图表之后，将要素添加到地图上
        barChart.onAdd(addDataToMap);

        function addDataToMap() {
            var features = barChart.getFeatures();
            // resultLayer.source = {
            //     "type": "geojson",
            //     "data": features
            // }
            map.addSource(resultLayer.id,{
                "type": "geojson",
                "data": features
            })
            resultLayer.source = resultLayer.id;

            map.addLayer(resultLayer);
           
        }


        //为图表类型按钮绑定事件
        bindEvent();

        function bindEvent() {
            $(".graph").on("click", function () {
                $(".graph").removeClass("active");
            });

            $("#bar").on("click", function () {
                $("#bar").addClass("active");
                barChart.changeType('bar');
            });
            $("#line").on("click", function () {
                $("#line").addClass("active");
                barChart.changeType('line');
            });
            $("#scatter").on("click", function () {
                $("#scatter").addClass("active");
                barChart.changeType('scatter');
            });
        }
        //切换数据集
        $("#rule").change(function () {
            var selectedIndex = ($(this).get(0).selectedIndex);
            var url = $(this).val();
            var chartOption, serviceType, withCredentials;
            // 如果已上图，删除当前地图上的图层和数据集
            map.getLayer(resultLayer.id) && map.removeLayer(resultLayer.id) && map.removeSource(resultLayer.id);
            if (selectedIndex === 0) {
                chartOption = [{
                    xAxis: {
                        field: "LANDTYPE",
                        name: "type"
                    },
                    yAxis: {
                        field: "AREA",
                        name: "Area"
                    }
                }];
                // 重新设置上图的id, 图层的样式，图层ID
                resultLayer = {
                    "id": 'jinjin',
                    "type": 'fill',
                    "paint": {
                        'fill-color': 'blue', // 返回的是id的值
                    }
                };
                
            } else if (selectedIndex === 1) {
                chartOption = [{
                    xAxis: {
                        field: "NAME",
                        name: "NAME"
                    },
                    yAxis: {
                        field: "ADCLASS",
                        name: "ADCLASS"
                    },
                }];
                resultLayer = {
                    "id": 'ADCLASS',
                    "type": 'circle',
                    "paint": {
                        "circle-radius": 8,
                        /* 圆的直径，单位像素 */
                        "circle-color": 'blue'
                    }
                };

            } else {
                chartOption = [{
                    xAxis: {
                        field: "NAME",
                        name: "name"
                    },
                    yAxis: {
                        field: "KILOMETERS",
                        name: "Kilometers"
                    }
                }];
                resultLayer = {
                    "id": 'river',
                    "type": 'line',
                    "paint": {
                        "line-width": 3,
                        'line-color': '#78c4ec',
                    }
                };
  
            }

            serviceType = 'iServer';
            datasets = {
                type: serviceType, //iServer iPortal 
                url,
                withCredentials, //默认值是false
                queryInfo: {
                    attributeFilter: "SmID > 0"
                }
            };
            barChart.onAdd(addDataToMap);
            barChart.updateData(datasets, chartOption);
        });
    </script>
</body>

</html>