2.1.0 • Published 5 years ago
amap-cluster-canvas v2.1.0
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
点的聚合策略：
- 根据点在
地图容器上的相对坐标来判断是否需要聚合。- 根据点在
墨卡托坐标系上的绝对坐标进行聚合。
// 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 git@github.com:liuweiGL/amap-cluster-canvas.git
2、npm install
3、npm start打包
npm run build