设置地图元素压盖顺序

场景介绍

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

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

表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%')
     }
   }