点

在场景中，点的位置是由X，Y，Z的坐标定义的。

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

1. 数据结构

1.1 点

interface IGraphicPoint {
  // 点的位置
  position: number[]
  // 点样式
  style: PointStyle
}

1.2 点样式

  • 2D
interface PointStyle {
  // 颜色
  color: string
  // 图形类型
  type?: PointType
  // 大小
  size: number | string
  // 轮廓样式，是2D独有的
  outline?: Point2DOutlineStyle
}
  • 3D
interface PointStyle {
  // 颜色
  color: string
  // 图形类型
  type?: PointType
  // 大小
  size: number | string
}

1.3 图形类型

  • 2D 共有6种图形类型：'circle'圆 ， 'square'方 ， 'cross'加 ， 'x'叉 ， 'kite'菱 ， 'triangle'三角。
type PointType = 'circle' | 'square' | 'cross' | 'x' | 'kite' | 'triangle'
  • 3D 共有7种图形类型：'sphere'球，'cylinder'圆柱， 'cube'立方体，'cone'圆锥，'inverted-cone' 倒立圆锥，'diamond'菱形 ，'tetrahedron'四面体
type PointType = 'sphere' | 'cylinder' | 'cube' | 'cone' | 'inverted-cone' | 'diamond' | 'tetrahedron'

1.4 轮廓样式

可定义图形的轮廓样式是什么颜色及粗细

interface Point2DOutlineStyle {
  // 颜色
  color: string 
  //边框粗细 
  size: number | string 
}

2. 使用

2.1 定义点的位置

const position = [116.3003, 39.9002, 10]

2.2 定义绘制点的样式

有两种情况:

  • 2D
const style2D ={
          color: '#f3d751',
          size: 100, //三角形大小(在此只能为一个数值，不能为数组)
          type: 'triangle',//三角
          //边框设置
          outline: {
            color: 'red',
            size: 1,
          }
        }
  • 3D
const style3D = {
      color: '#f3d751',
      size: [8,8,8], //圆锥 [长,宽,高]
      type: 'cone', //点类型 在此为 圆锥 cone 
    }

2.3 绘制图形

有两种情况:

  • 使用Point2D类来绘制。
const point2D = new ubm.Point2D(position,style2D)
  • 使用Point3D类来绘制。
const point3D = new ubm.Point3D(position,style3D)
Table of Contents