点聚合 (AMap.MarkerCluster)

在不同的地图缩放级别对海量的数据点进行聚合展示。目前点聚合插件在点的数量在10万以内时可以保持较好的性能。点聚合支持用户自定义点标记。

提示

来源 @vuemap/vue-amap 组件库

基础示例

静态属性

仅且可以初始化配置，不支持响应式。

名称类型说明
renderClusterMarkerFunction该方法用来实现聚合点的自定义绘制，由开发者自己实现，API 将在绘制每个聚合点的时候调用这个方法，可以实现聚合点样式的灵活设定，指定了 renderClusterMarker 后 styles 无效。
该函数的入参为一个Object，包含如下属性：
1. count: 当前聚合点下聚合的 Marker 的数量
2. marker: 当前聚合点显示的 Marker
renderMarkerFunction该方法用来实现非聚合点的自定义绘制，由开发者自己实现，API 将在绘制每个非聚合点的时候调用这个方法
该函数的入参为一个Object，包含如下属性：
marker: 非聚合点 Marker 对象
clusterByZoomChangeBoolean地图缩放过程中是否聚合。默认值 false。
reEventWhenUpdateBoolean是否在组件更新时重新注册事件，主要用于数组更新时，解决绑定了事件但事件的对象不会更新问题，默认false
extraOptionsObject额外扩展属性，会直接将属性拷贝到初始化的options中，当key与props内的一样时会被props覆盖

动态属性

支持响应式。

名称类型说明
pointsArray数据格式为一组含有经纬度信息的数组，如下所示。其中【经纬度】lnglat 为必填字段，【权重】weight 为可选字段,以权重高的点为中心进行聚合。示例: [{"lnglat":["113.864691","22.942327"], weight: 1},{"lnglat":["113.370643","22.938827"], weight: 8}]
gridSizeNumber聚合计算时网格的像素大小，默认60
maxZoomNumber最大的聚合级别，大于该级别就不进行相应的聚合。默认值为 18，即小于 18 级的级别均进行聚合，18 及以上级别不进行聚合
averageCenterBoolean聚合点的图标位置是否是所有聚合内点的中心点。默认为 true。数据中如果含有权重值，以权重高的点为中心进行聚合
stylesArray指定聚合后的点标记的图标样式，查看示例，可缺省，缺省时为默认样式
数据元素分别对应聚合量在1-10,11-100,101-1000…的聚合点的样式；
当用户设置聚合样式少于实际叠加的点数，未设置部分按照系统默认样式显示；
单个图标样式包括以下几个属性：
1. {string} url：图标显示图片的url地址（必选）
2. {AMap.Size} size：图标显示图片的大小（必选）
3. {AMap.Pixel} offset：图标定位在地图上的位置相对于图标左上角的偏移值。默认为(0,0),不偏移（可选）
4. {AMap.Pixel} imageOffset：图片相对于可视区域的偏移值，此功能的作用等同CSS中的background-position属性。默认为(0,0)，不偏移（可选）
5. {String} textColor：文字的颜色，默认为"#000000"（可选）
6. {Number} textSize：文字的大小，默认为10（可选）

ref 可用方法

提供无副作用的同步帮助方法

函数返回说明
$$getInstance()AMap.MarkerCluster获取实例

事件

事件参数说明
initAMap.MarkerClusterAMap.MarkerCluster实例
click{cluster: Object, target: Object, lnglat: LngLat, markers: Marker}鼠标左键单击事件
最后更新时间:
贡献者: guyangyang, gu, gyy