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

背景

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

下载安装

text 复制代码

ohpm install @zhongrui/poi_cluster

点聚合开源仓库
 源码地址

导入模块

typescript 复制代码

import { ClusterManager , ClusterPoint , Poi} from 'poi_cluster'

效果图

用法

typescript 复制代码

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 ''
  }
}

typescript 复制代码

  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))
}

typescript 复制代码

  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()
})

typescript 复制代码

  //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)
}

typescript 复制代码

private addCluster(result: ClusterPoint<MarkerPoiInfo>[]) {
  if (!this.mapController) {
    return
  }
  //根据业务逻辑设置聚合poi对应的图片
  let clusterImage: (string | image.PixelMap | Resource)|undefined = undefined
  result?.forEach((item) => {
    const count = item.getPoiCount()
    //如果聚合类有多个poi，在地图上添加聚合poi
    if (count > 1) {
      this.mapController?.addMarker({
        position: { latitude: item.getLat(), longitude: item.getLng() },
        icon: clusterImage, //clusterImage为聚合poi图片
        anchorV: 1,
        anchorU: 0.5
      })
    } else {
      //如果聚合类只有1个poi，在地图上添加普通poi
      this.mapController?.addMarker({
        position: { latitude: item.getLat(), longitude: item.getLng() },
        icon: $r("app.media.marker_icon"),
        anchorV: 1,
        anchorU: 0.5
      })
    }
  })
}

typescript 复制代码

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

历史文章

HarmonyOS NEXT多环境+多渠道+自定义路径输出+自定义名称一键打app和hap包

HarmonyOS NEXT一行代码实现任意处弹窗

HarmonyOS NEXT数据列表加载更多(无需监听列表滑到最底部)

HarmonyOS NEXT下拉刷新+上拉加载(纵向横向都支持)(v1+v2装饰器)

HarmonyOS NEXT图片压缩(支持fd,uri,网络图片,沙箱路径,base64,ArrayBuffer)

HarmonyOS弹窗+bindSheet半模态+浮层通用解决方案覆盖全业务场景