目录

如何在地图上绘制虚线

问题现象

参考官网的文档，可以实现在地图上添加折线，如何实现虚线效果？

效果预览

背景知识

名称

值

说明

DASH

0

表示折线、多边形或圆的边框中的短划线。

DOT

1

表示折线、多边形或圆的边框的点。

GAP

2

表示折线、多边形或圆中边框的间隙。

解决方案

patterns可配置折线的样式，将patterns设置成patterns: [{ type: 0, length: 10 }, { type: 2, length: 10 }]表示短划线与间隙1：1相间，即呈现虚线效果。完整示例参考如下：

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

@Entry
@Component
struct PolylinePage {
  private mapOptions?: mapCommon.MapOptions;
  private mapController?: map.MapComponentController;
  private callback?: AsyncCallback<map.MapComponentController>;
  @State mapHeight: number = 0;

  aboutToAppear(): void {
    try {
      let displayClass = display.getDefaultDisplaySync();
      this.mapHeight = this.getUIContext().px2vp(displayClass.height);
    } catch (error) {
      console.error(`getDefaultDisplaySync error. Code is ${error.code}, message is ${error.message}.`);
    }

    // 地图初始化参数
    this.mapOptions = {
      position: {
        target: {
          latitude: 31.985,
          longitude: 118.78
        },
        zoom: 15
      }
    };

    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.ROUND,
          endCap: mapCommon.CapStyle.ROUND,
          jointType: mapCommon.JointType.BEVEL,
          visible: true,
          width: 10,
          zIndex: 1,
          gradient: false,
          patterns: [{ type: 0, length: 10 }, { type: 2, length: 10 }]
        };
        // 创建polyline
        try {
          await this.mapController.addPolyline(polylineOption);
        } catch (error) {
          console.error(`创建polyline失败, code is：${error.code}, message is ${error.message}`);
        }
      } else {
        console.error(`地图初始化失败, code is：${err.code}, message is ${err.message}`);
      }
    };
  }

  build() {
    Stack() {
      MapComponent({ mapOptions: this.mapOptions, mapCallback: this.callback })
        .width('100%')
        .height(this.mapHeight)
        .expandSafeArea([SafeAreaType.SYSTEM], [SafeAreaEdge.TOP, SafeAreaEdge.BOTTOM]);
    }.height('100%');
  }
}