fuyuhang
/
Project_yhfu
réplica de http://121.37.83.100:3000/sooka_onest/sooka_onest_forestfire_vue2_visualization.git


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143
							<!--********************************************************************
* Copyright© 2000 - 2021 SuperMap Software Co.Ltd. All rights reserved.
*********************************************************************-->
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title data-i18n="resources.title_rankSymbolThemeLayer"></title>
    <script type="text/javascript" include="bootstrap" src="../js/include-web.js"></script>
    <script type="text/javascript" src="../../dist/ol/include-ol.js"></script>
    <script src='../data/chinaConsumptionLevel.js'></script>
</head>
<body style=" margin: 0;overflow: hidden;background: #fff;width: 100%;height:100%;position: absolute;top: 0;">
<div id="popup" class="ol-popup">
    <div id="popup-content"></div>
</div>
<div id="map" style="width:100%;height:100%"></div>
<script type="text/javascript">
    var map, themeSource,
        url = (window.isLocal ? window.server : "https://iserver.supermap.io") + "/iserver/services/map-china400/rest/maps/China_4326",
        container = document.getElementById('popup'),
        content = document.getElementById('popup-content'),
        overlay = new ol.Overlay(({
            element: container,
            autoPan: true,
            autoPanAnimation: {
                duration: 250
            }
        }));
    new ol.supermap.MapService(url).getMapInfo(function (serviceResult) {
        var mapJSONObj = serviceResult.result;
        map = new ol.Map({
            target: 'map',
            controls: ol.control.defaults({attributionOptions: {collapsed: false}})
                .extend([new ol.supermap.control.Logo()]),
            view: new ol.View({
                center: [116.85, 39.79],
                zoom: 4,
                projection: 'EPSG:4326',
                multiWorld: true
            }),
            overlays: [overlay]
        });
        var options = ol.source.TileSuperMapRest.optionsFromMapJSON(url, mapJSONObj);
        options.wrapX = true;
        var layer = new ol.layer.Tile({
            source: new ol.source.TileSuperMapRest(options)
        });
        map.addLayer(layer);
        map.once('postrender', function () {
            var features = [];
            for (var i = 0, len = chinaConsumptionLevel.length; i < len; i++) {
                // 省居民消费水平（单位：元）信息
                var provinceInfo = chinaConsumptionLevel[i];
                var geo = new ol.geom.Point([provinceInfo[1], provinceInfo[2]]);
                //ThemeFeature 格式类型
                // var fea = new ol.supermap.ThemeFeature(geo, attrs);
                //支持传入 ol.Feature 格式类型：
                var fea = new ol.Feature({
                    geometry: geo,
                    NAME: provinceInfo[0],
                    CON2009: provinceInfo[3]
                });

                features.push(fea);
            }

            // 创建一个圆形符号专题图层
            themeSource = new ol.source.RankSymbol("RankSymbolLayer", "Circle",
                {
                    map: map,
                    attributions: " ",
                    themeField: "CON2009",
                    // 配置图表参数
                    symbolSetting: {
                        //必设参数
                        codomain: [0, 40000], // 允许图形展示的值域范围，此范围外的数据将不制作图图形
                        //圆最大半径 默认100
                        maxR: 100,
                        //圆最小半径 默认0
                        minR: 0,
                        // 圆形样式
                        circleStyle: {fillOpacity: 0.8},
                        // 符号专题图填充颜色
                        fillColor: "#FFA500",
                        // 专题图hover 样式
                        circleHoverStyle: {fillOpacity: 1}
                    }
                });
            themeSource.on("mousemove", showInfoWin);
            themeSource.addFeatures(features);
            var pointerInteraction = new ol.interaction.Pointer({
                handleMoveEvent: function (event) {
                    themeSource.fire('mousemove', event);
                }
            });
            map.addInteraction(pointerInteraction);
            map.addLayer(new ol.layer.Image({
                source: themeSource
            }));
            themeSource.setOpacity(0.1);
        });

        // 地图弹窗的显示
        function showInfoWin(e) {
            // e.target 是图形对象，即数据的可视化对象。
            // 图形对象的 refDataID 属性是数据（feature）的 id 属性，它指明图形对象是由那个数据制作而来;
            // 图形对象的 dataInfo 属性是图形对象表示的具体数据，他有两个属性，field、R 和 value;
            if (e.target && e.target.refDataID && e.target.dataInfo) {
                closeInfoWin();
                // 获取图形对应的数据 (feature)
                var fea = themeSource.getFeatureById(e.target.refDataID);
                var info = e.target.dataInfo;
                // 弹窗内容
                var contentHTML = "<div style='color: #000; background-color: #fff'>";
                contentHTML += resources.text_Name + "<br><strong>" + fea.attributes.NAME + "</strong>";
                contentHTML += "<hr style='margin: 3px'>";
                switch (info.field) {
                    case "CON2009":
                        contentHTML += resources.text_consumptionLevel1 + "09" + resources.text_consumptionLevel2 + " <br/><strong>" + info.value + "</strong>（" + resources.text_yuan + "）";
                        break;
                    default:
                        contentHTML += "No Data";
                }
                contentHTML += "</div>";
                content.innerHTML = contentHTML;
                overlay.setPosition(map.getCoordinateFromPixel([e.event.x, e.event.y]));
                return;
            }
            closeInfoWin();
        }

        // 移除地图弹窗
        function closeInfoWin() {
            if (overlay) {
                overlay.setPosition(undefined);
            }
        }
    });

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