开发 地图 JS API 2.0 进阶教程 海量点 点聚合

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

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

1、按距离聚合

提示

点聚合支持用户自定义点标记。

1.1 准备

成为开发者并创建 key

为了正常调用 API ,请先注册成为高德开放平台开发者,并申请 web 平台(JS API)的 key 和安全密钥,点击 具体操作

提示

你在2021年12月02日以后申请的 key 需要配合你的安全密钥一起使用。

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"] },
];
提示

聚合点数据应该是一组包含经纬度信息的数组。

lnglat为经纬度信息字段

weight字段为可选参数,表示权重值,以权重高的点为中心进行聚合。

1.4 自定义图标样式

提示

若不配置图标样式,JS API 能为你展示默认样式。下面介绍完全自定义图标自定义图标两种方式。

  • 完全自定义图标
//聚合点样式
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-10,11-100,101-1000…的聚合点的样式,当开发者设置聚合样式少于实际叠加的点数,未设置部分按照系统默认样式显示。

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到10的时候,将使用 city 属性聚合,数据中 city 值相同的将被聚合在一起。

2.4 自定义图标样式

提示

若不配置图标样式,JS API 能为你展示默认样式,这里介绍完全自定义的图标样式。

//聚合点样式
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, //聚合规则
  });
});
返回顶部 示例中心 常见问题 智能客服 公众号
二维码