多边形

多边形是由环数组组成。

多边形有2D和3D两种不同的绘制方式。

1. 数据结构

1.1 多边形

interface IGraphicPolygon {
  // 多边形的位置
  position: number[][][]
  // 样式
  style: PolygonStyle|Polygon2DStyle
}

1.2 多边形样式

interface Polygon2DStyle {
  color: string
  size: number
  // 多边形的填充图案 
  pattern?: Polygon2DPattern
  // 多边形的边框线
  outline?: Polygon2DOutlineStyle
}

interface PolygonStyle {
  // 多边形颜色
  color: string
  // 文本大小
  size: number
  // 边框设置
  edges?: PolygonEdgesStyle
}

1.3 边框设置

interface Polygon2DOutlineStyle {
  color: string,
  // 线的类型
  pattern?: Pattern,
}

3D 设置边框大小，颜色，样式，例如：3px solid #407bFF

interface PolygonEdgesStyle {
  // 大小
  size: number | string
  // 样式
  type?: string
  // 颜色
  color: string
}

1.4 图案

多边形的填充图案共有7种图案：'solid'实线，'vertical'垂直，'horizontal'水平，'forward-diagonal'正向对角线，'diagonal-cross'对角交叉线，'cross'叉，'backward-diagonal'后向对角线

type Polygon2DPattern = 'solid' | 'vertical' | 'horizontal' | 'forward-diagonal' | 'diagonal-cross' | 'cross' | 'backward-diagonal'

边框线的类型共有12种：'dash'虚线，'dash-dot'点划线，'dot'点，'long-dash'长划线， 'long-dash-dot'长划点线，'long-dash-dot-dot'长划点点线，'none'无，'short-dash'短划线，'short-dash-dot'短划点线，'short-dash-dot-dot'短划点点线，'short-dot'短点线，'solid'实线

type Pattern = 'dash' | 'dash-dot' | 'dot' | 'long-dash' | 'long-dash-dot' | 'long-dash-dot-dot' | 'none' | 'short-dash' | 'short-dash-dot' | 'short-dash-dot-dot' | 'short-dot' | 'solid'

2. 使用

2.1 定义点的位置

const position= [
        [
          [116.30022, 39.90056, 10],
          [116.30080, 39.90056, 10],
          [116.30061, 39.89986, 10],
          [116.30023, 39.89986, 10],
        ],
      ]

2.2 定义绘制点的样式

有两种情况:

const style2D = {
        color: '#f1f1b8',
        outline: {
          size: 3,
          color: 'red',
          //线的类型，实线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',
        },
        pattern:'solid' //solid vertical horizontal forward-diagonal diagonal-cross cross backward-diagonal
      }

const style3D = {
        color: '#f1f1b8',//棱柱填充颜色
        size: 20,//棱柱 高度
        //棱柱边框设置 粗细 类型 颜色
        edges: {
          // 边框大小
          size: 2,
          // 边框类型 实线solid 素描sketch
          type: 'solid',
          //边框颜色
          color: '#f3d751'
        }
      }

2.3 绘制图形

有两种情况:

使用Polygon2D类来绘制。

const polygon2D = new ubm.Polygon2D(position,style2D)

使用Polygon3D类来绘制。

const polygon3D = new ubm.Polygon3D(position,style3D)

Geometry线

简介