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


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226
							<!--********************************************************************
* 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_GraphBar3D"></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_GraphBar3D"></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_addThemeLayer" onclick="addThemeLayer()"/>
            <input type='button' id='btn2' class='btn btn-primary' data-i18n="[value]resources.text_input_value_clear" onclick="clearThemeLayer()"/>
        </div>
    </div>
</div>
<div id="map" style="margin:0 auto;width: 100%;height: 100%"></div>
<script type="text/javascript" exclude="iclient-classic" include="Bar3D" src="../../dist/classic/include-classic.js"></script>
<script type="text/javascript" include="bootstrap,widgets.alert" src="../js/include-web.js"></script>

<script src='../data/chinaConsumptionLevel.js'></script>
<script type="text/javascript">
    var map, layer, themeLayer, infowin, infowinPosition;
    var host = window.isLocal ? window.server : "https://iserver.supermap.io",
        url = host + "/iserver/services/map-china400/rest/maps/China_4326";

    // 统计图模块要求浏览器支持 Canvas 渲染
    if (!document.createElement('canvas').getContext) {
        widgets.alert.showAlert(resources.msg_supportCanvas, false);
    }

    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("China", url, {
        transparent: true,
        cacheEnabled: true
    }, {maxResolution: "auto"});
    layer.events.on({"layerInitialized": addLayer});

    // 创建一个三维柱状图（Bar3D）统计专题图图层
    themeLayer = new SuperMap.Layer.Graph("ThemeLayer", "Bar3D");

    // 指定用于专题图制作的属性字段
    themeLayer.themeFields = ["CON2009", "CON2010", "CON2011", "CON2012", "CON2013"];

    // 配置图表参数
    themeLayer.chartsSetting = {
        // width，height，codomain 分别表示图表宽、高、数据值域；此三项参数为必设参数
        width: 260,
        height: 120,
        codomain: [0, 40000], // 允许图表展示的值域范围，此范围外的数据将不制作图表
        // 3d 柱条正面样式（3d 柱条的侧面和顶面会以 3d 柱条正面样式为默认样式）
        barFaceStyle: {
            stroke: true
        },
        // 按字段设置 3d 柱条正面样式
        barFaceStyleByFields: [{fillColor: "#FFB980"}, {fillColor: "#5AB1EF"}, {fillColor: "#B6A2DE"}, {fillColor: "#2EC7C9"}, {fillColor: "#D87A80"}],
        // 3d 柱条正面 hover 样式（3d 柱条的侧面和顶面 hover 会以 3d 柱条正面 hover 样式为默认 hover 样式）
        barFaceHoverStyle: {
            stroke: true,
            strokeWidth: 1,
            strokeColor: "#ffff00"
        },
        xShapeBlank: [15, 15, 15],   // 水平方向上的空白间距参数
        axisYTick: 4,       // y 轴刻度数量
        useXReferenceLine: true,         // 使用参考线
        xReferenceLineStyle: {strokeColor: "#008acd", strokeOpacity: 0.4},         // 参考线样式
        axisYLabels: ["4万", "3万", "2万", "1万", "0"],         // y 轴标签
        axisXLabels: ["09年", "10年", "11年", "12年", "13年"],       // x 轴标签
        backgroundStyle: {         // 背景样式
            fillColor: "#d1eeee",
            shadowBlur: 12,
            shadowColor: "#d1eeee"
        },
        backgroundRadius: [5, 5, 5, 5]       // 背景框圆角参数
    };

    // 注册专题图 mousemove, mouseout事件(注意：专题图图层对象自带 on 函数，没有 events 对象)
    themeLayer.on("mousemove", showInfoWin);
    themeLayer.on("mouseout", closeInfoWin);

    themeLayer.setOpacity(0.9);

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

    //构建 feature 数据, 专题图的数据必须是 SuperMap.Feature.Vector
    function addThemeLayer() {
        clearThemeLayer();

        var features = [];
        for (var i = 0, len = chinaConsumptionLevel.length; i < len; i++) {
            // 省居民消费水平（单位：元）信息
            var provinceInfo = chinaConsumptionLevel[i];
            var geo = new SuperMap.Geometry.Point(provinceInfo[1], provinceInfo[2]);
            var attrs = {};
            attrs.NAME = provinceInfo[0];
            attrs.CON2009 = provinceInfo[3];
            attrs.CON2010 = provinceInfo[4];
            attrs.CON2011 = provinceInfo[5];
            attrs.CON2012 = provinceInfo[6];
            attrs.CON2013 = provinceInfo[7];

            var fea = new SuperMap.Feature.Vector(geo, attrs);
            features.push(fea);
        }

        themeLayer.addFeatures(features);
    }

    // 清除专题图层中的内容
    function clearThemeLayer() {
        themeLayer.clear();
        closeInfoWin();
    }

    // 注册地图 mousemove，用于获取当前鼠标在地图中的像素位置
    map.events.on({
        "mousemove": function (e) {
            infowinPosition = e.xy.clone();
            // 偏移
            infowinPosition.x += 40;
            infowinPosition.y -= 25;
        }
    });

    // 显示地图弹窗
    function showInfoWin(e) {
        // e.target 是图形对象，即数据的可视化对象，三维柱状图中是指三维柱条;
        // 图形对象的 refDataID 属性是数据（feature）的 id 属性，它指明图形对象是由那个数据制作而来;
        // 图形对象的 dataInfo 属性是图形对象表示的具体数据，他有两个属性，field 和 value;
        if (e.target && e.target.refDataID && e.target.dataInfo) {
            closeInfoWin();
            // 获取图形对应的数据 (feature)
            var fea = themeLayer.getFeatureById(e.target.refDataID);

            var info = e.target.dataInfo;

            // 弹窗内容
            var contentHTML = "<div style='color: #000; background-color: #fff'>";
            contentHTML += "省级行政区名称:<br><strong>" + fea.attributes.NAME + "</strong>";

            contentHTML += "<hr style='margin: 3px'>";
            switch (info.field) {
                case "CON2009":
                    contentHTML += "09年居民消费水平 <br/><strong>" + info.value + "</strong>（元）";
                    break;
                case "CON2010":
                    contentHTML += "10年居民消费水平 <br/><strong>" + info.value + "</strong>（元）";
                    break;
                case "CON2011":
                    contentHTML += "11年居民消费水平 <br/><strong>" + info.value + "</strong>（元）";
                    break;
                case "CON2012":
                    contentHTML += "12年居民消费水平 <br/><strong>" + info.value + "</strong>（元）";
                    break;
                case "CON2013":
                    contentHTML += "13年居民消费水平 <br/><strong>" + info.value + "</strong>（元）";
                    break;
                default:
                    contentHTML += "No Data";
            }
            contentHTML += "</div>";

            // 弹出框大小
            var infowinSize = (SuperMap.Browser.name == "firefox") ? new SuperMap.Size(150, 105) : new SuperMap.Size(140, 90);

            // 弹出窗地理位置
            var lonLat = map.getLonLatFromPixel(infowinPosition);
            infowin = new SuperMap.Popup(
                "infowin",
                lonLat,
                infowinSize,
                contentHTML,
                false,
                false,
                null);
            infowin.setBackgroundColor("#fff");
            infowin.setOpacity(0.8);
            if (infowin) map.removePopup(infowin);
            map.addPopup(infowin);
        }
    }

    // 移除和销毁地图弹窗
    function closeInfoWin() {
        if (infowin) {
            try {
                map.removePopup(infowin);
            }
            catch (e) {
                widgets.alert.showAlert(e.message,false);
            }
        }
    }

</script>
</body>
</html>