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


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138
							<!--********************************************************************
* Copyright© 2000 - 2021 SuperMap Software Co.Ltd. All rights reserved.
*********************************************************************-->
<!DOCTYPE html>
<html lang="en-US">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
    <title data-i18n="resources.text_graduatedSymbol"></title>
    <style>
        body, #map {
            position: absolute;
            width: 100%;
            height: 100%
        }

    </style>
    <script type="text/javascript" src="../data/chinaConsumptionLevel.js"></script>
</head>
<body style=" margin: 0;overflow: hidden;background: #fff;width: 100%;height:100%;position: absolute;top: 0;">
<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" src="../../dist/mapboxgl/include-mapboxgl.js"></script>
<script type="text/javascript">
    var themeLayer, popup,
        url = (window.isLocal ? window.server : "https://iserver.supermap.io") + "/iserver/services/map-china400/rest/maps/China_4326";
    var attribution = "<a href='https://www.mapbox.com/about/maps/' target='_blank'>© Mapbox </a>" +
            " with <span>© <a href='https://iclient.supermap.io' target='_blank'>SuperMap iClient</a> | </span>" +
            " Map Data <span>© <a href='http://support.supermap.com.cn/product/iServer.aspx' target='_blank'>SuperMap iServer</a></span> ";
    var map = new mapboxgl.Map({
        container: 'map',
        style: {
            "version": 8,
            "sources": {
                "raster-tiles": {
                    "attribution": attribution,
                    "type": "raster",
                    "tiles": [url + '/zxyTileImage.png?z={z}&x={x}&y={y}'],
                    "tileSize": 256,
                },
            },
            "layers": [{
                "id": "simple-tiles",
                "type": "raster",
                "source": "raster-tiles",
                "minzoom": 0,
                "maxzoom": 22
            }]
        },
        center: [116.85, 39.79],
        zoom: 3
    });
    map.addControl(new mapboxgl.NavigationControl(), 'top-left');
    map.addControl(new mapboxgl.supermap.LogoControl(), 'bottom-right');

    var features = [];
    for (var i = 0, len = chinaConsumptionLevel.length; i < len; i++) {
        // 省居民消费水平（单位：元）信息
        var provinceInfo = chinaConsumptionLevel[i];
        var geo = new mapboxgl.LngLat(provinceInfo[1], provinceInfo[2]);
        var attrs = {};
        attrs.NAME = provinceInfo[0];
        attrs.CON2009 = provinceInfo[3];
        var fea = new mapboxgl.supermap.ThemeFeature(geo, attrs);
        features.push(fea);
    }
    addThemeLayer();
    themeLayer.addFeatures(features);

    function addThemeLayer() {
        themeLayer = new mapboxgl.supermap.RankSymbolThemeLayer("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}
                }
            });
        map.addLayer(themeLayer);
        //专题图层 mousemove 事件
        themeLayer.on('mousemove', showInfoWin);
    }

    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 = themeLayer.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>";
            var tempPoint = map.unproject(new window.mapboxgl.Point(e.event.x, e.event.y));
            popup = new mapboxgl.Popup({closeOnClick: false})
                .setLngLat([tempPoint.lng, tempPoint.lat])
                .setHTML(contentHTML)
                .addTo(map);
            return;
        }
        closeInfoWin();
    }

    // 移除地图弹窗
    function closeInfoWin() {
        if (popup) {
            popup.remove(map);
        }
    }

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