目录

多边形

场景介绍

本章节将向您介绍如何在地图上绘制多边形。

多边形主要用于标识小区、学校、商圈等封闭区域范围，同时可呈现省、市、区县等行政区域边界。

接口说明

添加多边形功能主要由MapPolygonOptions、addPolygon和MapPolygon提供，更多接口及使用方法请参见接口文档。

接口名 描述
MapPolygonOptions 多边形参数。
addPolygon(options: mapCommon.MapPolygonOptions): Promise<MapPolygon> 在地图上添加一个多边形。
MapPolygon 多边形，支持更新和查询相关属性。

开发步骤

  1. 导入相关模块。

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

  2. 添加多边形，在callback方法中创建初始化参数并新建polygon。

    @Entry
@Component
struct MapPolygonDemo {
  // ...
  private mapOptions?: mapCommon.MapOptions;
  private mapController?: map.MapComponentController;
  private callback?: AsyncCallback<map.MapComponentController>;
  private mapPolygon?: map.MapPolygon;

  aboutToAppear(): void {
    // 地图初始化参数
    this.mapOptions = {
      position: {
        target: {
          latitude: 31.98,
          longitude: 118.78
        },
        zoom: 14
      }
    };
    this.callback = async (err, mapController) => {
      if (!err) {
        this.mapController = mapController;
        // 多边形初始化参数
        let polygonOptions: mapCommon.MapPolygonOptions = {
          points: [
            { longitude: 118.78, latitude: 31.975 },
            { longitude: 118.78, latitude: 31.985 },
            { longitude: 118.79, latitude: 31.985 },
            { longitude: 118.79, latitude: 31.975 }
          ],
          clickable: true,
          fillColor: 0xff00DE00,
          geodesic: false,
          strokeColor: 0xff000000,
          jointType: mapCommon.JointType.DEFAULT,
          strokeWidth: 10,
          visible: true,
          zIndex: 10
        }
        // 创建多边形
        try {
          this.mapPolygon = await this.mapController.addPolygon(polygonOptions);
        } catch (e) {
          console.error(`Failed to create the mapPolygon, 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%')

      // ...
  }
}