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


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316
							<!--********************************************************************
* Copyright© 2000 - 2021 SuperMap Software Co.Ltd. All rights reserved.
*********************************************************************-->
<!DOCTYPE html>
<html lang="en-US">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
    <title data-i18n="resources.title_themeLabel"></title>
    <style>
        .legend td {
            width: 60px;
            height: 12px;
            font-size: 12px;
        }

        .leaflet-popup-content {
            margin: 5px
        }

        .mapboxgl-popup-content {
            box-shadow: 0 3px 14px rgba(0, 0, 0, 0.4) !important;
        }

    </style>
    <script type="text/javascript" include="bootstrap-css" src="../js/include-web.js"></script>
    <script type="text/javascript" src="../../dist/mapboxgl/include-mapboxgl.js"></script>
    <script type="text/javascript" src="../data/themeLableData.js"></script>
</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">
    var host = window.isLocal ? window.server : "https://iserver.supermap.io";
    baseUrl = host + "/iserver/services/map-china400/rest/maps/China";
    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> ";
    var themeLayer, popup;
    var map = new mapboxgl.Map({
        container: 'map',
        style: {
            "version": 8,
            "sources": {
                "raster-tiles": {
                    "attribution": attribution,
                    "type": "raster",
                    "tiles": [baseUrl + '/zxyTileImage.png?z={z}&x={x}&y={y}'],
                    "tileSize": 256,
                },
            },
            "layers": [{
                "id": "simple-tiles",
                "type": "raster",
                "source": "raster-tiles",
                "minzoom": 0,
                "maxzoom": 22
            }]
        },
        center: [116.40, 39.79],
        zoom: 3
    });
    map.addControl(new mapboxgl.NavigationControl(), 'top-left');
    map.addControl(new mapboxgl.supermap.LogoControl(), 'bottom-right');

    initThemeLayer();
    initLegendView();

    function initThemeLayer() {
        themeLayer = new mapboxgl.supermap.LabelThemeLayer("labelThemeLayer", {
//                map: map,//该可选参数将在下个版本遗弃
            attributions: " ",
            style: new SuperMap.ThemeStyle({
                labelRect: true,
                fontColor: "#000000",
                fontWeight: "bolder",
                fontSize: "18px",
                fill: true,
                fillColor: "#FFFFFF",
                fillOpacity: 1,
                stroke: false,
                strokeColor: "#8B7B8B"
            }),
            themeField: "aqi",
            styleGroups: [
                {
                    start: 0,
                    end: 51,
                    style: {
                        fillColor: "#6ACD06",
                        fontSize: "17px"
                    }
                }, {
                    start: 51,
                    end: 101,
                    style: {
                        fillColor: "#FBD12A",
                        fontSize: "19px"
                    }
                }, {
                    start: 101,
                    end: 151,
                    style: {
                        fillColor: "#FE8800",
                        fontSize: "22px"
                    }
                }, {
                    start: 151,
                    end: 201,
                    style: {
                        fillColor: "#FF0000",
                        fontSize: "24px"
                    }
                }, {
                    start: 201,
                    end: 301,
                    style: {
                        fillColor: "#CC0000",
                        fontSize: "26px"
                    }
                }, {
                    start: 301,
                    end: 601,
                    style: {
                        fillColor: "#960453",
                        fontSize: "28px"
                    }
                }
            ]
        });
        map.addLayer(themeLayer);
        //专题图层 mousemove 事件
        themeLayer.on('mousemove', handleMouseOver);
        addFeatures();
    }

    function addFeatures() {
        var labelFeatures = [];
        var feat;
        for (var i = 0; i < themeData.length; i++) {
            var lonlat = themeData[i].lonLat.split(",");
            var lng = parseFloat(lonlat[0]);
            var lat = parseFloat(lonlat[1]);
            var text = themeData[i].aqi;
            feat = new mapboxgl.supermap.ThemeFeature([lng, lat, text], themeData[i]);
            labelFeatures.push(feat);
        }
        themeLayer.addFeatures(labelFeatures);
    }

    //图例
    function initLegendView() {
        var LegendControl = function () {

        };
        LegendControl.prototype.onAdd = function () {
            this._div = document.createElement('div');
            this._div.className = 'mapboxgl-ctrl panel legend';
            this._div.innerHTML = "<div class='panel-body'><table>" +
                "<tr class='text-center'><td>" + resources.text_great + "</td><td >" + resources.text_good + "</td> <td >" + resources.text_mildPollution + "</td><td>" + resources.text_moderatePollution + "</td><td >" + resources.text_heavyPollution + "</td><td >" + resources.text_severePollution + "</td></tr>" +
                "<tr class='text-center'>" +
                "<td style='background: #6ACD06'></td><td style='background: #FBD12A'></td><td  style='background: #FE8800'></td>" +
                "<td style='background: #FF0000'></td><td style='background: #CC0000'></td><td  style='background: #960453'></td>" +
                "</tr>" +
                "<tr class='text-center'><td>0-51</td><td >51-101</td><td>101-151</td><td>151-201</td><td>201-301</td><td>301-601</td></tr>" +
                "</table></div>";
            return this._div;
        };
        map.addControl(new LegendControl(), 'bottom-left');
    }


    //图层信息框
    function updateInfoView(feature) {

        if (!feature && popup) {
            removePopup();
            return;
        }

        if (!popup) {
            popup = new mapboxgl.Popup({maxWidth: 'none'});
        }

        var statisticsData = getStatisticsData();
        var contentHTML = "<table><tbody><tr>" +
            "<td><div style='margin-left: 15px'>" +
            "<table><tbody><tr>" +
            "<td><div id='contentID' style='margin-top: 2px;margin-bottom: 2px;width:65px;height:60px;line-height:60px;text-align: center;font-size:35px;color: #ffffff;'>" + feature.attributes.aqi + "</div></td>" +
            "<td style='padding-right: 20px;'></td>" +
            "<td>" +
            "<div id='textID' style='text-align: left;font-size: 19px;text-shadow: 1px 1px 0 #ffffff;'>" + feature.attributes.quality + "</div>" +
            "<div style='font-size:10px;width:150px;'>" + feature.attributes.time_point + "</div>" +
            "<div style=' font-weight:lighter; font-size:14px;'>" + resources.text_currentCity + "：" + feature.attributes.area + "</div>" +
            "</td>" +
            "</tr> </tbody></table>" +
            "<table style='width:100%;font-size: 10px;border: 0 solid black;padding: 0;margin: 0;border-spacing: 0;'>" +
            "<tbody>" +
            "<tr>" +
            "<td style='font-weight:bold;width:45px;'></td><td style='font-weight:bold;width:51px;' align='center' nowrap='true'>Current</td>" +
            "<td  style=' font-weight:bold;width:49px;' align='center' nowrap='true'>Min</td>" +
            "<td style='font-weight:bold;width:49px;' align='center' nowrap='true'>Max</td> " +
            "</tr>" +
            "<tr style='height: 23px;'><td style='padding-left: 0;padding-right: 0'><div style='width:46px;'><span style='font-weight:bold;'>PM2.5</span></div></td>" +
            "<td style='font-size:11px;' align='center'>" + feature.attributes.pm2_5 + "</td>" +
            "<td style='color:#0086c8;font-size:11px;' align='center'>" + statisticsData.minNum + "</td>" +
            "<td  style='color:#ce3c3a;font-size:11px;' align='center'>" + statisticsData.maxNum + "</td>" +
            "</tr>" +
            "<tr style='height: 23px;'><td style='padding-left: 0;padding-right: 0'><div style='width:46px;'><span style='font-weight:bold;'>PM10</span></div></td>" +
            "<td style='font-size:11px;' align='center'>" + feature.attributes.pm10 + "</td>" +
            "<td style='color:#0086c8;font-size:11px;' align='center'>" + statisticsData.minpm10 + "</td>" +
            "<td  style='color:#ce3c3a;font-size:11px;' align='center'>" + statisticsData.maxpm10 + "</td>" +
            "</tr>" +
            "<tr style='height:23px;'><td style='padding-left: 0;padding-right: 0'><div style='width:46px;'><span style='font-weight:bold;'>O3</span></div></td>" +
            "<td style='font-size:11px;' align='center'>" + feature.attributes.o3 + "</td>" +
            "<td style='color:#0086c8;font-size:11px;' align='center'>" + statisticsData.minO3 + "</td>" +
            "<td style='color:#ce3c3a;font-size:11px;' align='center'>" + statisticsData.maxO3 + "</td></td>" +
            "</tr>" +
            "<tr style='height: 23px;'><td style='padding-left: 0;padding-right: 0'><div style='width:46px;'><span style='font-weight:bold;'>SO2</span></div></td>" +
            "<td style='font-size:11px;' align='center'>" + feature.attributes.so2 + "</td>" +
            "<td style='color:#0086c8;font-size:11px;' align='center'>" + statisticsData.minSO2 + "</td>" +
            "<td  style='color:#ce3c3a;font-size:11px;' align='center'>" + statisticsData.maxSO2 + "</td></td>" +
            "</tr>" +
            "<tr style='height: 23px;'><td style='padding-left: 0;padding-right: 0'><div style='width:46px;'><span style='font-weight:bold;'>NO2</span></div></td>" +
            "<td style='font-size:11px;' align='center'>" + feature.attributes.no2 + "</td>" +
            "<td style='color:#0086c8;font-size:11px;' align='center'>" + statisticsData.minNO2 + "</td>" +
            "<td  style='color:#ce3c3a;font-size:11px;' align='center'>" + statisticsData.maxNO2 + "</td></td>" +
            "</tr></tbody> </table></div></td></tr></tbody> </table>";

        var latLng = getLatLng(feature.attributes.lonLat);
        popup.setLngLat(latLng).setHTML(contentHTML).addTo(map);

        //设置弹框内容颜色
        var groups = themeLayer.styleGroups;
        for (var i = 0; i < groups.length; i++) {
            if (feature.attributes.aqi >= groups[0].start && feature.attributes.aqi < groups[0].end) {
                setColor("#6ACD06");
            }
            else if (feature.attributes.aqi >= groups[1].start && feature.attributes.aqi < groups[1].end) {
                setColor("#FBD12A");
            }
            else if (feature.attributes.aqi >= groups[2].start && feature.attributes.aqi < groups[2].end) {
                setColor("#FE8800");
            }
            else if (feature.attributes.aqi >= groups[3].start && feature.attributes.aqi < groups[3].end) {
                setColor("#FF0000");
            }
            else if (feature.attributes.aqi >= groups[4].start && feature.attributes.aqi < groups[4].end) {
                setColor("#CC0000");
            }
            else if (feature.attributes.aqi >= groups[5].start && feature.attributes.aqi < groups[5].end) {
                setColor("#960453");
            }
        }

        function setColor(color) {
            document.getElementById("contentID").style.backgroundColor = color;
            document.getElementById("textID").style.color = color;
        }

        function getLatLng(latLng) {
            var latLng = latLng.split(",");
            return [parseFloat(latLng[0]), parseFloat(latLng[1])]
        }
    }

    function getStatisticsData() {
        if (this.statisticsData) {
            return this.statisticsData;
        }
        //遍历数组，获取单个属性。组成新的数组
        var pm25 = [], pm10s = [], o3s = [], so2s = [], no2s = [];
        for (var i = 0; i < themeData.length; i++) {
            pm10s.push(themeData[i].pm2_5);
            pm25.push(themeData[i].pm10);
            o3s.push(themeData[i].o3);
            so2s.push(themeData[i].so2);
            no2s.push(themeData[i].no2);
        }
        //获取单个属性的最大最小值
        this.statisticsData = {
            maxNum: Math.max.apply(Math, pm25),
            minNum: Math.min.apply(Math, pm25),
            maxpm10: Math.max.apply(Math, pm10s),
            minpm10: Math.min.apply(Math, pm10s),
            maxO3: Math.max.apply(Math, o3s),
            minO3: Math.min.apply(Math, o3s),
            maxSO2: Math.max.apply(Math, so2s),
            minSO2: Math.min.apply(Math, so2s),
            maxNO2: Math.max.apply(Math, no2s),
            minNO2: Math.min.apply(Math, no2s)
        };
        return this.statisticsData;

    }

    function handleMouseOver(e) {
        if (e.target && e.target.refDataID) {
            var fid = e.target.refDataID;
            var fea = themeLayer.getFeatureById(fid);
            if (fea) {
                updateInfoView(fea);
            }
        } else {
            removePopup();
        }
    }

    function removePopup() {
        popup && popup.remove();
    }
</script>
</body>
</html>