高德地图api2.0点聚合及点标记事件

在使用高德地图API的过程中，发现2.0版本的点聚合和之前版本的使用上有很大的区别，在此做一下点聚合的使用以及点标记的事件的记录。

在2.0之前的版本，MarkerClusterer插件的使用如下：

new AMap.MarkerClusterer(
    //地图实例对象
    map:Map,  
    //marker类构造对象
    markers:Array<Marker>,    
    //点聚合属性，具体可查阅https://lbs.amap.com/api/javascript-api/reference/plugin#AMap.MarkerClusterer
    opts:MarkerClustererOptions 
)

而2.0版本对MarkerClusterer进行了改动

new AMap.MarkerClusterer(
    //地图实例对象
    map:Map,  
    //经纬度数组对象
    dataOptions:Array   
    //点聚合属性
    markerClusterOptions:Object 
)

dataOptions:[
    {
        weight: Number, //权重(可选)以权重高的点为中心进行聚合
        lnglat: Array //经纬度数组 string[] | number[]
    }
]

在2.0版本中，markerClusterOptions去掉了minClusterSize 集合的最小数量，zoomOnclick 点击聚合点时是否散开;对renderClusterMarker属性进行了修改,去掉了renderClusterMarker:function的markers属性；新增了renderMarker: function 用于实现非聚合点的自定义设置

new AMap.MarkerClusterer(map, marker, { 
    gridSize: number, //聚合计算时网格的像素大小，默认60
    //minClusterSize 聚合的最小数量（已弃用）
    maxZoom: number, //最大聚合级别，超出级别不进行聚合，默认18
    averageCenter: boolean, //聚合点的图标位置是否是所有聚合内点的中心点，默认true，如果有权重则以权重高的为中心进行聚合
    clusterByZoomChange: boolean, //地图缩放过程中是否聚合,默认false
    styles: Array<Object>, //聚合后点标记样式
    //styles包含以下属性
        //url{string} （必选）图标的url地址
        //size{AMap.Size} （必选）图标的图片大小
        //offset{AMap.Pixel} （可选）图标相对于左上角的偏移量
        //imageOffset{AMap.Pixel} （可选）图片在可视区域的偏移量
        //textColor{String} （可选）文字颜色，默认#000000
        //textSize{Number} （可选）文字大小，默认10
    renderClusterMarker: (cluster: any) => {
        cluster.count //当前聚合点下marker的数量
        cluster.marker //当前聚合点的marker对象
    },
    renderMarker: (context: any) => {
        context.marker //非聚合点的marker对象
    }
    //zoomOnClick 点击聚合点时是否散开（已弃用）
}）        

点聚合及点标记的鼠标移入、移出、点击效果的实现(只提供思路，不进行数据效果实现)

const markerData: any[] //获取的标记坐标等信息
const markers: [{
    weight: number, //权重
    lnglat: number[] | string [], //经纬度
    extData:object //其他需要传递的信息，如id、name等
}] = [] 

markerData.map((item: any) => {
    markers.push({
        weight: item.weight,
        lnglat: [item.lon, item.lat],
        extData: {
            id: item.id,
            icon: url,
            markerIcon: url
        }
    })
})

const clu = new AMap.MarkerClusterer(map, markers, {
    //聚合点自定义样式交互
    renderClusterMarker: (cluster: any) = {
        //marker点标记API
        //自定义聚合样式
        //cluster.data[0].extData可获取到传入的其他数据
        cluster.marker.setAnchor('bottom-center');
        cluster.marker.setIcon(new AMap.Icon({ image: cluster.data[0].extData.markerIcon }));
        cluster.marker.setLabel({
            content: `<span style="cursor: pointer;">${cluster.count}</span>`,
            direction: 'center',
            offset: new AMap.Pixel(0, -5),
        })
        //添加鼠标移入放大效果
        cluster.marker.on('mouseover', () => {
            cluster.marker.setIcon(
                new AMap.Icon({
                    image: cluster.marker.getIcon()._opts.image,
                    size: new AMap.Size(40, 50), //根据image分辨率计算放大后尺寸
                    imageSize: new AMap.Size(40, 50),
                }),
            );
            cluster.marker.setLabel({
                content: `<span style="cursor: pointer;font-size: 20px;">${cluster.count}</span>`,
                direction: 'center',
                offset: new AMap.Pixel(0, -5),
            });
        });
        //鼠标移出还原
        cluster.marker.on('mouseout', () => {
            cluster.marker.setIcon(
                new AMap.Icon({
                    image: cluster.marker.getIcon()._opts.image,
                    size: new AMap.Size(32, 40),
                    imageSize: new AMap.Size(32, 40),
                }),
            );
            cluster.marker.setLabel({
                 content: `<span style="cursor: pointer;">${cluster.count}</span>`,
                 direction: 'center',
                 offset: new AMap.Pixel(0, -5),
            });
        });
    },
    //非聚合点自定义样式交互
    renderMarker: (context: any) => {
        context.marker.setAnchor('bottom-center');
        context.marker.setOffset(new AMap.Pixel(0, 0));
        context.marker.setIcon(new AMap.Icon({ image: context.data[0].extData.markerIcon }));
        context.marker.setLabel({
            content: `<img src=${context.data[0].extData.icon} style="cursor: pointer;" />`,
            direction: 'center',
            offset: new AMap.Pixel(0, -5),
        });
        //鼠标移入移出同上，不再重复
        //marker鼠标点击事件
        context.marker.on('click', () => {
            const params = context.data[0].extData;
            console.log(params.id) //id
        });
    }
})
//添加聚合点点击事件
clu.on('click', (data: any) => {
    //判断是否是聚合点，不是聚合点就执行单个点击方式
    if (data.clusterData.length <= 1) return;
    //计算所有聚合点的中心点
    let alng = 0,
        alat = 0;
    for (const m of data.clusterData) {
        alng += m.lnglat.lng;
        alat += m.lnglat.lat;
    }
    const lat = alat / data.clusterData.length;
    const lng = alng / data.clusterData.length;
    //以中心点固定倍数放大地图，达到展开聚合点的效果
    map.setZoom(10);
    map.setCenter([lng, lat]);
});