华为地图服务 - 如何实现地图数据聚合效果？ -- HarmonyOS自学20

场景介绍

本章节将向您介绍如何根据地图数据实现聚合效果。

您可以通过比例尺缩放自适应聚合效果，聚合图标可点击。聚合支持功能：

• 支持按距离聚合ClusterItem。
• 支持绘制聚合Overlay的默认图标。
• 支持绘制聚合Overlay的自定义图标。
• 支持监听聚合Overlay的点击事件。
• 支持添加单个ClusterItem到聚合Overlay中。
• 支持删除聚合Overlay。
• 支持移动地图时重绘聚合Overlay。

接口说明

聚合功能主要由MapComponentController的addClusterOverlay接口实现，更多接口及使用方法请参见接口文档。

开发步骤

1. 导入相关模块。
   1. import { map, mapCommon, MapComponent } from '@kit.MapKit';
   2. import { AsyncCallback } from '@kit.BasicServicesKit';
2. 新增聚合图层。
   1. @Entry
   2. @Component
   3. struct ClusterOverlayDemo {
   4. private mapOption?: mapCommon.MapOptions;
   5. private mapController?: map.MapComponentController;
   6. private callback?: AsyncCallback<map.MapComponentController>;
   7. aboutToAppear(): void {
   8. this.mapOption = {
   9. position: {
   10. target: {
   11. latitude: 31.98,
   12. longitude: 118.7
   13. },
   14. zoom: 7
   15. }
   16. }
   17. this.callback = async (err, mapController) => {
   18. if (!err) {
   19. this.mapController = mapController;
   20. // 生成待聚合点
   21. let clusterItem1: mapCommon.ClusterItem = {
   22. position: {
   23. latitude: 31.98,
   24. longitude: 118.7
   25. }
   26. };
   27. let clusterItem2: mapCommon.ClusterItem = {
   28. position: {
   29. latitude: 32.99,
   30. longitude: 118.9
   31. }
   32. };
   33. let clusterItem3: mapCommon.ClusterItem = {
   34. position: {
   35. latitude: 31.5,
   36. longitude: 118.7
   37. }
   38. };
   39. let clusterItem4: mapCommon.ClusterItem = {
   40. position: {
   41. latitude: 30,
   42. longitude: 118.7
   43. }
   44. };
   45. let clusterItem5: mapCommon.ClusterItem = {
   46. position: {
   47. latitude: 29.98,
   48. longitude: 117.7
   49. }
   50. };
   51. let clusterItem6: mapCommon.ClusterItem = {
   52. position: {
   53. latitude: 31.98,
   54. longitude: 120.7
   55. }
   56. };
   57. let clusterItem7: mapCommon.ClusterItem = {
   58. position: {
   59. latitude: 25.98,
   60. longitude: 119.7
   61. }
   62. };
   63. let clusterItem8: mapCommon.ClusterItem = {
   64. position: {
   65. latitude: 30.98,
   66. longitude: 110.7
   67. }
   68. };
   69. let clusterItem9: mapCommon.ClusterItem = {
   70. position: {
   71. latitude: 30.98,
   72. longitude: 115.7
   73. }
   74. };
   75. let clusterItem10: mapCommon.ClusterItem = {
   76. position: {
   77. latitude: 28.98,
   78. longitude: 122.7
   79. }
   80. };
   81. let array: Array<mapCommon.ClusterItem> = [
   82. clusterItem1,
   83. clusterItem2,
   84. clusterItem3,
   85. clusterItem4,
   86. clusterItem5,
   87. clusterItem6,
   88. clusterItem7,
   89. clusterItem8,
   90. clusterItem9,
   91. clusterItem10
   92. ]
   93. for(let index = 0; index < 100; index++){
   94. array.push(clusterItem1)
   95. }
   96. for(let index = 0; index < 10; index++){
   97. array.push(clusterItem2)
   98. }
   99. // 生成聚合图层的入参 聚合distance设置为100vp
   100. let clusterOverlayParams: mapCommon.ClusterOverlayParams = { distance: 100, clusterItems: array };
   101. // 调用addClusterOverlay生成聚合图层
   102. await this.mapController.addClusterOverlay(clusterOverlayParams);
   103. }
   104. }
   105. }
   106. build() {
   107. Stack() {
   108. Column() {
   109. MapComponent({ mapOptions: this.mapOption, mapCallback: this.callback })
   110. .width('100%')
   111. .height('100%');
   112. }.width('100%')
   113. }.height('100%')
   114. }
   115. }