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


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144
							<!--********************************************************************
* Copyright© 2000 - 2021 SuperMap Software Co.Ltd. All rights reserved.
*********************************************************************-->
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title data-i18n="resources.text_graduatedSymbol"></title>
    <script type="text/javascript" src="../js/include-web.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" src="../../dist/leaflet/include-leaflet.js"></script>
<script type="text/javascript" src="../data/chinaConsumptionLevel.js"></script>
<script type="text/javascript">
    var host = window.isLocal ? window.server : "https://iserver.supermap.io";
    var map, themeLayer,
        infowin, infowinPosition,
        baseUrl = host + "/iserver/services/map-china400/rest/maps/China_4326";

    init();

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

        map = L.map("map", {
            crs: L.CRS.EPSG4326,
            center: [34, 104],
            maxZoom: 18,
            zoom: 3
        });

        map.on("mousemove", function (e) {
            infowinPosition = e.layerPoint;
        });

        L.supermap.tiledMapLayer(baseUrl).addTo(map);
        initThemeLayer();
    }

    function initThemeLayer() {
        // 创建一个圆形符号专题图层
        themeLayer = L.supermap.rankSymbolThemeLayer("themeLayer", SuperMap.ChartType.CIRCLE);

        // 指定用于专题图制作的属性字段  详看下面 addThemeLayer（）中的feature.attrs.CON2009
        themeLayer.themeField = "CON2009";

        // 配置图表参数
        themeLayer.symbolSetting = {
            //允许图形展示的值域范围，此范围外的数据将不制作图图形,必设参数
            codomain: [0, 40000],
            //圆最大半径 默认100
            maxR: 100,
            //圆最小半径 默认0
            minR: 0,
            // 圆形样式
            circleStyle: {fillOpacity: 0.8},
            // 符号专题图填充颜色
            fillColor: "#FFA500",
            // 专题图hover 样式
            circleHoverStyle: {fillOpacity: 1}
        };
        themeLayer.addTo(map);
        // 注册专题图 mousemove, mouseout事件(注意：专题图图层对象自带 on 函数，没有 events 对象)
        themeLayer.on("mousemove", showInfoWin);
        themeLayer.on("mouseout", closeInfoWin);
        addThemeFeatures();
    }

    //构建 feature 数据
    function addThemeFeatures() {
        clearThemeLayer();
        var features = [];
        for (var i = 0, len = chinaConsumptionLevel.length; i < len; i++) {
            // 省居民消费水平（单位：元）信息
            var provinceInfo = chinaConsumptionLevel[i];
            var geo = L.point(provinceInfo[1], provinceInfo[2]);
            var attrs = {NAME: provinceInfo[0], CON2009: provinceInfo[3]};
            var feature = L.supermap.themeFeature(geo, attrs);
            features.push(feature);
        }
        themeLayer.addFeatures(features);
    }

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

    // 显示地图弹窗
    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);
            if (!fea) {
                return;
            }
            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 latLng = map.layerPointToLatLng(infowinPosition);
            if (!infowin) {
                infowin = L.popup();
            }
            infowin.setLatLng(latLng);
            infowin.setContent(contentHTML);
            infowin.openOn(map);
        }
    }


    // 移除和销毁地图弹窗
    function closeInfoWin() {
        if (infowin) {
            try {
                infowin.remove();
            } catch (e) {
                alert(e.message);
            }
        }
    }
</script>
</body>
</html>