fuyuhang
/
Project_yhfu
spogulis no http://121.37.83.100:3000/sooka_onest/sooka_onest_forestfire_vue2_visualization.git


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306
							<!--********************************************************************
* Copyright© 2000 - 2021 SuperMap Software Co.Ltd. All rights reserved.
*********************************************************************-->
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title data-i18n="resources.title_labelThemeLayer"></title>
    <script type="text/javascript" include="bootstrap,widgets.alert" src="../js/include-web.js"></script>
    <script type="text/javascript" src="../../dist/leaflet/include-leaflet.js"></script>
    <style type="text/css">
        .legend td {
            width: 60px;
            height: 12px;
            font-size: 12px;
        }

        .leaflet-popup-content {
            margin: 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="../data/themeLableData.js"></script>
<script type="text/javascript">

    var host = window.isLocal ? window.server : "https://iserver.supermap.io";
    var map, themeLayer, infoView,
        baseUrl = host + "/iserver/services/map-china400/rest/maps/China";

    init();

    function init() {
        // 检测是否支持 Canvas
        if (!document.createElement('canvas').getContext) {
            widgets.alert.showAlert(resources.msg_supportCanvas, false);
            return;
        }

        map = L.map("map", {
            crs: L.CRS.EPSG3857,
            center: [35, 106],
            maxZoom: 18,
            zoom: 3
        });
        L.supermap.tiledMapLayer(baseUrl).addTo(map);
        initThemeLayer();
        initLegendView();
    }

    function initThemeLayer() {
        themeLayer = L.supermap.labelThemeLayer("ThemeLayer").addTo(map);

        themeLayer.style = new SuperMap.ThemeStyle({
            labelRect: true,
            fontColor: "#000000",
            fontWeight: "bolder",
            fontSize: "18px",
            fill: true,
            fillColor: "#FFFFFF",
            fillOpacity: 1,
            stroke: false,
            strokeColor: "#8B7B8B"
        });
        //用于专题图的属性字段名称
        themeLayer.themeField = "aqi";
        //风格数组，设定值对应的样式
        themeLayer.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"
                }
            }
        ];
        themeLayer.on("mousemove", handleMouseOver);

        addThemeFeatures();
    }

    function addThemeFeatures() {
        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 = L.supermap.themeFeature([lat, lng, text], themeData[i]);
            labelFeatures.push(feat);
        }
        themeLayer.addFeatures(labelFeatures);
    }

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

        if (!feature && infoView) {
            infoView.remove();
            return;
        }
        if (!infoView) {
            infoView = L.popup();
        }

        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;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);
        infoView.setLatLng(latLng).setContent(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 L.latLng(parseFloat(latLng[1]), parseFloat(latLng[0]));
        }
    }

    //图例控件
    function initLegendView() {
        var legendView = L.control({position: 'bottomleft'});
        legendView.onAdd = function () {
            this._div = L.DomUtil.create('div', '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>";
            handleMapEvent(this._div, this._map);
            return this._div;
        };
        legendView.addTo(map);
    }

    function handleMouseOver(evt) {
        if (evt.target && evt.target.refDataID) {
            var fea = themeLayer.getFeatureById(evt.target.refDataID);
            if (fea) {
                updateInfoView(fea);
            }
        } else if (infoView) {
            infoView.remove();
        }
    }

    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 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>