Point Aggregation MarkerCluster

This article introduces two point aggregation plugins (AMap.MarkerCluster and AMap.IndexCluster), which respectively aggregate and display data based on distance and index dimensions, and can maintain good performance within 100,000 points. The following sections will introduce these two aggregation plugins respectively.

1、Aggregation by distance

1.1 Create Map

const map = new AMap.Map("container", {
  zoom: 8, 
  showOversea: true, //Enable world Map
  center: [77.193045, 28.59086],
  mapStyle: "amap://styles/whitesmoke", 
  viewMode: "2D", 
});

1.2 Create cluster point data

var points = [
  { lnglat: ["74.990286", "29.825462"], weight: 8 },
  { lnglat: ["75.001273", "29.739645"], weight: 1 },
  { lnglat: ["75.001273", "29.510441"], weight: 1 },
  { lnglat: ["75.061697", "29.098484"], weight: 1 },
  { lnglat: ["75.891165", "28.477451"], weight: 1 },
  { lnglat: ["76.121878", "28.863024"], weight: 8 },
  { lnglat: ["76.456961", "29.223205"], weight: 1 },
  { lnglat: ["78.736624", "29.280717"], weight: 1 },
  { lnglat: ["79.049734", "28.925545"], weight: 1 },
  { lnglat: ["79.154105", "28.40983"], weight: 1 },
  { lnglat: ["78.681692", "28.134071"], weight: 1 },
  { lnglat: ["77.940115", "28.588448"], weight: 1 },
  { lnglat: ["77.736868", "28.240589"], weight: 1 },
  { lnglat: ["77.874197", "27.706943"], weight: 1 },
  { lnglat: ["77.308401", "27.292781"], weight: 1 },
];

1.3 Custom icon style

• Fully custom icons

//Aggregation point style
var _renderClusterMarker = function (context) {
  //context is the callback parameter，
  //Includes the following attributes: marker: the current aggregation point, count: the number of points within the current aggregation point
  var clusterCount = context.count; //Number of points within the aggregated point
  context.marker.setContent(
    '<div style="background-color:#00ff00">' + clusterCount + "</div>"
  );
};
//Non-aggregated point style
var _renderMarker = function (context) {
  //context is the callback parameter,
  //Includes the following attributes marker: current non-aggregated points
  context.marker.setContent('<div style="background-color:#ff0000">1</div>');
};

• Custom icon

var styles = [
  {
    //The style of the aggregation point when the aggregation quantity is 1-10
    url: "//a.amap.com/jsapi_demos/static/images/blue.png", //The address of the image displayed by the icon
    size: new AMap.Size(32, 32), //The size of the image displayed by the icon
    offset: new AMap.Pixel(-16, -16), //The offset value of the icon's position on the map relative to the upper-left corner of the icon
    textColor: "#fff", //The color of the text
  },
  {
    //The style of aggregation points when the aggregation quantity is between 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",
  },
  {
    //The style of aggregation points when the aggregation quantity is between 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.4 Add aggregation component

• Use fully custom icon method

map.plugin(["AMap.MarkerCluster"], function () {
  cluster = new AMap.MarkerCluster(
    map, //Map instance
    points, //Massive point data, the data must contain latitude and longitude information fields lnglat
    {
      gridSize: 60, //Pixel size of the grid during data aggregation calculation
      renderClusterMarker: _renderClusterMarker, //Custom aggregated point style of the above steps
      renderMarker: _renderMarker, //Custom non-aggregated point style of the above steps
    }
  );
});

• Use custom icon method

map.plugin(["AMap.MarkerCluster"], function () {
  cluster = new AMap.MarkerCluster(
    map, //Map instance
    points, //Massive point data, the data must contain latitude and longitude information fields lnglat
    {
      styles: styles,
    }
  );
});

2、Aggregate by index

2.1 Create Map

const map = new AMap.Map("container", {
  zoom: 7, 
  showOversea: true, //Enable world Map
  center: [77.193045, 28.59086],
  mapStyle: "amap://styles/whitesmoke", 
  viewMode: "2D", 
});

2.2 Create point aggregation data

var points = [
  {
    lnglat: ["77.502159141883", "28.857389101662"],
    one: "Level 1",
    two: "Level 2-1",
    three: "Level 3-1",
    four: "Level 4-1",
  },
  {
    lnglat: ["77.330629956358", "28.973479606791"],
    one: "Level 1",
    two: "Level 2-2",
    three: "Level 3-2",
    four: "Level 4-3",
  },
  {
    lnglat: ["77.444000625742", "28.920786491387"],
    // "weight": 8,
    one: "Level 1",
    two: "Level 2-1",
    three: "Level 3-3",
    four: "Level 4-4",
  },
];

2.3 Define point aggregation rules

var clusterIndexSet = {
  //Define point aggregation rules
  one: {
    minZoom: 2,
    maxZoom: 10,
  },
  two: {
    minZoom: 10,
    maxZoom: 12,
  },
  three: {
    minZoom: 12,
    maxZoom: 15,
  },
  four: {
    minZoom: 15,
    maxZoom: 22,
  },
};

2.4 Custom icon style

//Aggregation point style
var _renderClusterMarker = function (context) {
  //context is the callback parameter
  //Includes the following attributes: marker: the current aggregation point, count: the number of points within the current aggregation point
  var clusterCount = context.count; //Number of points within the aggregated point
  context.marker.setContent(
    '<div style="background-color:#00ff00">' + clusterCount + "</div>"
  );
};

2.5 Add aggregation component

map.plugin(["AMap.IndexCluster"], function () {
  indexCluster = new AMap.IndexCluster(map, points, {
    renderClusterMarker: _renderClusterMarker, //Custom Aggregation Point Style
    clusterIndexSet: clusterIndexSet, //Aggregation Rules
  });
});