HarmonyOS 鸿蒙Next中Map Kit如何加载kmz格式图层

【背景知识】

addImageOverlay：在地图上增加图覆盖物。

【解决方案】

方案逻辑：Map Kit地图服务当前不支持直接加载kmz格式图层，通过解压kmz格式文件，可以发现其内容为多张覆盖全球的图片和一个描述每张图片位置信息的kml文件。

本方案通过读取kml文件，获取所有文件的位置坐标信息，并通过addImageOverlay依次添加所有图片到对应的坐标位置，实现完整地球图层的添加。

1. 将kmz文件中的kml文件放在rawfile目录下，使用getRawFileContent读取文件内容，并使用三方库@ifbear/fast-xml-parser中的XMLParser将kml格式内容转换为json格式内容。

let context = this.getUIContext().getHostContext();
try {
  context?.resourceManager.getRawFileContent('doc.kml', (error, value) => {
    if (error != null) {
      console.info(`error is：${error}`);
    } else {
      let rawFile = value;
      let textDecoder = util.TextDecoder.create('utf-8', { ignoreBOM: true });
      let rawFileString = textDecoder.decodeToString(rawFile, { stream: false });
      console.info(`rawFileString is ${rawFileString}`);
      const parser = new XMLParser();
      this.xmlContent = parser.parse(rawFileString) as object;
      this.addImageOverlays();
    }
  });
} catch (error) {
  let code = (error as BusinessError).code;
  let message = (error as BusinessError).message;
  console.error(`callback getRawFileContent failed, error code: ${code}, message: ${message}.`);
}

2. 遍历第第1步获取的json描述文件内容，获取到每个图片的名称和坐标信息，依次配置ImageOverlayParams参数并通过addImageOverlay添加图片覆盖物。

async addImageOverlays() {
  // 不同的kml文件中，坐标信息在json中的位置可能不一样，根据实际的json结构进行调用
  for (let i = 0; i < (this.xmlContent as object)['kml']['Document']['GroundOverlay'].length; ++i) {
    let imageOverlayParams: mapCommon.ImageOverlayParams = {
      // 覆盖物范围
      bounds: {
        southwest: {
          latitude: (this.xmlContent as object)['kml']['Document']['GroundOverlay'][i]['LatLonBox']['south'] as number,
          longitude: (this.xmlContent as object)['kml']['Document']['GroundOverlay'][i]['LatLonBox']['west'] as number
        },
        northeast: {
          latitude: (this.xmlContent as object)['kml']['Document']['GroundOverlay'][i]['LatLonBox']['north'] as number,
          longitude: (this.xmlContent as object)['kml']['Document']['GroundOverlay'][i]['LatLonBox']['east'] as number
        }
      },
      // 覆盖物图片，图标需存放在resources/rawfile/files目录下
      image: (this.xmlContent as object)['kml']['Document']['GroundOverlay'][i]['Icon']['href'],
      transparency: 0.3,
      zIndex: 101,
      anchorU: 0.5,
      anchorV: 0.5,
      clickable: true,
      visible: true,
      bearing: 0
    };
    // 添加覆盖物
    try {
      let imageOverlay = await this.mapController?.addImageOverlay(imageOverlayParams);
      console.info(`Add imageOverlay success，imageOverlay content is ${imageOverlay}`);
    } catch (e) {
      console.error(`Failed to create the imageOverlay, code is：${e.code}, message is ${e.message}`);
    }
  }
}

实现效果：

完整代码：

import { util } from '@kit.ArkTS';
import { BusinessError } from '@kit.BasicServicesKit';
import { XMLParser } from "[@ifbear](/user/ifbear)/fast-xml-parser";
import { map, mapCommon, MapComponent } from '@kit.MapKit';
import { AsyncCallback } from '@kit.BasicServicesKit';

@Entry
@Component
struct AddXmzOverlay {
  @State xmlContent?: object = undefined;
  private mapOptions?: mapCommon.MapOptions;
  private mapController?: map.MapComponentController;
  private callback?: AsyncCallback<map.MapComponentController>;

  aboutToAppear(): void {
    this.mapOptions = {
      position: {
        target: {
          latitude: -51.4624451955,
          longitude: 171.62500335
        },
        zoom: 2
      }
    };

    this.callback = async (err, mapController) => {
      if (!err) {
        this.mapController = mapController;
      } else {
        console.error(`Failed to initialize the map, code is：${err.code}, message is ${err.message}`);
      }
    };
  }
  async addImageOverlays() {
    // 不同的kml文件中，坐标信息在json中的位置可能不一样，根据实际的json结构进行调用
    for (let i = 0; i < (this.xmlContent as object)['kml']['Document']['GroundOverlay'].length; ++i) {
      let imageOverlayParams: mapCommon.ImageOverlayParams = {
        // 覆盖物范围
        bounds: {
          southwest: {
            latitude: (this.xmlContent as object)['kml']['Document']['GroundOverlay'][i]['LatLonBox']['south'] as number,
            longitude: (this.xmlContent as object)['kml']['Document']['GroundOverlay'][i]['LatLonBox']['west'] as number
          },
          northeast: {
            latitude: (this.xmlContent as object)['kml']['Document']['GroundOverlay'][i]['LatLonBox']['north'] as number,
            longitude: (this.xmlContent as object)['kml']['Document']['GroundOverlay'][i]['LatLonBox']['east'] as number
          }
        },
        // 覆盖物图片，图标需存放在resources/rawfile/files目录下
        image: (this.xmlContent as object)['kml']['Document']['GroundOverlay'][i]['Icon']['href'],
        transparency: 0.3,
        zIndex: 101,
        anchorU: 0.5,
        anchorV: 0.5,
        clickable: true,
        visible: true,
        bearing: 0
      };
      // 添加覆盖物
      try {
        let imageOverlay = await this.mapController?.addImageOverlay(imageOverlayParams);
        console.info(`Add imageOverlay success，imageOverlay content is ${imageOverlay}`);
      } catch (e) {
        console.error(`Failed to create the imageOverlay, code is：${e.code}, message is ${e.message}`);
      }
    }
  }

  build() {
    Stack({ alignContent: Alignment.Bottom }) {
      Column() {
        MapComponent({
          mapOptions: this.mapOptions,
          mapCallback: this.callback,
        })
          .width('100%')
          .height('100%');
      }.width('100%')

      // 加载图层
      Button('加载kmz图层')
        .onClick(() => {
          let context = this.getUIContext().getHostContext();
          try {
            context?.resourceManager.getRawFileContent('doc.kml', (error, value) => {
              if (error != null) {
                console.info(`error is：${error}`);
              } else {
                let rawFile = value;
                let textDecoder = util.TextDecoder.create('utf-8', { ignoreBOM: true });
                let rawFileString = textDecoder.decodeToString(rawFile, { stream: false });
                console.info(`rawFileString is ${rawFileString}`);
                const parser = new XMLParser();
                this.xmlContent = parser.parse(rawFileString) as object;
                this.addImageOverlays();
              }
            });
          } catch (error) {
            let code = (error as BusinessError).code;
            let message = (error as BusinessError).message;
            console.error(`callback getRawFileContent failed, error code: ${code}, message: ${message}.`);
          }
        })
        .margin(20)

    }.height('100%')
  }
}