3D建筑
====

#### 场景介绍

本章节将向您介绍如何在地图上绘制3D建筑。

3D建筑主要用于展示城市建筑外观，帮助用户直观了解城市面貌，同时还可应用于楼盘、小区等三维模型的呈现，辅助用户全面了解周边环境。此外，在导航定位、旅游导览以及商业选址分析等场景中也有广泛应用，能够为用户提供更加真实、直观的地图体验。

![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/30/v3/0-YGzggjRjivepF1SiBStg/zh-cn_image_0000002625188713.gif?HW-CC-KV=V1&HW-CC-Date=20260612T073626Z&HW-CC-Expire=86400&HW-CC-Sign=9E541C32A7E88FCC9CE4648EBB9B45A444CE0AD9C9E045B5E613F349C87B0CD2 "点击放大")

#### 接口说明

添加3D建筑功能主要由[BuildingOverlayParams](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/map-common#buildingoverlayparams)、[addBuildingOverlay](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/map-map-mapcomponentcontroller#addbuildingoverlay)和[BuildingOverlay](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/map-map-buildingoverlay)提供，更多接口及使用方法请参见[接口文档](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/map-map-buildingoverlay)。

| 接口名 | 描述 |
| :-- | :-- |
| [BuildingOverlayParams](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/map-common#buildingoverlayparams) | 3D建筑参数。 |
| [addBuildingOverlay](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/map-map-mapcomponentcontroller#addbuildingoverlay)(params: [mapCommon.BuildingOverlayParams](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/map-common#buildingoverlayparams)): Promise<[BuildingOverlay](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/map-map-buildingoverlay)\> | 在地图上添加3D建筑。 |
| [BuildingOverlay](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/map-map-buildingoverlay) | 3D建筑，支持更新和查询相关属性。 |

#### 开发步骤

#### \[h2\]添加3D建筑

1.  导入相关模块。
    
    import { mapCommon, map, MapComponent } from '@kit.MapKit';
    import { AsyncCallback } from '@kit.BasicServicesKit';
    
2.  添加3D建筑。
    
    @Entry
    @Component
    struct BuildingOverlayDemo {
      private TAG = "OHMapSDK\_BuildingOverlayDemo";
      private mapOptions?: mapCommon.MapOptions;
      private mapController?: map.MapComponentController;
      private callback?: AsyncCallback<map.MapComponentController>;
      private buildingOverlay?: map.BuildingOverlay;
    
      aboutToAppear(): void {
        // 初始化地图参数
        this.mapOptions = {
          position: {
            target: {
              latitude: 31.984794,
              longitude: 118.765865
            },
            zoom: 18
          },
          scaleControlsEnabled: true
        }
    
        this.callback = async (err, mapController) => {
          console.info(this.TAG, "addBuildingOverlay");
          if (!err) {
            this.mapController = mapController;
            // 3D建筑底面坐标集合
            let points: Array<mapCommon.LatLng> = \[
              {
                latitude: 31.984794,
                longitude: 118.765865
              },
              {
                latitude: 31.98468,
                longitude: 118.766076
              },
              {
                latitude: 31.98472,
                longitude: 118.766116
              },
              {
                latitude: 31.98463,
                longitude: 118.766292
              },
              {
                latitude: 31.984586,
                longitude: 118.766251
              },
              {
                latitude: 31.984536,
                longitude: 118.766344
              },
              {
                latitude: 31.984633,
                longitude: 118.766446
              },
              {
                latitude: 31.9848,
                longitude: 118.766285
              },
              {
                latitude: 31.984925,
                longitude: 118.766312
              },
              {
                latitude: 31.985282,
                longitude: 118.766661
              },
              {
                latitude: 31.985438,
                longitude: 118.766419
              },
              {
                latitude: 31.985801,
                longitude: 118.766755
              },
              {
                latitude: 31.985856,
                longitude: 118.766504
              },
              {
                latitude: 31.985785,
                longitude: 118.766434
              },
              {
                latitude: 31.985821,
                longitude: 118.766278
              },
              {
                latitude: 31.985897,
                longitude: 118.766311
              },
              {
                latitude: 31.985944,
                longitude: 118.766095
              },
              {
                latitude: 31.985909,
                longitude: 118.766069
              },
              {
                latitude: 31.985794,
                longitude: 118.765989
              },
              {
                latitude: 31.9857,
                longitude: 118.766029
              },
              {
                latitude: 31.985658,
                longitude: 118.766164
              },
              {
                latitude: 31.985647,
                longitude: 118.766271
              },
              {
                latitude: 31.985574,
                longitude: 118.766297
              },
              {
                latitude: 31.985458,
                longitude: 118.766285
              },
              {
                latitude: 31.985271,
                longitude: 118.766002
              },
              {
                latitude: 31.985219,
                longitude: 118.766002
              },
              {
                latitude: 31.985135,
                longitude: 118.766029
              },
              {
                latitude: 31.985093,
                longitude: 118.766083
              },
              {
                latitude: 31.985019,
                longitude: 118.766109
              },
              {
                latitude: 31.984978,
                longitude: 118.766083
              },
              {
                latitude: 31.984794,
                longitude: 118.765865
              }
            \];
            points.reverse();
            // 3D建筑参数
            let buildingOverlayOptions: mapCommon.BuildingOverlayParams =
              {
                // 3D建筑的范围参数（点为顺时针绘制）
                points: points,
                // 3D建筑的高度
                totalHeight: 51,
                // 3D建筑的选中楼层高度
                floorBottomHeight: 33,
                // 3D建筑的顶部颜色
                topFaceColor: 0xffa4b8f7,
                // 3D建筑的侧面颜色
                sideFaceColor: 0x44a4b8f7,
                // 3D建筑的选中楼层颜色
                floorColor: 0xff000000,
                // 3D建筑的展示层级
                showLevel: 14,
                // 3D建筑选中楼层从底部升起的动画时长
                animationDuration: 5000,
                // 3D建筑侧面的纹理，需要替换您自己的资源图片，存放在resources/base/media目录下
                sideTexture: { image: $r("app.media.side\_tex"), height: 3, width: 3 },
                // 3D建筑选中楼层的纹理，需要替换您自己的资源图片，存放在resources/base/media目录下
                floorTexture: { image: $r("app.media.floor\_tex"), height: 3, width: 3 }
              };
            let cameraUpdate = map.newCameraPosition({
              target: {
                latitude: 31.984794,
                longitude: 118.765865
              },
              zoom: 18,
              tilt: 70
            });
            // 将地图镜头移动到3D建筑区域
            this.mapController?.moveCamera(cameraUpdate);
            // 新建3D建筑
            try {
              this.buildingOverlay = await this.mapController?.addBuildingOverlay(buildingOverlayOptions);
            } catch (e) {
              console.error(\`Failed to create the buildingOverlay, code is：${e.code}, message is ${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('100%').height('100%');
          }.width('100%')
        }.height('100%')
      }
    }