高德地图 Web JS API UI组件示例学习笔记（8）——行政区划聚合（一）

本文链接：https://blog.csdn.net/hequhecong10857/article/details/103759343

文章目录

区划聚合
点击后显示聚合标注
定制聚合信息标注
自定义绘制引擎
事件支持

区划聚合

使用DistrictCluster实现按照行政区划聚合大量点信息的展示。

function initPage(DistrictCluster, $) {
      var distCluster = new DistrictCluster({
        map: map, //所属的地图实例
        zIndex: 11,
        getPosition: function (item) {
          if (!item) {
            return null;
          }
          var parts = item.split(',');
          //返回经纬度
          return [parseFloat(parts[0]), parseFloat(parts[1])];
        }
      });

      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');
        // 返回111282个坐标点
        console.log(data);
        
        distCluster.setData(data);
      });
    }

    //加载相关组件
    AMapUI.load(['ui/geo/DistrictCluster', 'lib/$'], function (DistrictCluster, $) {
      window.DistrictCluster = DistrictCluster;
      //启动页面
      initPage(DistrictCluster, $);
    });

返回的是各个城市的坐标点数据：
在这里插入图片描述

点击后显示聚合标注

使用DistrictCluster实现点击后显示聚合标注的效果。

function initPage(DistrictCluster, $) {
      var distCluster = new DistrictCluster({
        map: map, //所属的地图实例
        zIndex: 11,
        // 获取经纬度坐标
        getPosition: function (item) {
          if (!item) {
            return null;
          }
          var parts = item.split(',');
          // 依次打印所有的坐标点数据
          // console.log("parts", parts);
          //返回经纬度
          return [parseFloat(parts[0]), parseFloat(parts[1])];
        },
        renderOptions: {
          //marker的位置随交互变化
          clusterMarkerKeepConsistent: false,
          getClusterMarkerPosition: function (feature) {
            //返回之前存储的点击位置
            return currentLngLat;
          },
          // 获取点击之后的聚合点
          getClusterMarker: function (feature, dataItems, recycledMarker) {
            //不是当前feature，直接返回null
            if (feature.properties.adcode !== currentAdcode) {
              return null;
            }
            // 打印当前点击的feature
            // console.log("feature", feature);
            // 打印当前点击的dataItems
            // 包括dataIndex、dataItem、position
            // console.log("dataItems", dataItems);
            // console.log("recycledMarker", recycledMarker);

            var container,
              title,
              body,
              nodeClassNames = {
                // 行政区划的名称，如北京市
                title: 'amap-ui-district-cluster-marker-title',
                // 区划名称后面的数字
                body: 'amap-ui-district-cluster-marker-body',
                // 内容框，包含了前两者
                container: 'amap-ui-district-cluster-marker'
              };

            if (recycledMarker) {
              container = recycledMarker.getContent();
              title = $(container).find('.' + nodeClassNames.title)[0];
              body = $(container).find('.' + nodeClassNames.body)[0];
            } else {
              container = document.createElement('div');
              title = document.createElement('span');
              title.className = nodeClassNames.title;
              body = document.createElement('span');
              body.className = nodeClassNames.body;
              container.appendChild(title);
              container.appendChild(body);
            }

            // 属性信息
            var props = feature.properties,
              routeNames = [];
            var classNameList = [nodeClassNames.container, 'level_' + props.level, 'adcode_' + props.adcode];
            // 赋值container节点的class名称
            container.className = classNameList.join(' ');
            if (routeNames.length > 0) {
              routeNames.push(props.name);
              container.setAttribute('title', routeNames.join('>'));
            } else {
              container.removeAttribute('title');
            }
            // 将要素的属性名赋给title
            $(title).html(props.name);
            // 将要素的dataItems的个数赋给body
            $(body).html(dataItems.length);
            // 创建一个结果marker
            var resultMarker = recycledMarker || new AMap.Marker({
              topWhenClick: true,
              offset: new AMap.Pixel(-20, -30),
              content: container
            });
            return resultMarker;
          }
        }
      });

      var currentAdcode = null,
        currentLngLat = null;

      //监听区划面的点击
      distCluster.on('featureClick', function (e, feature) {
        currentAdcode = feature.properties.adcode;
        //记住点击位置
        currentLngLat = e.originalEvent.lnglat;
        //重绘
        distCluster.renderLater();
      });

      //监听区划面之外的点击
      distCluster.on('outsideClick', function (e) {
        currentAdcode = currentLngLat = null;
        //重绘
        distCluster.renderLater();
      });

      window.distCluster = distCluster;

      // 加载txt数据
      $('<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/$'], function (DistrictCluster, $) {
      window.DistrictCluster = DistrictCluster;
      //启动页面
      initPage(DistrictCluster, $);
    });

定制聚合信息标注

使用DistrictCluster实现定制聚合信息标注。
自定义标注中显示的内容及标注的位置。

function initPage(DistrictCluster, $) {
      var distCluster = new DistrictCluster({
        map: map, //所属的地图实例
        zIndex: 11,
        getPosition: function (item) {
          if (!item) {
            return null;
          }
          var parts = item.split(',');
          //返回经纬度
          return [parseFloat(parts[0]), parseFloat(parts[1])];
        },

        renderOptions: {
          //显示在所辖数据点的平均位置
          getClusterMarkerPosition: DistrictCluster.ClusterMarkerPositionStrategy.AVERAGE_POINTS_POSITION,
          getClusterMarker: function (feature, dataItems, recycledMarker) {

            //label内容
            var content = feature.properties.name + ' (' + dataItems.length + ')';

            var label = {
              offset: new AMap.Pixel(16, 18), //修改label相对于marker的位置
              content: content
            };

            //存在可回收利用的marker
            if (recycledMarker) {
              //直接更新内容返回
              recycledMarker.setLabel(label);
              return recycledMarker;
            }

            //返回一个新的Marker
            return new AMap.Marker({
              label: label
            });
          }
        }
      });

      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/$'], function (DistrictCluster, $) {
      window.DistrictCluster = DistrictCluster;
      //启动页面
      initPage(DistrictCluster, $);
    });

DistrictCluster内部提供了几类实现，以便快捷赋值，包括：
1.DistrictCluster.ClusterMarkerPositionStrategy.CENTER（默认）
返回行政中心
2.DistrictCluster.ClusterMarkerPositionStrategy.CENTROID
返回区划面的质心（区划面为凹多边形时返回行政中心，比如甘肃）
3.DistrictCluster.ClusterMarkerPositionStrategy.AVERAGE_POINTS_POSITION
返回该区划面下辖的数据点的平均位置（各个点的经纬度加总平均）

自定义绘制引擎

使用DistrictCluster实现行政区面的自定义绘制。
绘制一个蓝底白字的标注，去掉了水滴状的点标记。

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);
      });
    }

事件支持

使用DistrictCluster的事件支持。
示例了对地图feature和点标注的多个事件监听。

function initPage(DistrictCluster, $) {
      var distCluster = new DistrictCluster({
        map: map, //所属的地图实例
        zIndex: 11,
        getPosition: function (item) {
          if (!item) {
            return null;
          }
          var parts = item.split(',');
          //返回经纬度
          return [parseFloat(parts[0]), parseFloat(parts[1])];
        },
        renderOptions: {
          // 开启地图feature的事件监听
          featureEventSupport: true,
          // 开启Marker的事件监听
          clusterMarkerEventSupport: true,
          //标注信息Marker上需要监听的事件
          clusterMarkerEventNames: ['click', 'rightclick', 'mouseover', 'mouseout']
        }
      });

      window.distCluster = distCluster;
      // 实现了对地图feature的事件监听
      distCluster.on('featureClick featureMouseover featureMouseout', function (e, feature) {
        $('#infoTip').html(e.type + ': ' + feature.properties.name);
      });
      // 实现了对clusterMarker的事件监听
      distCluster.on('clusterMarkerClick clusterMarkerRightclick clusterMarkerMouseover clusterMarkerMouseout',
        function (e, record) {
          $('#infoTip').html(e.type + ': ' + record.feature.properties.name);
        });

      $('<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');
        // console.log(data.length);
        distCluster.setData(data);
      });
    }

    //加载相关组件
    AMapUI.load(['ui/geo/DistrictCluster', 'lib/$'], function (DistrictCluster, $) {
      //启动页面
      initPage(DistrictCluster, $);
    });