点聚合 MarkerCluster 最后更新时间: 2024年02月21日

本文介绍两种点聚合插件（AMap.MarkerCluster和AMap.IndexCluster），它们分别以距离和索引的维度对数据进行聚合展示，在点数10万以内能够保持较好的性能。下文将分别介绍两种聚合插件。

1、按距离聚合

1.1 准备

1.2 创建地图

const map = new AMap.Map("container", {
  zoom: 8, //地图级别
  center: [116.405285, 39.904989], //地图中心点
  mapStyle: "amap://styles/whitesmoke", //设置地图的显示样式
  viewMode: "2D", //设置地图模式
});

1.3 创建聚合点数据

var points = [
  { weight: 8, lnglat: ["116.506647", "39.795337"] },
  { weight: 1, lnglat: ["116.843352", "40.377362"] },
  { weight: 1, lnglat: ["116.637122", "40.324272"] },
  { weight: 1, lnglat: ["116.105381", "39.937183"] },
  { weight: 1, lnglat: ["116.653525", "40.128936"] },
  { weight: 1, lnglat: ["116.486409", "39.921489"] },
  { weight: 1, lnglat: ["116.658603", "39.902486"] },
  { weight: 1, lnglat: ["116.338033", "39.728908"] },
  { weight: 1, lnglat: ["116.235906", "40.218085"] },
  { weight: 1, lnglat: ["116.366794", "39.915309"] },
  { weight: 1, lnglat: ["116.418757", "39.917544"] },
  { weight: 1, lnglat: ["116.139157", "39.735535"] },
  { weight: 1, lnglat: ["116.195445", "39.914601"] },
  { weight: 1, lnglat: ["116.310316", "39.956074"] },
  { weight: 1, lnglat: ["116.286968", "39.863642"] },
];

1.4 自定义图标样式

• 完全自定义图标

//聚合点样式
var _renderClusterMarker = function (context) {
  //context 为回调参数，
  //包含如下属性 marker:当前聚合点，count:当前聚合点内的点数量
  var clusterCount = context.count; //聚合点内点数量
  context.marker.setContent(
    '<div style="background-color:#00ff00">' + clusterCount + "</div>"
  );
};
//非聚合点样式
var _renderMarker = function (context) {
  //context 为回调参数，
  //包含如下属性 marker:当前非聚合点
  context.marker.setContent('<div style="background-color:#ff0000">1</div>');
};

• 自定义图标

var styles = [
  {
    //聚合量在1-10时，聚合点的样式
    url: "//a.amap.com/jsapi_demos/static/images/blue.png", //图标显示图片的地址
    size: new AMap.Size(32, 32), //图标显示图片的大小
    offset: new AMap.Pixel(-16, -16), //图标定位在地图上的位置相对于图标左上角的偏移值
    textColor: "#fff", //文字的颜色
  },
  {
    //聚合量在11-100时，聚合点的样式
    url: "//a.amap.com/jsapi_demos/static/images/green.png",
    size: new AMap.Size(32, 32),
    offset: new AMap.Pixel(-16, -16),
    textColor: "#fff",
  },
  {
    //聚合量在101-1000时，聚合点的样式
    url: "//a.amap.com/jsapi_demos/static/images/orange.png",
    size: new AMap.Size(36, 36),
    offset: new AMap.Pixel(-18, -18),
  },
];

1.5 添加聚合组件

• 使用完全自定义图标方式

map.plugin(["AMap.MarkerCluster"], function () {
  cluster = new AMap.MarkerCluster(
    map, //地图实例
    points, //海量点数据，数据中需包含经纬度信息字段 lnglat
    {
      gridSize: 60, //数据聚合计算时网格的像素大小
      renderClusterMarker: _renderClusterMarker, //上述步骤的自定义聚合点样式
      renderMarker: _renderMarker, //上述步骤的自定义非聚合点样式
    }
  );
});

• 使用自定义图标方式

map.plugin(["AMap.MarkerCluster"], function () {
  cluster = new AMap.MarkerCluster(
    map, //地图实例
    points, //海量点数据，数据中需包含经纬度信息字段 lnglat
    {
      styles: styles,
    }
  );
});

2、按索引聚合

2.1 创建地图

const map = new AMap.Map("container", {
  zoom: 8, //地图级别
  center: [116.405285, 39.904989], //地图中心点
  mapStyle: "amap://styles/whitesmoke", //设置地图的显示样式
  viewMode: "2D", //设置地图模式
});

2.2 创建点聚合数据

var points = [
  {
    lnglat: ["116.506621867519", "39.925077049391"],
    building: "晨光家园",
    district: "朝阳区",
    city: "北京",
  },
  {
    lnglat: ["116.464047215754", "39.871715123709"],
    building: "松榆西里",
    district: "朝阳区",
    city: "北京",
  },
  {
    lnglat: ["116.557773237391", "39.903674644798"],
    building: "北花园街6号院",
    district: "朝阳区",
    city: "北京",
  },
  {
    lnglat: ["116.40499876945", "39.958000356032"],
    building: "安定门外大街80号院",
    district: "东城区",
    city: "北京",
  },
  {
    lnglat: ["116.412789588355", "39.957363077042"],
    building: "地坛北门",
    district: "东城区",
    city: "北京",
  },
];

2.3 定义点聚合规则

var clusterIndexSet = {
  //定义点聚合规则
  city: {
    minZoom: 2,
    maxZoom: 10,
  },
  district: {
    minZoom: 10,
    maxZoom: 12,
  },
  building: {
    minZoom: 12,
    maxZoom: 22,
  },
};

2.4 自定义图标样式

//聚合点样式
var _renderClusterMarker = function (context) {
  //context 为回调参数，
  //包含如下属性 marker:当前聚合点，count:当前聚合点内的点数量
  var clusterCount = context.count; //聚合点内点数量
  context.marker.setContent(
    '<div style="background-color:#00ff00">' + clusterCount + "</div>"
  );
};

2.5 添加聚合组件

map.plugin(["AMap.IndexCluster"], function () {
  indexCluster = new AMap.IndexCluster(map, points, {
    renderClusterMarker: _renderClusterMarker, //自定义聚合点样式
    clusterIndexSet: clusterIndexSet, //聚合规则
  });
});