# 如何在地图上绘制虚线

#### 问题现象

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

#### 效果预览

#### 背景知识

*   Map Kit（地图服务）为开发者提供强大而便捷的地图能力，开发前需开通地图服务，参考：开通地图服务。
*   添加折线功能主要由MapPolylineOptions、addPolyline和MapPolyline提供。
*   PatternItemType：描述圆、多边形或折线的边框样式类型。

| 名称 | 值 | 说明 |
| --- | --- | --- |
| 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%');
  }
}
```