闪烁效果

使用PointSimplifier.renderOptions.groupStyleOptions展示带闪烁效果的海量点。

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

<head>
    <!-- 原始地址：//webapi.amap.com/ui/1.1/ui/misc/PointSimplifier/examples/star.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;
        right: 0;
        padding: 3px 10px;
        background: red;
        color: #fff;
        font-size: 13px;
    }
    </style>
</head>

<body>
    <div id="container"></div>
    <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
    });

    //just some colors
    var colors = [
        '#0cc2f2',
        '#4fd2b1',
        '#90e36f',
        '#ffe700',
        '#ff9e00',
        '#ff6700',
        '#ff1800'
    ];

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

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

        var pointSimplifierIns = new PointSimplifier({
            zIndex: 115,
            autoSetFitView: false,
            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;
            },
            //使用GroupStyleRender
            renderConstructor: PointSimplifier.Render.Canvas.GroupStyleRender,
            renderOptions: {
                eventSupport: false, //禁止事件,对性能更友好
                //点的样式
                pointStyle: {
                    fillStyle: null,
                    width: 5,
                    height: 5
                },
                topNAreaStyle: null,
                getGroupId: function(item, idx) {

                    //随机返回一个组ID
                    return Math.ceil(colors.length * Math.random());
                },
                groupStyleOptions: function(gid) {

                    //随机设置大小
                    var radius = 2 + 10 * Math.random();

                    return {

                        pointStyle: radius > 0 ? {
                            content: function(ctx, x, y, width, height) {

                                var p = {
                                    x: x + width / 2,
                                    y: y + height / 2,
                                    radius: radius
                                };

                                ctx.beginPath();
                                var gradient = ctx.createRadialGradient(p.x, p.y, 0, p.x, p.y, p.radius);
                                gradient.addColorStop(0, "rgba(7,120,249,0.8)");
                                gradient.addColorStop(1, "rgba(7,120,249,0.1)");
                                ctx.fillStyle = gradient;
                                ctx.arc(p.x, p.y, p.radius, Math.PI * 2, false);
                                ctx.fill();

                            },

                            //fillStyle: colors[gid % colors.length],
                            width: radius * 2,
                            height: radius * 2
                        } : null,
                        pointHardcoreStyle: {
                            width: radius * 2 + 3,
                            height: radius * 2 + 3
                        }
                    };
                }

            }
        });


        //重复render
        setInterval(function() {
            pointSimplifierIns.render();
        }, 500)


        $('<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.slice(0, 5000));

            $('#loadingTip').remove();
        });
    });
    </script>
</body>

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