自定义绘制引擎

使用DistrictCluster实现行政区面的自定义绘制。

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

<head>
    <!-- 原始地址：//webapi.amap.com/ui/1.1/ui/geo/DistrictCluster/examples/custom-render.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, $, utils) {

        function MyRender(distClusterIns, opts) {
            //直接调用父类的构造函数
            MyRender.__super__.constructor.apply(this, arguments);
        }

        //继承默认引擎
        utils.inherit(MyRender, DistrictCluster.Render.Default);

        utils.extend(MyRender.prototype, {
            drawFeaturePolygons: function(ctx, polygons, styleOptions, feature, dataItems) {
                //调用父类方法
                MyRender.__super__.drawFeaturePolygons.apply(this, arguments);

                //直接绘制聚合信息
                this.drawMyLabel(feature, dataItems);
            },
            _initContainter: function() {
                //调用父类方法
                MyRender.__super__._initContainter.apply(this, arguments);

                //创建一个新的canvas
                this._createCanvas('mylabel', this._container);
            },
            /**
             * 绘制一个蓝底白字的label替代聚合标注
             */
            drawMyLabel: function(feature, dataItems) {

                var pixelRatio = this.getPixelRatio(); //高清下存在比例放大

                var containerPos = map.lngLatToContainer(feature.properties.centroid || feature.properties.center);

                var labelCtx = this._getCanvasCxt('mylabel');

                //文字的中心点
                var centerX = containerPos.getX() * pixelRatio,
                    centerY = containerPos.getY() * pixelRatio;

                labelCtx.save();

                labelCtx.font = 14 * pixelRatio + 'px 微软雅黑';

                var text = feature.properties.name + ' (' + dataItems.length + ')';

                var textMetrics = labelCtx.measureText(text);

                var halfTxtWidth = textMetrics.width / 2;

                labelCtx.fillStyle = '#3366cc';
                //绘制一个蓝色背景
                labelCtx.fillRect(centerX - halfTxtWidth - 3 * pixelRatio,
                    centerY - 11 * pixelRatio,
                    textMetrics.width + 6 * pixelRatio,
                    22 * pixelRatio);


                labelCtx.fillStyle = '#ffffff';
                labelCtx.textBaseline = 'middle';
                labelCtx.fillText(text, centerX - halfTxtWidth, centerY);

                labelCtx.restore();
            }
        });


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

            getPosition: function(item) {

                if (!item) {
                    return null;
                }

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

                //返回经纬度
                return [parseFloat(parts[0]), parseFloat(parts[1])];
            },
            //使用自定义的引擎类
            renderConstructor: MyRender,
            renderOptions: {
                //不再使用聚合标注
                getClusterMarker: null,
                //点击区划面后切换到子级区划
                featureClickToShowSub: true
            }
        });

        window.distCluster = distCluster;

        $('<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', 'lib/$', 'lib/utils'], function(DistrictCluster, $, utils) {

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

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