HarmonyOS花瓣地图自定义点聚合功能
背景项目中需要实现点聚合效果但是花瓣地图目前的点聚合功能无法满足业务需求下载安装ohpm install zhongrui/poi_cluster点聚合开源仓库源码地址导入模块import{ClusterManager,ClusterPoint,Poi}frompoi_cluster效果图用法import{Poi}frompoi_cluster;exportclassMarkerPoiInfoextendsPoi{privatelat:number0privatelng:number0constructor(lat:number,lng:number){super()this.latlatthis.lnglng}getLat():number{returnthis.lat}getLng():number{returnthis.lng}getExtra():string{return}getDataId():string{return}}privatepoiList:MarkerPoiInfo[][]aboutToAppear():void{//添加需要聚合的poi点this.poiList.push(newMarkerPoiInfo(40.428,116.887))this.poiList.push(newMarkerPoiInfo(39.639,116.791))this.poiList.push(newMarkerPoiInfo(40.345,116.004))this.poiList.push(newMarkerPoiInfo(39.716,116.938))this.poiList.push(newMarkerPoiInfo(40.192,116.424))}mapZoom:number0//监听相机移动结束事件重新进行聚合计算this.mapController?.on(cameraIdle,(){constmapCurrentZoomthis.mapController.getCameraPosition().zoomif(Math.abs(this.mapZoom-mapCurrentZoom)0.3){return}this.mapZoommapCurrentZoomthis.initCluster()})//1创建ClusterManager//(构造参数100代表两个poi在屏幕的直线距离小于等于100px时进行聚合)privatemanagernewClusterManager(100)privateinitCluster(){//停止之前的聚合计算this.manager.end()this.managernewClusterManager(100)//2设置mapControllerthis.manager.setMapController(this.mapController)//3设置聚合完成监听this.manager.setCompleteListener((result:ClusterPointMarkerPoiInfo[]){//获取聚合结果this.addCluster(result)})//4开始聚合(获取聚合结果)constresultthis.manager.cluster(this.poiList)// this.addCluster(result)}privateaddCluster(result:ClusterPointMarkerPoiInfo[]){if(!this.mapController){return}//根据业务逻辑设置聚合poi对应的图片letclusterImage:(string|image.PixelMap|Resource)|undefinedundefinedresult?.forEach((item){constcountitem.getPoiCount()//如果聚合类有多个poi在地图上添加聚合poiif(count1){this.mapController?.addMarker({position:{latitude:item.getLat(),longitude:item.getLng()},icon:clusterImage,//clusterImage为聚合poi图片anchorV:1,anchorU:0.5})}else{//如果聚合类只有1个poi在地图上添加普通poithis.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数据列表加载更多(无需监听列表滑到最底部)HarmonyOS NEXT下拉刷新上拉加载(纵向横向都支持)(v1v2装饰器)HarmonyOS NEXT图片压缩(支持fd,uri,网络图片,沙箱路径,base64,ArrayBuffer)HarmonyOS弹窗bindSheet半模态浮层通用解决方案覆盖全业务场景