HarmonyOS花瓣地图自定义点聚合功能

jinchanchan

背景

项目中需要实现点聚合效果，但是花瓣地图目前的点聚合功能无法满足业务需求

效果图

HarmonyOS花瓣地图自定义点聚合功能

用法

import { Poi } from "poi_cluster";

export class MarkerPoiInfo extends Poi {
  private lat: number = 0
  private lng: number = 0

  constructor(lat: number, lng: number) {
    super()
    this.lat = lat
    this.lng = lng
  }
  getLat(): number {
    return this.lat
  }
  getLng(): number {
    return this.lng
  }
  getExtra(): string {
    return ""
  }
  getDataId(): string {
    return ''
  }
}

  private poiList: MarkerPoiInfo[] = []
aboutToAppear(): void {
  //添加需要聚合的poi点
  this.poiList.push(new MarkerPoiInfo(40.428, 116.887))
  this.poiList.push(new MarkerPoiInfo(39.639, 116.791))
  this.poiList.push(new MarkerPoiInfo(40.345, 116.004))
  this.poiList.push(new MarkerPoiInfo(39.716, 116.938))
  this.poiList.push(new MarkerPoiInfo(40.192, 116.424))
}

  mapZoom: number = 0
//监听相机移动结束事件，重新进行聚合计算
this.mapController?.on('cameraIdle', () => {
  const mapCurrentZoom = this.mapController.getCameraPosition().zoom
  if (Math.abs(this.mapZoom - mapCurrentZoom) < 0.3) {
    return
  }
  this.mapZoom = mapCurrentZoom
  this.initCluster()
})

  //1：创建ClusterManager
//(构造参数100代表两个poi在屏幕的直线距离小于等于100px时进行聚合)
private manager = new ClusterManager(100)

private initCluster() {
  //停止之前的聚合计算
  this.manager.end()
  this.manager = new ClusterManager(100)
  //2：设置mapController
  this.manager.setMapController(this.mapController)
  //3：设置聚合完成监听
  this.manager.setCompleteListener((result: ClusterPoint<MarkerPoiInfo>[]) => {
    //获取聚合结果
    this.addCluster(result)
  })
  //4：开始聚合(获取聚合结果)
  const result = this.manager.cluster(this.poiList)
  // this.addCluster(result)
}

  aboutToDisappear(): void {
  //及时结束聚合操作()
  this.manager.end()
}

转载：
来源：稀土掘金；作者：钟睿