目录

设置地图元素压盖顺序

场景介绍

本章节将向您介绍如何设置地图元素的层级压盖关系。

设置地图元素的显示顺序，按照从低到高排列，即后面的地图元素会压盖前面的地图元素。

表1 地图元素类型压盖顺序

枚举 枚举值 枚举含义
OVERLAY 1 覆盖物，包括MapCircle、MapPolygon、MapPolyline、MapArc、ImageOverlay、TraceOverlay。
POI 2 底图Poi。
CUSTOM_POI 3 支持碰撞的覆盖物，包括PointAnnotation、Bubble。
MARKER 4 包括Marker、ClusterOverlay。

接口说明

设置层级压盖关系功能主要由MapElementType、setDisplayOrder提供，更多接口及使用方法请参见接口文档。

接口名 描述
mapCommon.MapElementType 地图元素类型。
setDisplayOrder(types: Array<mapCommon.MapElementType>): void 设置地图元素的显示顺序。

开发步骤

  1. 导入相关模块。

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

  2. 设置地图元素层级压盖关系。

    @Entry
@Component
struct MarkerDemo {
  private mapOptions?: mapCommon.MapOptions;
  private mapController?: map.MapComponentController;
  private callback?: AsyncCallback<map.MapComponentController>;
  private mapEventManager?: map.MapEventManager;
  private marker?: map.Marker;
  private bubble?: map.Bubble;

  aboutToAppear(): void {
    // 地图初始化参数
    this.mapOptions = {
      position: {
        target: {
          latitude: 31.984410259206815,
          longitude: 118.26625379397866
        },
        zoom: 10
      }
    };
    this.callback = async (err, mapController) => {
      if (!err) {
        this.mapController = mapController;
        this.mapEventManager = this.mapController.getEventManager();
        // Marker初始化参数
        let markerOptions: mapCommon.MarkerOptions = {
          position: {
            latitude: 31.984410259206815,
            longitude: 118.26625379397866
          },
          rotation: 0,
          visible: true,
          zIndex: 0,
          alpha: 1,
          anchorU: 0.5,
          anchorV: 1,
          clickable: true,
          draggable: true,
          flat: false
        };
        // 创建Marker
        try {
          this.marker = await this.mapController.addMarker(markerOptions);
        } catch (e) {
          console.error(`Failed to create the marker, code is：${e.code}, message is ${e.message}`);
        }
        let bubbleOptions: mapCommon.BubbleParams = {
          // 气泡位置
          positions: [[{
            latitude: 32.384410259206815,
            longitude: 118.26625379397866
          }]],
          // 设置图标，必须提供4个方向的图标，图标存放在resources/rawfile
          icons: [
            'speed_limit_10.png',
            'speed_limit_20.png',
            'speed_limit_30.png',
            'speed_limit_40.png'
          ],
          // 定义气泡的显示属性，为true时，在被碰撞后仍能显示
          forceVisible: true,
          // 定义气泡碰撞优先级，数值越大，优先级越低
          priority: 3,
          // 定义气泡展示的最小层级
          minZoom: 2,
          // 定义气泡展示的最大层级
          maxZoom: 20,
          // 定义气泡是否可见
          visible: true,
          // 定义气泡叠加层级属性
          zIndex: 1
        }
        // 添加气泡
        try {
          this.bubble = await this.mapController.addBubble(bubbleOptions);
        } catch (e) {
          console.error(`Failed to create the bubble, code is：${e.code}, message is ${e.message}`);
        }
        let imageOverlayParams: mapCommon.ImageOverlayParams = {
          // 覆盖物范围
          bounds: {
            southwest: {
              latitude: 32,
              longitude: 118
            },
            northeast: {
              latitude: 32.4,
              longitude: 118.4
            }
          },
          // 覆盖物图片
          image: 'icon/icon.png',
          transparency: 0.3,
          zIndex: 101,
          anchorU: 0.5,
          anchorV: 0.5,
          clickable: true,
          visible: true,
          bearing: 0
        };
        // 添加覆盖物
        try {
          await this.mapController?.addImageOverlay(imageOverlayParams);
        } catch (e) {
          console.error(`Failed to create the imageOverlay, code is：${e.code}, message is ${e.message}`);
        }

        // 设置压盖顺序，最底层的是覆盖物，后面依次是POI、支持碰撞的覆盖物和Marker，Marker在最表面一层
        let mapElementTypeArr: Array<mapCommon.MapElementType> = [
          mapCommon.MapElementType.OVERLAY,
          mapCommon.MapElementType.POI,
          mapCommon.MapElementType.CUSTOM_POI,
          mapCommon.MapElementType.MARKER];
        this.mapController.setDisplayOrder(mapElementTypeArr);
      } 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('100%')
    }.height('100%')
  }
}