自定义绘制内容

使用PointSimplifier.renderOptions自定义海量点的不同元素样式

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

<head>
    <!-- 原始地址：//webapi.amap.com/ui/1.1/ui/misc/PointSimplifier/examples/custom-point-content.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;
    }
    /**
     * 定义my-hover-title 
     */
    
    .amap-ui-pointsimplifier-container .overlay-title.my-hover-title {
        font-size: 14px;
        line-height: 200%;
        font-style: italic;
        padding: 0 10px;
    }
    </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
    });

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

        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) {

                if (aIndex === bIndex) {
                    return 0;
                }

                return aIndex > bIndex ? -1 : 1;
            },
            getHoverTitle: function(dataItem, idx) {
                return '序号: ' + idx;
            },
            renderOptions: {
                //点的样式
                pointStyle: {
                    //绘制点占据的矩形区域
                    content: function(ctx, x, y, width, height) {

                        //注意，这里的width和height可能不同于pointStyle里面的width/height， 高清屏幕下会存在比例缩放

                        //这里绘制一个圆顶锥形

                        var yPos = 1 / 3;

                        var top = [x + width / 2, y],
                            right = [x + width, y + height * yPos],
                            bottom = [x + width / 2, y + height],
                            left = [x, y + height * yPos];

                        ctx.moveTo(left[0], left[1]);
                        ctx.arcTo(top[0], top[1], right[0], right[1], width / 3);
                        ctx.lineTo(right[0], right[1]);
                        ctx.lineTo(bottom[0], bottom[1]);
                        ctx.lineTo(left[0], left[1]);

                    },
                    //宽度
                    width: 15,
                    //高度
                    height: 24,
                    offset: ['-50%', '-100%'],
                    fillStyle: '#316395',
                    lineWidth: 1,
                    strokeStyle: 'gray'
                },
                topNAreaStyle: {
                    content: function(ctx, x, y, width, height) {

                        //绘制一个连接矩形四边中点的菱形

                        var top = [x + width / 2, y],
                            right = [x + width, y + height * 1 / 2],
                            bottom = [x + width / 2, y + height],
                            left = [x, y + height * 1 / 2];

                        ctx.moveTo(top[0], top[1]);
                        ctx.lineTo(right[0], right[1]);
                        ctx.lineTo(bottom[0], bottom[1]);
                        ctx.lineTo(left[0], left[1]);
                        ctx.lineTo(top[0], top[1]);

                    },
                },
                //鼠标hover时，绘制的叠加点的样式
                pointHoverStyle: {
                    width: 10,
                    height: 10,
                    content: 'circle'
                },
                //鼠标hover时显示的title样式
                hoverTitleStyle: {
                    classNames: 'my-hover-title',
                    offset: [0, -15],
                    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();
        });
    });
    </script>
</body>

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