pengyu
/
tongyu_visu


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180
							<!--********************************************************************
* 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_worldCapitalsGraphBar"></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_worldCapitalsGraphBar"></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()" style="padding: 6px 30px;"/>
            <input type='button' id='btn2' class='btn btn-primary' data-i18n="[value]resources.text_input_value_clear"
                   onclick="clearThemeLayer()" style="padding: 6px 30px;"/>
        </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 type="text/javascript">
    var map, layer, themeLayer, infowin;
    var host = window.isLocal ? window.server : "https://iserver.supermap.io",
        url = host + "/iserver/services/map-world/rest/maps/World";
    // 统计图模块要求浏览器支持 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("World", url, {
        transparent: true,
        cacheEnabled: true
    }, {maxResolution: "auto"});
    layer.events.on({"layerInitialized": addLayer});

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

    // 指定用于专题图制作的属性字段
    themeLayer.themeFields = ["CAP_POP"];
    // 压盖处理权重
    themeLayer.overlayWeightField = "CAP_POP";

    // 配置图表参数
    themeLayer.chartsSetting = {
        // width，height，codomain 分别表示图表宽、高、数据值域；此三项参数为必设参数
        width: 30,
        height: 100,
        codomain: [0, 14000000],        // 允许图表展示的值域范围，此范围外的数据将不制作图表
        xShapeBlank: [0, 0, 0],   // 水平方向上的空白间距参数
        YOffset: -50,         // 向上偏移 50 像素
        useAxis: false,       // 不显示坐标轴
        useBackground: false       // 不显示背景框
    };

    // 注册 click 事件
    themeLayer.on("click", moveToCapital);

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

    //获取 feature 数据, 专题图的数据必须是 SuperMap.Feature.Vector
    function addThemeLayer() {
        clearThemeLayer();
        var queryParam, queryBySQLParams, queryBySQLService;
        queryParam = new SuperMap.REST.FilterParameter({
            name: "Capitals@World#1",
            // 只统计人口 > 1000000 的首都城市
            attributeFilter: "CAP_POP > 1000000"
        });
        queryBySQLParams = new SuperMap.REST.QueryBySQLParameters({
            queryParams: [queryParam]
        });
        queryBySQLService = new SuperMap.REST.QueryBySQLService(url, {
            eventListeners: {"processCompleted": processCompleted, "processFailed": processFailed}
        });
        queryBySQLService.processAsync(queryBySQLParams);
    }

    function processCompleted(queryEventArgs) {
        var i, result = queryEventArgs.result;
        if (result && result.recordsets) {
            for (i = 0; i < result.recordsets.length; i++) {
                if (result.recordsets[i].features) {
                    // 向专题图层添加用于制作专题图的feature数据
                    themeLayer.addFeatures(result.recordsets[i].features);
                }
            }
        }
    }

    function processFailed(e) {
        widgets.alert.showAlert(e.error.errorMsg, false);
    }

    // 定位到首都城市
    function moveToCapital(e) {
        if (e.target && e.target.refDataID) {
            closeInfoWin();

            // 获取图形对应的 feature
            var fea = themeLayer.getFeatureById(e.target.refDataID);
            // feature 的 bounds 中心
            var geoCenter = fea.geometry.getBounds().getCenterLonLat();
            // 定位到 feature 的 bounds 中心
            var lonLat = new SuperMap.LonLat(geoCenter.lon, geoCenter.lat);
            map.setCenter(lonLat, 4);

            // 弹窗内容
            var contentHTML = "<div style='color: #000; background-color: #fff'>";
            contentHTML += "<strong><i>" + fea.attributes.CAPITAL_CH + "</i></strong>";

            contentHTML += "<hr style='margin: 3px'>";
            contentHTML += resources.text_population + "<strong>" + fea.attributes.CAP_POP + "</strong>";
            contentHTML += "</div>";

            infowin = new SuperMap.Popup(
                "infowin",
                lonLat,
                new SuperMap.Size(150, 60),
                contentHTML,
                true,
                false,
                null);
            infowin.setBackgroundColor("#fff");
            infowin.setOpacity(0.8);
            if (infowin) map.removePopup(infowin);
            map.addPopup(infowin);
        }
    }

    function clearThemeLayer() {
        themeLayer.clear();
        closeInfoWin();
    }

    // 移除地图弹窗
    function closeInfoWin() {
        if (infowin) {
            try {
                map.removePopup(infowin);
            }
            catch (e) {
                widgets.alert.showAlert(e.message, false);
            }
        }
    }
</script>
</body>
</html>