amap-cluster-canvas

高德地图点聚合插件 canvas 版本

配置项

属性	类型	描述	默认值
data	Array	数据集	null
coordinate	Coordinate	聚合策略	Coordinate.AMAP
maxZoom	Number	最大的聚合级别，大于该级别就不进行相应的聚合	18
gridSize	Number	聚合计算时，网格的像素大小	60
minClusterSize	Number	聚合的最小数量，小于该数量个点则不能成为一个聚合	2
averageCenter	Boolean	是否取所有点的平均值作为聚合点中心	true
zoomOnClick	Boolean	点击聚合点时，是否展开聚合	true
zIndex	Number	canvas 图层的 zindex	120
visible	Boolean	是否显示	true
getPosition	Function	获取经纬度信息	({location})=>location ? [location.longitude,location.latitude] : null
render	Function	绘制函数	null
hoverRender	Function	hover 状态下的绘制函数	null
clickHandler	Function	click 事件	null
mouseoutHandler	Function	mouseout 事件	null
mouseoverHandler	Function	mouseover 事件	null
mousemoveHandler	Function	mousemove 事件	null
normalPointStyle	Object	实体点的样式	defaultStyle
clusterPointStyle	Object	聚合点的样式	defaultStyle
hoverNormalPointStyle	Object	hover 状态下实体点的样式	defaultStyle
hoverClusterPointStyle	Object	hover 状态下聚合点的样式	defaultStyle
2.0 版本新增
offset	Array	绘制的图形相对于 定位点 的偏移度	null

实例方法

方法	描述	参数
setData	设置数据	data: 数据源，rebuild: 是否重新构建绘制（可选，默认：true）
render	立即重绘	-
renderLater	throttle 版本	number
destroy	销毁	-

Coordinate

点的聚合策略：

1. 根据点在 地图容器 上的相对坐标来判断是否需要聚合。
2. 根据点在 墨卡托坐标系 上的绝对坐标进行聚合。

// cluster.js
export const Coordinate = {
  AMAP: 'AMAP',
  MERCATOR: 'MERCATOR',
}

defaultStyle

点的默认样式：因为时间紧迫，并没有提供内置的点绘制功能，样式配置主要是提供点的 width & height 属性；因为 canvas 事件中需要根据点的坐标与点的大小查找当前事件的触发对象。

// 默认的点样式
const defaultStyle = {
  width: 60,
  height: 69,
}

offset

绘制的图形相对于 定位点 的偏移度。

// 支持 百分比 || px
const offsetItem = Number | String
const offset = [offsetItem, offsetItem]

事件

直接使用参数的形式进行事件处理，简单暴力。

测试

 
1、git clone [e-mail]:liuweiGL/amap-cluster-canvas.git
2、npm install
3、npm start
 

打包

 
npm run build