MapArc

Use Cases

This section describes how to draw a MapArc on a map and use the MapArcParams class to set MapArc parameters such as its position, width, and color.

MapArcs are mainly used to display travel routes of airplanes and ships, intuitively present curved trajectories, and indicate turning directions at intersections.

Click to enlarge

API Description

The MapArc adding function is mainly provided by MapArcParams, addArc, and MapArc. For more information about the APIs, please refer to API Reference.

API	Description
MapArcParams	MapArc parameters.
addArc(params: mapCommon.MapArcParams): MapArc	Adds a MapArc.
MapArc	MapArc. This API supports updating and querying MapArc attributes.

Development Procedure

[h2]Adding a MapArc

Import required modules.

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

Add a MapArc. Create initialization parameters in the callback method, and create a MapArc.

@Entry
@Component
struct MapArcDemo {
  private TAG = "OHMapSDK_MapArcDemo";
  private mapOptions?: mapCommon.MapOptions;
  private mapController?: map.MapComponentController;
  private callback?: AsyncCallback<map.MapComponentController>;
  private mapArc?: map.MapArc;

  aboutToAppear(): void {
    this.mapOptions = {
      position: {
        target: {
          latitude: 34.757975,
          longitude: 113.665412
        },
        zoom: 6
      }
    }

    this.callback = async (err, mapController) => {
      if (!err) {
        this.mapController = mapController;
        if (!this.mapController) {
          console.error(this.TAG, "mapController is null");
          return;
        }
        // Set MapArc parameters.
        let mapArcParams: mapCommon.MapArcParams = {
          // Coordinates of the MapArc start point.
          startPoint: {
            latitude: 39.913138,
            longitude: 116.415112
          },
          // Coordinates of the MapArc end point.
          endPoint: {
            latitude: 28.239473,
            longitude: 112.954094
          },
          // Coordinates of the MapArc midpoint.
          centerPoint: {
            latitude: 33.86970399048567,
            longitude: 112.08633528544145
          },
          width: 10,
          color: 0xffff0000,
          visible: true,
          zIndex: 100
        };
        // Add a MapArc.
        try {
          this.mapArc = await this.mapController.addArc(mapArcParams);
        } catch (e) {
          console.error(`Failed to create the mapArc. Code: ${e.code}; message: ${e.message}`);
        }
      } else {
        console.error(`Failed to initialize the map. Code: ${err.code}; message: ${err.message}`);
      }
    }
  }

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