HarmonyOS鸿蒙Next中如何将staticmap保存到本地图库

开发者你好，可以参考下以下示例通过SaveButton进行保存staticmap到图库。

本地示例demo：

import { staticMap } from '@kit.MapKit';
import { BusinessError } from '@kit.BasicServicesKit';
import { photoAccessHelper } from '@kit.MediaLibraryKit';
import { image } from '@kit.ImageKit';
import { fileIo } from '@kit.CoreFileKit';

@Entry
@Component
struct Index {
  @State image?: PixelMap = undefined;
  private context: Context = this.getUIContext().getHostContext()!;

  build() {
    Column() {
      this.buildDemoUI();
    }.width('100%')
    .margin({ bottom: 48 })
    .backgroundColor(0xf2f2f2)
    .height('100%');
  }

  @Builder
  buildDemoUI() {
    // 展示获取的静态图
    Image(this.image)
      .width('100%')
      .fitOriginalSize(false)
      .border({ width: 1 })
      .borderStyle(BorderStyle.Dashed)
      .objectFit(ImageFit.Contain)
      .height('80%');

    Column() {
      Button('getStaticMap')
        .fontSize(12)
        .margin({ top: 15 })
        .onClick(async () => {
          // 设置静态图标记参数
          let markers: Array<staticMap.StaticMapMarker> = [{
            location: { latitude: 50, longitude: 126.3 },
            font: 'statics',
            defaultIconSize: staticMap.IconSize.TINY
          }];

          // 设置静态图绘制路径参数
          let path: staticMap.StaticMapPath = {
            locations: [
              { latitude: 50, longitude: 126 },
              { latitude: 50.3, longitude: 126 },
              { latitude: 50.3, longitude: 126.3 },
              { latitude: 49.7, longitude: 126 },
              { latitude: 50, longitude: 126 }
            ],
            width: 3
          };

          // 拼装静态图参数
          let option: staticMap.StaticMapOptions = {
            location: { latitude: 50, longitude: 126 },
            zoom: 10,
            imageWidth: 1024,
            imageHeight: 1024,
            scale: 1,
            markers: markers,
            path: path
          };

          try {
            // 获取静态图
            this.image = await staticMap.getMapImage(option);
            console.info('Succeeded in getting image.');
          } catch (error) {
            const err: BusinessError = error as BusinessError;
            console.error(`Failed in getting image, code: ${err.code}, message: ${err.message}`);
          }
        });

      SaveButton()
        .fontSize(12)
        .onClick(async () => {
          if (this.image) {
            saveToFile(this.image,this.context)
          }
        });
    };
  }
}

export async function saveToFile(pixelMap: image.PixelMap, context: Context): Promise<void> {
  let fd: number | null = null;
  try {
    let phAccessHelper = photoAccessHelper.getPhotoAccessHelper(context);
    let filePath = await phAccessHelper.createAsset(photoAccessHelper.PhotoType.IMAGE, 'png');
    let imagePacker = image.createImagePacker();
    let imageBuffer = await imagePacker.packToData(pixelMap, {
      format: 'image/png',
      quality: 100,
      needsPackProperties: true,
    });
    let mode = fileIo.OpenMode.READ_WRITE | fileIo.OpenMode.CREATE;
    fd = (await fileIo.open(filePath, mode)).fd;
    await fileIo.truncate(fd);
    await fileIo.write(fd, imageBuffer);
  } catch (err) {
    console.error('saveToFile error：', JSON.stringify(err) ?? '');
  } finally {
    if (fd) {
      fileIo.close(fd);
    }
  }
}

【背景知识】

• SaveButton组件。 SaveButton允许用户通过点击按钮临时获取存储权限，无需额外的编写权限申请代码。当用户点击该控件时，应用会获得一分钟内单次访问媒体库特权接口的授权。这适用于任何需要将文件保存到媒体库的应用场景，例如保存图片或视频等。