目录

海量点图层

场景介绍

新增海量点图层，用于批量展示坐标点数据。海量点图层支持处理的点数量级跨度较大，从几十个点至十万个点都可以应用海量点图层进行处理，本章节将向您介绍如何在地图上绘制海量点图层。

6.0.0(20)开始，支持海量点图层功能。

接口说明

海量点图层功能主要由MassPointOverlayParams、addMassPointOverlay、MassPointOverlay提供，更多接口及使用方法请参见接口文档。

接口名 描述
MassPointOverlayParams 海量点参数。
addMassPointOverlay(params: mapCommon.MassPointOverlayParams): Promise<MassPointOverlay> 新增海量点。
MassPointOverlay 海量点管理对象。

开发步骤

[h2]添加海量点图层

  1. 导入相关模块。

    import { mapCommon, map, MapComponent } from '@kit.MapKit';
import { AsyncCallback } from '@kit.BasicServicesKit';

  2. 绘制海量点图层。

    @Entry
@Component
struct MapMassPointDemo {
  // ...
  private TAG = 'OHMapSDK_MassPointOverlayDemo';
  private mapOptions?: mapCommon.MapOptions;
  private mapController?: map.MapComponentController;
  private callback?: AsyncCallback<map.MapComponentController>;
  private massPointOverlay?: map.MassPointOverlay;
  @State currentTimestamp: number = 0;
  @State mapHeight: string = '65%'
  @State mapWidth: string = '100%'

  aboutToAppear(): void {
    this.mapOptions = {
      position: {
        target: {
          latitude: 32.11111,
          longitude: 118.11111
        },
        zoom: 9
      },
      scaleControlsEnabled: true
    }
    this.callback = async (err, mapController) => {
      if (!err) {
        this.mapController = mapController;
        let items: mapCommon.MassPointItem[] = [];
        for (let i = 0; i < 1000; i++) {
          // 将海量点存入items
          items.push({
            itemId: 'test' + i,
            position: {
              longitude: 118.11111 + Math.random() * 1 - 0.5,
              latitude: 32.11111 + Math.random() * 1 - 0.5
            },
            snippet: 'test' + i,
            title: 'test' + i
          })
        }
        let params: mapCommon.MassPointOverlayParams = {
          id: 'test',
          items: items,
          // 图标存放在resources/rawfile，icon参数传入rawfile文件夹下的相对路径
          icon: 'icon/maps_blue_dot.png'
        }
        try {
          this.massPointOverlay = await this.mapController?.addMassPointOverlay(params);
        } catch (e) {
          console.error(this.TAG, `code:${e.code}, message:${e.message}`);
        }
      } else {
        console.error(`Failed to initialize the map, code is：${err.code}, message is ${err.message}`);
      }
    }
  }

  build() {
    // ...
      Stack() {
        Column() {
          MapComponent({ mapOptions: this.mapOptions, mapCallback: this.callback })
            .width(this.mapWidth)
            .height(this.mapHeight);
        }.width('100%')
      }.height('100%')

      // ...
  }
}

[h2]海量点点击事件

// 初始化地图组件的监听事件管理接口
let mapEventManager = this.mapController?.getEventManager();
let massCallback: map.MassPointOverlayCallback = (overlay, item) => {
  console.info(`overlayId:${overlay.getId()},item :${JSON.stringify(item)}`);
}
// 启动海量点点击事件监听
mapEventManager?.on('massPointOverlayClick', massCallback);
// 停止海量点点击事件监听,传入指定callback
mapEventManager?.off('massPointOverlayClick', massCallback);
// 停止所有海量点点击事件监听，无需传入callback
mapEventManager?.off('massPointOverlayClick');