背景
项目中需要实现点聚合效果，但是花瓣地图目前的点聚合功能无法满足业务需求
下载安装
ohpm install @zhongrui/poi_cluster
导入模块
import { ClusterManager , ClusterPoint , Poi} from 'poi_cluster'
效果图
用法
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)
}
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
})
}
})
}
aboutToDisappear(): void {
//及时结束聚合操作()
this.manager.end()
}
历史文章
HarmonyOS NEXT多环境+多渠道+自定义路径输出+自定义名称一键打app和hap包
HarmonyOS NEXT数据列表加载更多(无需监听列表滑到最底部)
HarmonyOS NEXT下拉刷新+上拉加载(纵向横向都支持)(v1+v2装饰器)
