华为HarmonyOS地图服务 8 - 在地图上绘制折线

场景介绍

本章节将向您介绍如何在地图上绘制折线。

 

接口说明

添加折线功能主要由MapPolylineOptions、addPolyline和MapPolyline提供，更多接口及使用方法请参见接口文档。

接口名	描述
MapPolylineOptions	用于描述MapPolyline属性。
addPolyline(options: mapCommon.MapPolylineOptions): Promise<MapPolyline>	在地图上添加一条折线。
MapPolyline	更新和查询折线的接口。

开发步骤

添加折线

1. 导入相关模块。

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

    

2. 添加折线，在Callback方法中创建初始化参数并新建MapPolyline。

   @Entry
   @Component
   struct MapPolylineDemo {
   private mapOptions?: mapCommon.MapOptions;
   private mapController?: map.MapComponentController;
   private callback?: AsyncCallback<map.MapComponentController>;
   private mapPolyline?: map.MapPolyline;
   aboutToAppear(): void {
   // 地图初始化参数
   this.mapOptions = {
   position: {
   target: {
   latitude: 31.98,
   longitude: 118.78
   },
   zoom: 14
   }
   };
   this.callback = async (err, mapController) => {
   if (!err) {
   this.mapController = mapController;
   // polyline初始化参数
   let polylineOption: mapCommon.MapPolylineOptions = {
   points: [{longitude:118.78,latitude:31.975}, {longitude:118.78,latitude:31.982}, {longitude:118.79,latitude:31.985}],
   clickable: true,
   startCap: mapCommon.CapStyle.BUTT,
   endCap: mapCommon.CapStyle.BUTT,
   geodesic: false,
   jointType: mapCommon.JointType.BEVEL,
   visible: true,
   width: 10,
   zIndex: 10,
   gradient: false
   }
   // 创建polyline
   this.mapPolyline = await this.mapController.addPolyline(polylineOption);
   }
   };
   }
   build() {
   Stack() {
   Column() {
   MapComponent({ mapOptions: this.mapOptions, mapCallback: this.callback });
   }.width('100%')
   }.height('100%')
   }
   }

    

   

设置折线分段颜色

方法一：新建折线时在MapPolylineOptions的colors属性中设置折线分段颜色值。

let polylineOption: mapCommon.MapPolylineOptions = {
...
colors: [0xffffff00, 0xff000000]
};

方法二：调用MapPolyline的setColors()方法。

let colors = [0xffffff00, 0xff000000];
this.mapPolyline.setColors(colors);

 

设置折线可渐变

方法一：MapPolylineOptions的gradient属性设置为true。

let polylineOption: mapCommon.MapPolylineOptions = {
...
gradient: true
};

方法二：调用MapPolyline的setGradient()方法。

this.mapPolyline.setGradient(true);

绘制纹理

方法一：新建折线时在MapPolylineOptions的customTexture属性设置折线纹理。

let polylineOption: mapCommon.MapPolylineOptions = {
points: [
{ latitude: 32.220750, longitude: 118.788765 },
{ latitude: 32.120750, longitude: 118.788765 },
{ latitude: 32.020750, longitude: 118.788765 },
{ latitude: 31.920750, longitude: 118.788765 },
{ latitude: 31.820750, longitude: 118.788765 },
],
clickable: true,
jointType: mapCommon.JointType.DEFAULT,
width: 20,
customTexture: "icon/naviline_arrow.png"
}

方法二：调用MapPolyline的setCustomTexture方法。

await this.mapPolyline.setCustomTexture("icon/naviline_arrow.png");