调整TopN选取

使用PointSimplifier配置renderOptions.getNumForTopSelect，显示不同topN配置下的海量点效果。

源代码编辑器
复制
运行
还原
          <!-- 重点参数：renderOptions -->
<!doctype html>
<html lang="zh-CN">

<head>
    <!-- 原始地址：//webapi.amap.com/ui/1.1/ui/misc/PointSimplifier/examples/adjust-topselect.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>调整TopN选取</title>
    <style>
    html,
    body {
        width: 100%;
        height: 100%;
        margin: 0px;
    }
    
    #outer-box {
        height: 100%;
        padding-right: 280px;
    }
    
    #container {
        height: 100%;
        width: 100%;
    }
    
    #panel {
        position: absolute;
        top: 0;
        right: 0;
        width: 280px;
        z-index: 999;
        height: calc(100% - 5px);
        overflow: hidden;
        overflow-y: auto;
    }
    
    #my-gui-container {
        height: 1200px;
    }
    
    #my-gui-container h3 {
        margin: 10px 0 3px 0;
    }
    
    #my-gui-container .close-button {
        display: none;
    }
    
    #my-gui-container .dg {
        float: none;
        margin: 0 0 5px 5px;
    }
    
    #loadingTip {
        position: absolute;
        z-index: 9999;
        top: 0;
        left: 0;
        padding: 3px 10px;
        background: red;
        color: #fff;
        font-size: 13px;
    }
    
    .hide {
        display: none;
    }
    </style>
</head>

<body>
    <div id="outer-box">
        <div id="container">
        </div>
        <div id="panel">
            <div id="my-gui-container"></div>
        </div>
    </div>
    <script type="text/javascript" src='//webapi.amap.com/maps?v=2.0&key=您申请的key值'></script>
    <script src="../../../../plug/ext/dat.gui.min.js?v=1.1.1"></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/$', 'lib/utils'], function(PointSimplifier, $, utils) {

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

        var pointSimplifierIns = new PointSimplifier({

            zIndex: 300,
            map: map,
            //maxChildrenOfQuadNode:3,

            getPosition: function(item) {

                if (!item) {
                    return null;
                }

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

                return [parseFloat(parts[0]), parseFloat(parts[1])];
            },
            compareDataItem: function(a, b, aIndex, bIndex) {

                return aIndex > bIndex ? 1 : -1;
            },
            getHoverTitle: function(dataItem, idx) {
                return '序号: ' + idx;
            },
            autoSetFitView: false,
            renderOptions: {
                getAreaSizeForTopSelect: function(zoom, pointSize) {

                    return Math.min(100, pointSize.width * pointSize.height * 1.5);
                },
                //topN选取的数量
                getNumForTopSelect: function(zoom, bounds, descendantsNum, pointSize) {

                    var idealNum = (bounds.width * bounds.height) / (pointSize.width * pointSize.height);

                    return Math.max(3, Math.ceil(idealNum * 1.5));
                }
            }
        });

        window.pointSimplifierIns = pointSimplifierIns;

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

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

            pointSimplifierIns.setData(data);

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

        var customContainer = document.getElementById('my-gui-container');

        function createRenderEngGui() {

            function RenderEngOptions() {
                this.drawQuadTree = true;
                this.drawShadowPoint = true;
            }

            var renderEngParams = new RenderEngOptions();

            var renderEngGui = new dat.GUI({
                width: 260,
                autoPlace: false,
            });

            renderEngGui.add(renderEngParams, 'drawQuadTree').onChange(render);
            renderEngGui.add(renderEngParams, 'drawShadowPoint').onChange(render);

            addGuiPanel('', '', renderEngGui);

            return renderEngParams;
        }

        function createTopSelectGui() {

            function TopSelectOptions() {
                this.topNAreaRadius = 80;
                this.topSelectNum = 1;
            }

            var topSelectParams = new TopSelectOptions();

            var topSelectGui = new dat.GUI({
                width: 260,
                autoPlace: false,
            });

            topSelectGui.add(topSelectParams, 'topNAreaRadius', 2, 100).step(2).onChange(render);

            topSelectGui.add(topSelectParams, 'topSelectNum', 0, 100).step(1).onChange(render);

            addGuiPanel('', '', topSelectGui);

            return topSelectParams;
        }


        function addGuiPanel(id, title, gui) {

            var container = document.createElement('div');

            container.id = id;

            if (title) {
                var tEle = document.createElement('h3');
                tEle.innerHTML = title;
                container.appendChild(tEle);
            }

            container.appendChild(gui.domElement);

            customContainer.appendChild(container);
        }

        var renderEngParams = createRenderEngGui(),
            topSelectParams = createTopSelectGui();

        function render() {

            pointSimplifierIns.renderEngine.setOptions(renderEngParams);

            pointSimplifierIns.renderEngine.setOptions({

                getAreaSizeForTopSelect: function(zoom, pointSize) {

                    return topSelectParams.topNAreaRadius * topSelectParams.topNAreaRadius;
                },
                //topN选取的数量
                getNumForTopSelect: function(zoom, bounds, descendantsNum, pointSize) {

                    return topSelectParams.topSelectNum;
                }

            });

            pointSimplifierIns.renderLater();
        }

        render();
    });
    </script>
</body>

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