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


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212
							<!--********************************************************************
* 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_themeLabelLayer"></title>
    <style type="text/css">
        .editPane {
            position: absolute;
            right: 50px;
            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_themeLabelLayer"></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,widgets.alert" src="../js/include-web.js"></script>
<script type="text/javascript" exclude="iclient-classic" src="../../dist/classic/include-classic.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-world/rest/maps/World";

    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 = "CAP_POP";
    //标签分组数组
    strategy.styleGroups = [
        {
            start: 200000,
            end: 500000,
            style: {
                fontColor: "#FF4500",
                fontWeight: "bolder",
                fontSize: "18px"
            }
        },
        {
            start: 500000,
            end: 1000000,
            style: {
                fontColor: "#FF0000",
                fontWeight: "bolder",
                fontSize: "22px"
            }
        },
        {
            start: 1000000,
            end: 2000000,
            style: {
                fontColor: "#EE0000",
                fontWeight: "bolder",
                fontSize: "26px"
            }
        },
        {
            start: 2000000,
            end: 100000000,
            style: {
                fontColor: "#CD0000",
                fontWeight: "bolder",
                fontSize: "30px"
            }
        }
    ];

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

        //通过selectFeature控件为标签添加点击事件
        var callbacks = {
            click: function (feature) {
                closeInfoWin();

                //组织弹窗内容
                var contentHTML = "<div style=\'font-size:.8em; opacity: 0.8; overflow-y:hidden;\'>";
                contentHTML += "<div>" + resources.text_inCountry + feature.attributes.COUNTRY + "</div>";
                contentHTML += "<div>ID：" + feature.attributes.SmID + "</div>";
                contentHTML += "<div>"+resources.text_countsPOP + feature.attributes.CAP_POP + "</div>" + "</div>";
                //新建一个弹窗并加入地图
                popup = new SuperMap.Popup.FramedCloud("popwin", new SuperMap.LonLat(feature.attributes.SmX, feature.attributes.SmY), null, contentHTML, null, true, function () {
                    closeInfoWin();
                });
                map.addPopup(popup);
            }
        };

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

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

    //使用SQL查询Capitals数据集
    function addLabel() {
        clearLabels();
        var queryParam, queryBySQLParams, queryBySQLService;
        queryParam = new SuperMap.REST.FilterParameter({
            name: "Capitals@World.1"
        });
        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, j, labelFeas = [],  //文本标签要素数组
            label, //文本标签要素
            feature,
            result = queryEventArgs.result;
        if (result && result.recordsets) {
            for (i = 0; i < result.recordsets.length; i++) {
                if (result.recordsets[i].features) {
                    for (j = 0; j < result.recordsets[i].features.length; j++) {
                        feature = result.recordsets[i].features[j];
                        if (feature.attributes.CAPITAL) {
                            //新建GeoText对象（文本标签）
                            label = new SuperMap.Geometry.GeoText(feature.attributes.SmX, feature.attributes.SmY, feature.attributes.CAPITAL);
                            //新建标签要素并添加到标签要素数组。注：标签要素是指 geometry 类型为 SuperMap.Geometry.GeoText 的矢量要素（SuperMap.Feature.Vector）。
                            labelFeas.push(new SuperMap.Feature.Vector(label, feature.attributes));
                        }
                    }
                }
            }
        }
        //将标签要素添加到标签专题图层中
        vectorLayer.addFeatures(labelFeas);
    }

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

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

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