线

可以在地图上添加线

实线

效果图如下：

腾讯位置商业授权鸿蒙系统覆盖物线SDK

示例

const points: Array<LatLng> = RandomUtils.randomLatLngArray();
this.line = new Line(
  {
    points: points,
    lineType: LineType.NormalLine,
    width: 30,
    borderWidth: 10,
    param: {
      segments: [{
        fromIndex: 0,
        toIndex: points.length - 1,
        color: "#ff0000",
        borderColor: "#00ff00"
      }],
    }
  }
);
this.mapController?.addLine(this.line);

参数说明：

参数	说明
points	经纬度点串
lineType	线的类型：NormalLine、DottedLine
width	线的宽度，单位是像素(px)
borderWidth	边框的宽度，单位是像素(px)
param	线的详细参数，实线为NormalLineExtraParam，虚线为DottedLineExtraParam

NormalLineExtraParam参数说明

参数	说明
segments	路线段

Segment参数说明

参数	说明
color	段颜色
borderColor	段边框颜色
fromIndex	段起始索引
toIndex	段终点索引

彩虹线

效果图如下：

腾讯位置商业授权鸿蒙系统覆盖物线SDK

示例

和实线使用方式基本一致，segments参数分段设置多种颜色即可，以下是完整示例，4个点，3个段：

const points: Array<LatLng> = RandomUtils.randomLatLngArray(4);
this.line = new Line(
  {
    points: points,
    lineType: LineType.NormalLine,
    width: 30,
    borderWidth: 10,
    param: {
      segments: [
        {
          fromIndex: 0,
          toIndex: 1,
          color: "#ff0000",
          borderColor: "#00ff00"
        },
        {
          fromIndex: 1,
          toIndex: 2,
          color: "#fff3d127",
          borderColor: "#ff1e4a80"
        },
        {
          fromIndex: 2,
          toIndex: 3,
          color: "#ffe226cf",
          borderColor: "#ff232623"
        }
      ],
    }
  }
);
this.mapController?.addLine(this.line);

虚线

效果图如下：

腾讯位置商业授权鸿蒙系统覆盖物线SDK

示例

设置线的类型

lineType: LineType.DottedLine,

设置虚线参数

param: {
  color: "#ff00ff",
  borderColor: "#ffff00",
  pattern: [1, 2, 3, 4]
}

完整示例

const points: Array<LatLng> = RandomUtils.randomLatLngArray(4);
this.line = new Line(
  {
    points: points,
    lineType: LineType.DottedLine,
    width: 30,
    borderWidth: 10,
    param: {
      color: "#ff00ff",
      borderColor: "#ffff00",
      pattern: [1, 2, 3, 4]
    }
  }
);
this.mapController?.addLine(this.line);
this.mapController?.moveCamera(points);

DottedLineExtraParam参数说明

参数	说明
color	线的颜色
borderColor	边框颜色
pattern	虚线样式，偶数个，含义[实部长度1, 虚部长度1, 实部长度2, 虚部长度2…]，单位是像素(px)

纹理线

效果图如下：

腾讯位置商业授权鸿蒙系统覆盖物线SDK

示例

设置线的类型

lineType: LineType.TextureLine,

设置虚线参数

param: {
  textureSegments: [
    {
      fromIndex:0,
      toIndex:points.length - 1,
      color: TextureLineColor.LIGHT_BLUE
    }
  ]
}

完整示例

const points: Array<LatLng> = RandomUtils.randomLatLngArray(4);
this.line = new Line(
  {
    points: points,
    lineType: LineType.TextureLine,
    width: 30,
    borderWidth: 10,
    param: {
      textureSegments: [
        {
          fromIndex:0,
          toIndex:points.length - 1,
          color: TextureLineColor.LIGHT_BLUE
        }
      ]
    }
  }
);
this.mapController?.addLine(this.line);
this.mapController?.moveCamera(points);

参数说明

TextureLineExtraParam

纹理线样式信息参数对象

名称	类型	说明
textureSegments	TextureSegment[]	必填；设置纹理线的分段样式
textureImage	ImageEntity	!!#ff0000 （2.1.0新增）!!选填；设置线的纹理，配合TextureSegment的color属性使用，比如color设置0，则取纹理图的第1行像素沿线平铺显示，该功能一般用于制作线的阴影。图片限制最大高度16px

TextureSegment

实线分段样式控制信息对象

名称	类型	说明
color	number	必填；纹理颜色；使用默认纹理图时支持固定的颜色枚举: 0灰色 1淡蓝色 2红色 3黄色 4绿色 5中蓝色 6深蓝色 7透明色 8灰蓝色 9猪肝红；使用自定义纹理图时，代表纹理图的第N行像素
fromIndex	number	可选；本分段的颜色起点位置在Line的Points串中的索引位置；默认为0
endIndex	string	可选；本分段的颜色终点位置在Line的Points串中的索引位置；默认为点串最后一个索引

TextureLineColor

纹理颜色枚举

值	描述
`TextureLineColor.GREY`	灰色
`TextureLineColor.LIGHT_BLUE`	淡蓝
`TextureLineColor.RED`	红色
`TextureLineColor.YELLOW`	黄色
`TextureLineColor.GREEN`	绿色
`TextureLineColor.MID_BLUE`	中蓝
`TextureLineColor.DARK_BLUE`	深蓝
`TextureLineColor.TRANSPARENT`	透明色
`TextureLineColor.GRAYBLUE`	灰蓝
`TextureLineColor.LIVER_RED`	猪肝红

路名

效果图如下：

腾讯位置商业授权鸿蒙系统覆盖物线SDK

示例

添加路名

const points = RandomUtils.randomLatLngArray();
const style: RoadNameStyle = {
  color: RandomUtils.randomColor(),
  backgroundColor: RandomUtils.randomColor(),
  fontSize: RandomUtils.generateRandomNumberInRange(12, 20),
  rank: 1
}
const roadNames: Array<RoadName> = [
  {
    startNum: 0,
    endNum: 1,
    roadName: RandomUtils.randomString(10)
  },
  {
    startNum: 1,
    endNum: points.length - 1,
    roadName: RandomUtils.randomString(10)
  },
]
const roads: RoadNames = new RoadNames({
  points: points,
  roadNames: roadNames,
  style: style
})
this.mapController?.addRoadNames(roads)
this.mapController?.moveCamera(points)

// 添加线是为了展示效果，并不是必要的，路名与线关系独立
this.mapController?.addLine(new Line({
  points:points,
  width:30
}))

删除路名：

this.mapController?.removeRoadNames(roads)

参数说明

RoadNames

路名，沿道路线分布排列的文本，通常用于显示道路名场景； ** 构造函数 **

语法

const names = new RoadNames(options: RoadNamesOptions)

参数说明

参数名	类型	说明
options	RoadNamesOptions	必填，路名参数对象

RoadNamesOptions

名称	类型	说明
points	LatLng[]	必填；路名分布线的点串坐标数组；
roadNames	RoadName[]	必填；分段路名数据；
style	RoadNameStyle	必填；路名文本样式；

RoadName

分段路名对象规范

名称	类型	说明
roadName	string	必填；分段路名名称；
startNum	number	必填；路名展示的起点为于RoadNamesOptions中的points的索引位置；
endNum	number	必填；路名展示的终点为于RoadNamesOptions中的points的索引位置；

RoadNameStyle

路名样式对象

名称	类型	说明
color	string	必填；路名颜色；颜色格式为`#aarrggbb`或`#rrggbb`；
backgroundColor	string	必填；分段路名边背景色；颜色格式为`#aarrggbb`或`#rrggbb`；
fontSize	number	必填；路名文本字体大小；

删除线

this.mapController?.removeLine(this.line);

更新线

this.mapController?.updateLine(this.line);

设置点击事件

this.line.setOnClickListener(()=>{
})

编辑：地图小米

腾讯位置商业授权鸿蒙系统 覆盖物 线SDK

线

实线

示例

彩虹线

示例

虚线

示例

纹理线

示例

参数说明

TextureLineExtraParam

TextureSegment

TextureLineColor

路名

示例

RoadNames

RoadNamesOptions

RoadName

RoadNameStyle

删除线

更新线

设置点击事件

腾讯位置商业授权鸿蒙系统覆盖物线SDK