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


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315
							<!--********************************************************************
* Copyright© 2000 - 2021 SuperMap Software Co.Ltd. All rights reserved.
*********************************************************************-->
<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title data-i18n="resources.title_themePM2_5"></title>
    <style type="text/css">
        .editPane {
            position: absolute;
            right: 60px;
            top: 50px;
            text-align: center;
            background: #FFF;
            z-index: 1000;
        }
    </style>
</head>
<body style=" margin: 0;overflow: hidden;background: #fff;width: 100%;height:100%;position: absolute;top: 0;">
<div class='panel panel-primary editPane' id='editPane' style="z-index: 99999">
    <div class='panel-heading'>
        <h5 class='panel-title text-center' data-i18n="resources.title_themePM2_5"></h5>
    </div>
    <div class='panel-body' id='params'>
        <p></p>
        <div align='right' class='button-group'>
            <input type='button' id='btn1' class='btn btn-primary' data-i18n="[value]resources.btn_addLabel"
                   onclick="addLabel()"/>
            <input type='button' id='btn2' class='btn btn-primary' data-i18n="[value]resources.text_input_value_clear"
                   onclick="clearLabels()"/>
        </div>
    </div>
</div>
<div id="map" style="margin:0 auto;width: 100%;height: 100%"></div>
<script type="text/javascript" include="bootstrap" src="../js/include-web.js"></script>
<script type="text/javascript" exclude="iclient-classic" src="../../dist/classic/include-classic.js"></script>
<script src="../data/themeLableData.js"></script>
<script type="text/javascript">
    var map, layer, vectorLayer, selectFeature, popup, strategy,
        host = window.isLocal ? window.server : "https://iserver.supermap.io",
        url = host + "/iserver/services/map-china400/rest/maps/China_4326";
    map = new SuperMap.Map("map", {
        controls: [
            new SuperMap.Control.LayerSwitcher(),
            new SuperMap.Control.ScaleLine(),
            new SuperMap.Control.Zoom(),
            new SuperMap.Control.Navigation({
                dragPanOptions: {
                    enableKinetic: true
                }
            })]
    });
    layer = new SuperMap.Layer.TiledDynamicRESTLayer("世界地图", url, {
        transparent: true,
        cacheEnabled: true
    }, {maxResolution: "auto"});
    layer.events.on({"layerInitialized": addLayer});
    //新建一个策略
    strategy = new SuperMap.Strategy.GeoText();
    //新建一个标签专题图层
    vectorLayer = new SuperMap.Layer.Vector("Label", {strategies: [strategy]});

    //设置标签的样式
    strategy.style = {
        fontColor: "#FF7F00",
        fontWeight: "bolder",
        fontSize: "14px",
        fill: true,
        fillColor: "#FFFFFF",
        fillOpacity: 1,
        stroke: true,
        strokeColor: "#8B7B8B"
    };

    //用于标签分组的属性字段名称
    strategy.groupField = "aqi";
    //标签分组数组,根据每个城市的空气指数来设置分段。
    strategy.styleGroups = [
        {
            start: 0,
            end: 51,
            style: {
                fontColor: "#000",
                fillColor: "#6ACD06",
                fontWeight: "bolder",
                fontSize: "17px"
            }
        },
        {
            start: 51,
            end: 101,
            style: {
                fontColor: "#000",
                fillColor: "#FBD12A",
                fontWeight: "bolder",
                fontSize: "19px"
            }
        },
        {
            start: 101,
            end: 151,
            style: {
                fontColor: "#000",
                fillColor: "#FE8800",
                fontWeight: "bolder",
                fontSize: "22px"
            }
        },
        {
            start: 151,
            end: 201,
            style: {
                fontColor: "#000",
                fillColor: "#FF0000",
                fontWeight: "bolder",
                fontSize: "24px"
            }
        },
        {
            start: 201,
            end: 301,
            style: {
                fontColor: "#000",
                fillColor: "#CC0000",
                fontWeight: "bolder",
                fontSize: "26px"
            }
        },
        {
            start: 301,
            end: 601,
            style: {
                fontColor: "#000",
                fillColor: "#960453",
                fontWeight: "bolder",
                fontSize: "28px"
            }
        }
    ];

    function addLayer() {
        map.addLayers([layer, vectorLayer]);
        map.setCenter(new SuperMap.LonLat(104.067923, 34.679943), 2);

        //兼容PC与移动端
        var broz = SuperMap.Util.getBrowser();
        var callbacks = {};
        if (broz.device === 'android' || broz.device === 'apple') {
            callbacks = {
                click: openInfoWin,
                clickout: closeInfoWin
            };
        }
        else {
            callbacks = {
                over: openInfoWin,
                out: closeInfoWin
            };
        }

        //实例化 selectFeature 控件
        // selectFeature = new SuperMap.Control.SelectFeature(vectorLayer,{callbacks:callbacks,hover:true});
        selectFeature = new SuperMap.Control.SelectFeature(vectorLayer, {callbacks: callbacks, hover: false});
        //map上添加控件
        map.addControl(selectFeature);
        //激活控件
        selectFeature.activate();
    }

    //打弹窗，显示具体信息
    function openInfoWin(feature) {
        closeInfoWin();
        var pm25 = [];
        var pm10s = [];
        var o3s = [];
        var so2s = [];
        var no2s = [];
        //遍历数组，获取单个属性。组成新的数组
        for (var i = 0; i < themeData.length; i++) {
            var pm2_5 = themeData[i].pm2_5;
            var pm10 = themeData[i].pm10;
            var o3 = themeData[i].o3;
            var so2 = themeData[i].so2;
            var no2 = themeData[i].no2;
            pm10s.push(pm10);
            pm25.push(pm2_5);
            o3s.push(o3);
            so2s.push(so2);
            no2s.push(no2);
        }
        //获取单个属性的最大最小值
        var maxNum = Math.max.apply(Math, pm25);
        var minNum = Math.min.apply(Math, pm25);
        var maxpm10 = Math.max.apply(Math, pm10s);
        var minpm10 = Math.min.apply(Math, pm10s);
        var maxO3 = Math.max.apply(Math, o3s);
        var minO3 = Math.min.apply(Math, o3s);
        var maxSO2 = Math.max.apply(Math, so2s);
        var minSO2 = Math.min.apply(Math, so2s);
        var maxNO2 = Math.max.apply(Math, no2s);
        var minNO2 = Math.min.apply(Math, no2s);
        //组织弹窗内容

        var contentHTML = "<table><tbody><tr>";
        contentHTML += " <td><div>";
        contentHTML += "<table><tbody><tr><td>";
        contentHTML += "<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>";
        contentHTML += "<td  style='padding-right: 1px;'></td>";
        contentHTML += "<td> <div id='textID'style='text-align: left;font-size: 19px;text-shadow: 1px 1px 0 #ffffff;'>" + feature.attributes.quality + "</div>";
        contentHTML += " <div style='font-size:9px;width:200px;float:left;'>" + feature.attributes.time_point + "</div>";
        contentHTML += "<div style=' font-weight:lighter; font-size:12px;'>" + resources.text_city+": " + feature.attributes.area + "</div>";
        contentHTML += " </td></tr> </tbody></table>";
        contentHTML += " <table style='font-size: 10px;border: 0px solid black;padding: 0px;margin: 0px;border-spacing: 0px;'>";
        contentHTML += " <tbody><tr> <td style='font-weight:bold;width:45px;'></td><td style='font-weight:bold;width:51px;' align='center' nowrap='true'>Current</td>";
        contentHTML += " <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>";
        contentHTML += "<tr style='height: 23px;'><td style='padding-left: 0px;padding-right: 0px'><div style='width:46px;'><span style='font-weight:bold;'>PM2.5</span></div></td>";
        contentHTML += " <td  style='font-size:11px;'align='center'>" + feature.attributes.pm2_5 + "</td>";
        contentHTML += "  <td style='color:#0086c8;font-size:11px;' align='center'>" + minNum + "</td><td  style='color:#ce3c3a;font-size:11px;' align='center'>" + maxNum + "</td>";
        contentHTML += "</tr><tr style='height: 23px;'><td style='padding-left: 0px;padding-right: 0px'><div style='width:46px;'>";
        contentHTML += "<span style='font-weight:bold;'>PM10</span>";
        contentHTML += "</div></td><td style='font-size:11px;'align='center'>" + feature.attributes.pm10 + "</td><td style='color:#0086c8;font-size:11px;' align='center'>" + minpm10 + "</td>";
        contentHTML += "<td  style='color:#ce3c3a;font-size:11px;' align='center'>" + maxpm10 + "</td>";
        contentHTML += "</tr><tr style='height:23px;'><td style='padding-left: 0px;padding-right: 0px'><div style='width:46px;'><span style='font-weight:bold;'>O3</span></div></td><td style='font-size:11px;'align='center'>" + feature.attributes.o3 + "</td>";
        contentHTML += "<td style='color:#0086c8;font-size:11px;' align='center'>" + minO3 + "</td><td  style='color:#ce3c3a;font-size:11px;' align='center'>" + maxO3 + "</td></td></tr>";
        contentHTML += "<tr style='height: 23px;'><td style='padding-left: 0px;padding-right: 0px'><div style='width:46px;'><span style='font-weight:bold;'>SO2</span></div></td>";
        contentHTML += "<td style='font-size:11px;'align='center'>" + feature.attributes.so2 + "</td><td style='color:#0086c8;font-size:11px;' align='center'>" + minSO2 + "</td><td  style='color:#ce3c3a;font-size:11px;' align='center'>" + maxSO2 + "</td></td></tr>";
        contentHTML += "<tr style='height: 23px;'><td style='padding-left: 0px;padding-right: 0px'><div style='width:46px;'><span style='font-weight:bold;'>NO2</span></div></td>";
        contentHTML += "<td style='font-size:11px;'align='center'>" + feature.attributes.no2 + "</td><td style='color:#0086c8;font-size:11px;' align='center'>" + minNO2 + "</td><td  style='color:#ce3c3a;font-size:11px;' align='center'>" + maxNO2 + "</td></td></tr>";
        contentHTML += "</tbody> </table></div></td></tr></tbody> </table>";
        //新建一个弹窗并加入地图
        var lonlat = feature.attributes.lonLat.split(",");
        var x = parseFloat(lonlat[0]);
        var y = parseFloat(lonlat[1]);
        var xy = map.getPixelFromLonLat(new SuperMap.LonLat(x, y));
        xy.x += 10;
        var postion = map.getLonLatFromPixel(new SuperMap.Pixel(xy.x, xy.y));
        //新建popup
        popup = new SuperMap.Popup("popwin", new SuperMap.LonLat(postion.lon, postion.lat), null, contentHTML, null, true, function () {
            closeInfoWin();
        });
        map.addPopup(popup);
        //设置div的背景颜色
        var groups = strategy.styleGroups;
        for (var i = 0; i < groups.length; i++) {
            if (feature.attributes.aqi >= groups[0].start && feature.attributes.aqi < groups[0].end) {
                popup.setBorder("2px solid #6ACD06");
                document.getElementById("contentID").style.backgroundColor = "#6ACD06";
                document.getElementById("textID").style.color = "#6ACD06";
            }
            else if (feature.attributes.aqi >= groups[1].start && feature.attributes.aqi < groups[1].end) {

                popup.setBorder("2px solid #FBD12A");
                document.getElementById("contentID").style.backgroundColor = "#FBD12A";
                document.getElementById("textID").style.color = "#FBD12A";
            }
            else if (feature.attributes.aqi >= groups[2].start && feature.attributes.aqi < groups[2].end) {
                popup.setBorder("2px solid #FE8800");
                document.getElementById("contentID").style.backgroundColor = "#FE8800";
                document.getElementById("textID").style.color = "#FE8800";
            }
            else if (feature.attributes.aqi >= groups[3].start && feature.attributes.aqi < groups[3].end) {
                popup.setBorder("2px solid #FF0000");
                document.getElementById("contentID").style.backgroundColor = "#FF0000";
                document.getElementById("textID").style.color = "#FF0000";
            }
            else if (feature.attributes.aqi >= groups[4].start && feature.attributes.aqi < groups[4].end) {
                popup.setBorder("2px solid #CC0000");
                document.getElementById("contentID").style.backgroundColor = "#CC0000";
                document.getElementById("textID").style.color = "#CC0000";
            }
            else if (feature.attributes.aqi >= groups[5].start && feature.attributes.aqi < groups[5].end) {

                popup.setBorder("2px solid #960453");
                document.getElementById("contentID").style.backgroundColor = "#960453";
                document.getElementById("textID").style.color = "#960453";
            }
        }
    }

    //关闭弹窗
    function closeInfoWin() {
        if (popup) {
            try {
                map.removePopup(popup);
            }
            catch (e) {
            }
        }
    }

    function addLabel() {
        clearLabels();
        var labelFeas = [];
        var label, labelVector;
        for (var i = 0; i < themeData.length; i++) {
            var lonlat = themeData[i].lonLat.split(",");
            var x = parseFloat(lonlat[0]);
            var y = parseFloat(lonlat[1]);
            var text = themeData[i].aqi;
            label = new SuperMap.Geometry.GeoText(x, y, text);
            labelVector = new SuperMap.Feature.Vector(label, themeData[i]);
            labelFeas.push(labelVector);
        }
        vectorLayer.addFeatures(labelFeas);
    }

    //清楚标签专题图层
    function clearLabels() {
        closeInfoWin();
        vectorLayer.removeAllFeatures();
    }
</script>
</body>
</html>