场景介绍

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

接口说明

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

接口名	描述
MapPolygonOptions	用于描述MapPolygon属性。
addPolygon(options: mapCommon.MapPolygonOptions): Promise<MapPolygon>	在地图上添加一个多边形。
MapPolygon	更新和查询多边形的接口。

开发步骤

1. 导入相关模块。
   1. import { MapComponent, mapCommon, map } from '@kit.MapKit';
   2. import { AsyncCallback } from '@kit.BasicServicesKit';
2. 添加多边形，在Callback方法中创建初始化参数并新建polygon，效果如下图。
   1. @Entry
   2. @Component
   3. struct MapPolygonDemo {
   4. private mapOptions?: mapCommon.MapOptions;
   5. private mapController?: map.MapComponentController;
   6. private callback?: AsyncCallback<map.MapComponentController>;
   7. private mapPolygon?: map.MapPolygon;
   8. aboutToAppear(): void {
   9. // 地图初始化参数
   10. this.mapOptions = {
   11. position: {
   12. target: {
   13. latitude: 31.98,
   14. longitude: 118.78
   15. },
   16. zoom: 14
   17. }
   18. };
   19. this.callback = async (err, mapController) => {
   20. if (!err) {
   21. this.mapController = mapController;
   22. // 多边形初始化参数
   23. let polygonOptions: mapCommon.MapPolygonOptions = {
   24. points: [{longitude:118.78,latitude:31.975}, {longitude:118.78,latitude:31.985},
   25. {longitude:118.79,latitude:31.985},{longitude:118.79,latitude:31.975}],
   26. clickable: true,
   27. fillColor: 0xff00DE00,
   28. geodesic: false,
   29. strokeColor: 0xff000000,
   30. jointType: mapCommon.JointType.DEFAULT,
   31. strokeWidth: 10,
   32. visible: true,
   33. zIndex: 10
   34. }
   35. // 创建多边形
   36. this.mapPolygon = await this.mapController.addPolygon(polygonOptions);
   37. }
   38. };
   39. }
   40. build() {
   41. Stack() {
   42. Column() {
   43. MapComponent({ mapOptions: this.mapOptions, mapCallback: this.callback });
   44. }.width('100%')
   45. }.height('100%')
   46. }
   47. }