高德地图行政区域聚合中的自定义绘制引擎如何设置偏移量?

问题：数字被行政区域名称给盖住了

解决办法：设置文字的偏移量

关键代码：

        //设置地图统计数字的偏移量(防止被地级市名称遮盖)
        if (feature.properties.name == '恩施土家族苗族自治州') {
          labelCtx.fillText(text, centerX - halfTxtWidth - 5, centerY + 20);
        }
        if (feature.properties.name == '咸宁市') {
          labelCtx.fillText(text, centerX - halfTxtWidth + 5, centerY + 10);
        }
        if (feature.properties.name == '武汉市') {
          labelCtx.fillText(text, centerX - halfTxtWidth - 10, centerY + 20);
        }
        if (feature.properties.name !== '恩施土家族苗族自治州' && feature.properties.name !== '咸宁市' && feature.properties.name !== '武汉市') {
          labelCtx.fillText(text, centerX - halfTxtWidth, centerY);
        }

完整代码如下：

initPage(DistrictCluster, $, utils, AMap) {

    let that = this;


    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) {
        // console.log('this', this);
        console.log('feature', feature.properties.name);

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

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

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

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

        // console.log('centerX', centerX, 'centerY', centerY);


        labelCtx.save();

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

        var text = 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';


        //设置地图统计数字的偏移量(防止被地级市名称遮盖)
        if (feature.properties.name == '恩施土家族苗族自治州') {
          labelCtx.fillText(text, centerX - halfTxtWidth - 5, centerY + 20);
        }
        if (feature.properties.name == '咸宁市') {
          labelCtx.fillText(text, centerX - halfTxtWidth + 5, centerY + 10);
        }
        if (feature.properties.name == '武汉市') {
          labelCtx.fillText(text, centerX - halfTxtWidth - 10, centerY + 20);
        }
        if (feature.properties.name !== '恩施土家族苗族自治州' && feature.properties.name !== '咸宁市' && feature.properties.name !== '武汉市') {
          labelCtx.fillText(text, centerX - halfTxtWidth, centerY);
        }

        labelCtx.restore();
      }
    });


    var distCluster = new DistrictCluster({
      map: this.map, //所属的地图实例
      zIndex: 20,
      //设置显示湖北省
      topAdcodes: [420000],
      autoSetFitView: false,
      getPosition: function (item) {

        if (!item) {
          return null;
        }

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

        //返回经纬度
        return [parseFloat(parts[0]), parseFloat(parts[1])];
      },
      //使用自定义的引擎类
      renderConstructor: MyRender,
      renderOptions: {
        minHeightToShowSubFeatures: -500,
        minSubAvgHeightToShowSubFeatures: -500,
        clusterMarkerClickToShowSub: false,
        getClusterMarker: null,
        getFeatureStyle: function (feature, dataItems) {

          if (dataItems.length >= 1 && dataItems.length <= 3) {

            return {
              fillStyle: '#F6A52F'
            };

          } else if (dataItems.length > 3) {
            return {
              fillStyle: '#F7472E'
            };
          } else if (dataItems.length == 0) {
            return {
              fillStyle: '#0182F6'
            };
          }

          return {};
        }
      }
    });

    $('<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);
      distCluster.zoomToShowSubFeatures(
        { adcode: 420000 }
      )
      distCluster.on('clusterMarkerClick', function (e, record) {
        console.log('clusterMarkerClick的e', e);
        console.log('clusterMarkerClick的record', record.feature.properties.name, record.feature.properties.center);
        // that.addMarker(record.feature.properties.center);
      })

      distCluster.on('featureClick', function (e, feature) {
        console.log('featureClick的e', e);
        console.log('featureClick的feature', feature);
        console.log('featureClick的e.type', e.type);
        console.log('featureClick的feature.properties.name', feature.properties.name);
        console.log('featureClick的feature.properties.center', feature.properties.center);
        // that.addMarker(feature.properties.center);
      });



    });
  }