线

线是由路径和空间组成的数据，每一条路径都表示一个点数组。

线有2D和3D两种不同的绘制方式。

1. 数据结构

1.1 线

interface IGraphicLine {
  // 线条位置坐标
  position: number[][][]
  // 线条样式
  style: LineStyle|PathStyle
}

1.2 线样式

  • 2D
interface LineStyle {
  // 线条颜色
  color: string
  // 线条宽度，线的宽度，以磅为单位。可以使用以点或像素（例如 12px）表示大小的字符串进行自动转换
  size: number | string
  // 线条填充样式，分为'dash'
  pattern?: Pattern
  // 端点的连接方式
  cap?: 'butt' | 'round' | 'square'
  // 交点的连接方式
  join?: 'miter' | 'round' | 'bevel'
  // 线条标记
  marker: LineMarkerStyle
}
  • 3D
interface PathStyle {
  // 线条颜色
  color: string
  // 线条宽度，线的宽度，以磅为单位。可以使用以点或像素（例如 12px）表示大小的字符串进行自动转换
  size: number[]
  placement?: 'center' | 'bottom' | 'top'
  // 端点的连接方式
  cap?: 'butt' | 'round' | 'square'
  // 交点的连接方式
  join?: 'miter' | 'round' | 'bevel'
  // circle 创建具有管道形状的路径，并将其设置为 quad 使路径为矩形
  profile?: 'circle' | 'quad'
}

1.3 线条标记

线条标记，包括标记位置，样式，

  • 位置："begin"|"end"|"begin-end"
  • 样式："arrow"|"circle"|"square"|"diamond"|"cross"|"x"
  • 颜色：'begin arrow # 407bFF'
interface LineMarkerStyle {
  // 位置
  placement: string
  // 样式
  style: string、
  // 颜色
  color: string
}

2. 使用

2.1 定义线条的位置

const position =  [
        [
          //途径点，可以是顶点。[经度,纬度,高程]
          [116.3001, 39.9002, 10],
          [116.3007, 39.9002, 10],
        ],
      ]

2.2 定义绘制线条的样式

有两种情况:

  • 2D
const style2D = {
        color: '#407bFF',//线的颜色，在此是蓝色
        size: 3,//线的粗细，在此为3
        //线的类型，实线solid 虚线dash 点虚线dot 点和虚线交叉dash-dot long-dash-dot long-dash-dot-dot short-dash short-dash-dot short-dash-dot-dot short-dot 在此为实线
        pattern: 'solid'
      }
  • 3D
const style3D = {
  color: "#a57e5e",//多段线的颜色 在此褐色
  size: [1, 6],//多段线的 [宽,高]
  placement: 'bottom',
  profile: 'quad',//多段线的侧面轮廓 方形quad 圆形circle
}

2.3 绘制图形

有两种情况:

  • 使用Polyline2D类来绘制。
const polyline2D = new ubm.Polyline2D(position,style2D)
  • 使用Polyline3D类来绘制。
const polyline2D = new ubm.Polyline3D(position,style3D)
Table of Contents