点击后展示海量点

使用DistrictCluster实现点击某行政区后，展示区域内海量点的效果。

源代码编辑器
复制
运行
还原
          <!-- 重点：on('featureClick' ， getClusterRecord -->
<!doctype html>
<html lang="zh-CN">

<head>
    <!-- 原始地址：//webapi.amap.com/ui/1.1/ui/geo/DistrictCluster/examples/plus-point-simplifier-click.html -->
    <base href="//webapi.amap.com/ui/1.1/ui/geo/DistrictCluster/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;
    }
    </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
    });

    function initPage(DistrictCluster, PointSimplifier, $) {

        var pointSimplifierIns = new PointSimplifier({
            map: map, //所属的地图实例
            zIndex: 110,
            autoSetFitView: false, //禁止自动更新地图视野
            getPosition: function(item) {

                return item.position;
            },
            getHoverTitle: function(dataItem, idx) {
                return idx + ': ' + dataItem.dataItem;
            },
            renderOptions: {
                //点的样式
                pointStyle: {
                    width: 6,
                    height: 6,
                    fillStyle: 'rgba(153, 0, 153, 0.38)'
                },
                //鼠标hover时的title信息
                hoverTitleStyle: {
                    position: 'top'
                }
            }
        });

        var distCluster = new DistrictCluster({
            zIndex: 100,
            map: map, //所属的地图实例

            getPosition: function(item) {

                if (!item) {
                    return null;
                }

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

                //返回经纬度
                return [parseFloat(parts[0]), parseFloat(parts[1])];
            }
        });

        var currentAdcode = null;

        //监听区划面的点击
        distCluster.on('featureClick', function(e, feature) {


            currentAdcode = feature.properties.adcode;

            //获取该节点的聚合信息
            distCluster.getClusterRecord(currentAdcode, function(error, result) {

                //currentAdcode已经更新，有新的点击
                if (result.adcode !== currentAdcode) {
                    return;
                }

                //设置数据
                pointSimplifierIns.setData(result.dataItems);
            })
        });

        distCluster.on('renderFinish', function(e, result) {

            var features = result.features, //当前绘制的features
                currentAdcodeExists = false;

            for (var i = 0, len = features.length; i < len; i++) {
                if (currentAdcode === features[i].properties.adcode) {

                    currentAdcodeExists = true;
                    break;
                }
            }

            if (!currentAdcodeExists) {
                //如果当前adcode没有绘制，清除？
                //pointSimplifierIns.setData(null);
            }
        });


        window.distCluster = distCluster;

        function refresh() {

            var zoom = map.getZoom();

            //获取 pointStyle
            var pointStyle = pointSimplifierIns.getRenderOptions().pointStyle;

            //根据当前zoom调整点的尺寸
            pointStyle.width = pointStyle.height = 2 * Math.pow(1.2, map.getZoom() - 3);

            // var zoom = map.getZoom();

            // if (zoom < 10) {

            //     pointSimplifierIns.hide();

            // } else {

            //     pointSimplifierIns.show();
            // }
        }

        map.on('zoomend', function() {
            refresh();
        });

        refresh();

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

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

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

            distCluster.setData(data);
        });
    }

    //加载相关组件
    AMapUI.load(['ui/geo/DistrictCluster', 'ui/misc/PointSimplifier', 'lib/$'], function(DistrictCluster, PointSimplifier, $) {

        //启动页面
        initPage(DistrictCluster, PointSimplifier, $);
    });
    </script>
</body>

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