点选取漏斗

使用PointSimplifier展现点选取漏斗效果。

源代码编辑器
<!doctype html>
<html lang="zh-CN">

<head>
    <!-- 原始地址：//webapi.amap.com/ui/1.1/ui/misc/PointSimplifier/examples/points-num-funnel.html -->
    <base href="//webapi.amap.com/ui/1.1/ui/misc/PointSimplifier/examples/" />
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
    <title>点选取漏斗</title>
    <style>
    html,
    body,
    #container {
        width: 100%;
        height: 100%;
        margin: 0px;
    }

    #loadingTip {
        position: absolute;
        z-index: 9999;
        top: 0;
        left: 0;
        padding: 3px 10px;
        background: red;
        color: #fff;
        font-size: 14px;
    }

    #funnelPanel {
        position: absolute;
        z-index: 99999;
        right: 10px;
        top: 10px;
        list-style: none;
        margin: 0;
        padding: 0;
        width: 230px;
        height: 320px;
        overflow: hidden;
        color: #FFEB3B;
    }

    #funnelPanel li {
        padding: 3px 5px;
        line-height: 150%;
        text-align: center;
        position: relative;
    }

    #funnelPanel li.filter {
        font-size: 13px;
    }

    #funnelPanel:before {
        content: '';
        display: block;
        position: absolute;
        margin: auto;
        width: 0;
        height: 0;
        border: solid rgba(0, 0, 0, 0);
        border-width: 600px 115px;
        top: 0;
        left: 0;
        right: 0;
        border-top-color: rgba(0, 0, 0, 0.8);
    }

    #funnelPanel li.leftNum {
        font-size: 14px;
        font-weight: 700;
        margin-bottom: 20px;
    }

    #funnelPanel li.leftNum .num {
        color: #ff9800;
    }

    #funnelPanel li.leftNum:before {
        content: '';
        display: block;
        position: absolute;
        margin: auto;
        width: 0;
        height: 0;
        border: solid rgba(0, 0, 0, 0);
        border-width: 20px 40px;
        bottom: -40px;
        left: 0;
        right: 0;
        border-top-color: rgba(158, 158, 158, 0.48);
    }

    #funnelPanel li.leftNum:last-child:before {
        display: none;
    }
    </style>
</head>

<body>
    <div id="container"></div>
    <ul id="funnelPanel"></ul>
    <script type="text/javascript" src='//webapi.amap.com/maps?v=2.0&key=您申请的key值'></script>
    <!-- UI组件库 1.0 -->
    <script src="//webapi.amap.com/ui/1.1/main.js?v=1.1.1"></script>
    <script type="text/javascript">
    //创建地图
    var map = new AMap.Map('container', {
        zoom: 4
    });

    AMapUI.load(['ui/misc/PointSimplifier', 'lib/$'], function(PointSimplifier, $) {

        if (!PointSimplifier.supportCanvas) {
            alert('当前环境不支持 Canvas！');
            return;
        }

        var pointSimplifierIns = new PointSimplifier({
            map: map, //所属的地图实例

            getPosition: function(item) {

                if (!item) {
                    return null;
                }

                var parts = item.split(',');

                //返回经纬度
                return [parseFloat(parts[0]), parseFloat(parts[1])];
            },
            getHoverTitle: function(dataItem, idx) {
                return idx + ': ' + dataItem;
            },
            renderOptions: {
                //点的样式
                pointStyle: {
                    width: 6,
                    height: 6
                },
                //鼠标hover时的title信息
                hoverTitleStyle: {
                    position: 'top'
                }
            }
        });

        window.pointSimplifierIns = pointSimplifierIns;

        $('<div id="loadingTip">加载数据，请稍候...</div>').appendTo(document.body);
        $.get('http://a.amap.com/amap-ui/static/data/10w.txt', function(csv) {

            var data = csv.split('\n');

            pointSimplifierIns.setData(data);

            $('#loadingTip').remove();
        });

        var filterDescMap = {
            'findQuadNodes': '找到与视野相交的四叉树节点',
            'topNAreaSelect': 'TopN区域抽取',
            'inMapViewBounds': '点是否在视野内',
            'hardcoreSpaceCheck': '硬核空间占位检测'
        };

        pointSimplifierIns.on('didRender', function(e, record) {

            var fItems = record.leftNumFunnel;

            var lines = [],
                all = 0;

            for (var i = 0, len = fItems.length; i < len; i++) {

                if (i > 0) {
                    lines.push('<li class="filter"><i class="desc">' + filterDescMap[fItems[i].name] + '</i></li>');
                } else {
                    all = fItems[i].leftNum;
                }
                lines.push('<li class="leftNum">' + (i == 0 ? '总数' : '剩余') +
                    '：<i class="num">' +
                    fItems[i].leftNum.toLocaleString() +
                    '</i></li>');
            }

            $('#funnelPanel').html(lines.join(''));
        });
    });
    </script>
</body>

</html>
控制台
清空
示例
中心常见
问题智能
客服